H5 端的特殊处理

H5 端的特殊处理

uni-app 开发 H5 端时，由于运行环境与原生应用不同，需要针对浏览器特性进行特殊处理。从布局适配到 API 兼容，开发者需注意这些差异以确保应用在 H5 端正常运行。

响应式布局与屏幕适配

H5 端需要处理不同设备的屏幕尺寸，推荐使用 flex 布局结合 vw/vh 单位实现响应式设计。例如：

.container {
  display: flex;
  width: 100vw;
  height: 100vh;
  padding: 10px;
  box-sizing: border-box;
}

对于需要固定宽高的元素，可以使用 calc 计算：

.item {
  width: calc(50vw - 20px);
  height: calc(100vh - 60px);
}

路由处理

H5 端路由基于浏览器 History API，需注意路由模式配置。在 pages.json 中设置：

{
  "h5": {
    "router": {
      "mode": "history",
      "base": "/h5/"
    }
  }
}

动态路由参数需通过 onLoad 钩子获取：

export default {
  onLoad(options) {
    console.log('路由参数:', options.id)
  }
}

浏览器 API 差异处理

H5 端无法直接调用原生 API，需使用条件编译或替代方案：

// #ifdef H5
document.addEventListener('visibilitychange', () => {
  console.log('页面可见性变化:', document.hidden)
})
// #endif

对于文件操作，可使用浏览器 File API：

const fileInput = document.createElement('input')
fileInput.type = 'file'
fileInput.accept = 'image/*'
fileInput.onchange = (e) => {
  const file = e.target.files[0]
  console.log('选中文件:', file)
}
fileInput.click()

样式兼容性问题

H5 端需处理不同浏览器的样式前缀，建议使用 PostCSS 自动添加前缀。常见问题示例：

/* 需要处理弹性盒兼容性 */
.box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
}

滚动行为差异可通过 CSS 修正：

/* 解决 iOS 弹性滚动问题 */
.scroll-area {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

性能优化策略

H5 端需特别注意资源加载和渲染性能：

1. 图片懒加载实现：

<img v-lazy="imageUrl" alt="" />

2. 虚拟列表处理长列表：

<template>
  <uv-virtual-list :data="bigData" :item-size="50">
    <template v-slot="{ item }">
      <div>{{ item.text }}</div>
    </template>
  </uv-virtual-list>
</template>

3. 使用 Web Worker 处理耗时任务：

// worker.js
self.onmessage = function(e) {
  const result = heavyCalculation(e.data)
  self.postMessage(result)
}

// 主线程
const worker = new Worker('worker.js')
worker.postMessage(inputData)
worker.onmessage = (e) => {
  console.log('计算结果:', e.data)
}

第三方库集成

H5 端集成浏览器专用库时需注意：

1. 图表库 ECharts 的引入：

// #ifdef H5
import * as echarts from 'echarts'
// #endif

mounted() {
  // #ifdef H5
  const chart = echarts.init(this.$refs.chart)
  chart.setOption({...})
  // #endif
}

2. 地图库的异步加载：

function loadAMap() {
  return new Promise((resolve) => {
    const script = document.createElement('script')
    script.src = 'https://webapi.amap.com/maps?v=2.0&key=your-key'
    script.onload = resolve
    document.head.appendChild(script)
  })
}

安全防护措施

H5 端面临更多安全风险，需特别注意：

1. XSS 防护：

// 使用 DOMPurify 过滤 HTML
import DOMPurify from 'dompurify'
const clean = DOMPurify.sanitize(userInput)

2. CSP 策略设置：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

3. 敏感操作二次验证：

function transferFunds(amount) {
  if (amount > 1000) {
    const verified = confirm('大额转账请再次确认')
    if (!verified) return
  }
  // 执行转账
}

调试与错误监控

H5 端特有的调试技巧：

1. 使用 vConsole 增强移动端调试：

// main.js
// #ifdef H5
import VConsole from 'vconsole'
new VConsole()
// #endif

2. 错误监控上报：

window.addEventListener('error', (event) => {
  const { message, filename, lineno, colno, error } = event
  reportError({
    message,
    stack: error?.stack,
    location: `${filename}:${lineno}:${colno}`
  })
})

3. 性能指标采集：

const perfData = {
  loadTime: performance.timing.loadEventEnd - performance.timing.navigationStart,
  readyTime: performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart
}

浏览器存储策略

H5 端存储方案选择：

1. 本地存储封装：

const storage = {
  set(key, value) {
    // #ifdef H5
    localStorage.setItem(key, JSON.stringify(value))
    // #endif
  },
  get(key) {
    // #ifdef H5
    return JSON.parse(localStorage.getItem(key))
    // #endif
  }
}

2. IndexedDB 大数据存储：

const request = indexedDB.open('myDatabase', 1)
request.onupgradeneeded = (event) => {
  const db = event.target.result
  db.createObjectStore('records', { keyPath: 'id' })
}

3. 缓存策略实现：

// Service Worker 缓存
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  )
})

跨域问题解决方案

H5 端常见的跨域处理方式：

1. 开发环境代理配置：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com',
        changeOrigin: true
      }
    }
  }
}

2. 生产环境 CORS 配置：

// 后端示例 (Node.js Express)
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://your-domain.com')
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE')
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  next()
})

3. JSONP 兼容方案：

function jsonp(url, callback) {
  const script = document.createElement('script')
  const callbackName = `jsonp_${Date.now()}`
  
  window[callbackName] = (data) => {
    callback(data)
    delete window[callbackName]
    document.body.removeChild(script)
  }
  
  script.src = `${url}?callback=${callbackName}`
  document.body.appendChild(script)
}

移动端手势处理

H5 端需要特别处理移动端手势：

1. 轻点与长按区分：

let timer
element.addEventListener('touchstart', () => {
  timer = setTimeout(() => {
    console.log('长按事件')
  }, 500)
})

element.addEventListener('touchend', () => {
  clearTimeout(timer)
  console.log('轻点事件')
})

2. 滑动方向判断：

let startX, startY
element.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX
  startY = e.touches[0].clientY
})

element.addEventListener('touchmove', (e) => {
  const deltaX = e.touches[0].clientX - startX
  const deltaY = e.touches[0].clientY - startY
  
  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    console.log(deltaX > 0 ? '右滑' : '左滑')
  } else {
    console.log(deltaY > 0 ? '下滑' : '上滑')
  }
})

3. 缩放手势实现：

let initialDistance
element.addEventListener('touchstart', (e) => {
  if (e.touches.length === 2) {
    initialDistance = Math.hypot(
      e.touches[0].clientX - e.touches[1].clientX,
      e.touches[0].clientY - e.touches[1].clientY
    )
  }
})

element.addEventListener('touchmove', (e) => {
  if (e.touches.length === 2) {
    const currentDistance = Math.hypot(
      e.touches[0].clientX - e.touches[1].clientX,
      e.touches[0].clientY - e.touches[1].clientY
    )
    const scale = currentDistance / initialDistance
    console.log('缩放比例:', scale)
  }
})