Special handling for the H5 side

Special Handling for H5 Platform

When developing the H5 platform with uni-app, special handling is required due to differences in the runtime environment compared to native apps. From layout adaptation to API compatibility, developers need to address these disparities to ensure the application functions properly on the H5 platform.

Responsive Layout and Screen Adaptation

The H5 platform requires handling different device screen sizes. It is recommended to use flex layout combined with vw/vh units for responsive design. For example:

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

For elements requiring fixed dimensions, use calc:

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

Routing Handling

H5 platform routing is based on the browser's History API, so routing mode configuration must be considered. Configure in pages.json:

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

Dynamic route parameters should be retrieved via the onLoad hook:

export default {
  onLoad(options) {
    console.log('Route parameters:', options.id)
  }
}

Browser API Differences

The H5 platform cannot directly call native APIs. Use conditional compilation or alternatives:

// #ifdef H5
document.addEventListener('visibilitychange', () => {
  console.log('Page visibility changed:', document.hidden)
})
// #endif

For file operations, use the browser's File API:

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

Style Compatibility Issues

The H5 platform requires handling vendor prefixes for different browsers. Use PostCSS to auto-add prefixes. Common issues:

/* Flexbox compatibility */
.box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
}

Scroll behavior differences can be fixed with CSS:

/* Fix iOS elastic scrolling */
.scroll-area {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

Performance Optimization Strategies

Pay special attention to resource loading and rendering performance on the H5 platform:

1. Lazy loading images:

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

2. Virtual lists for long lists:

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

3. Use Web Workers for heavy tasks:

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

// Main thread
const worker = new Worker('worker.js')
worker.postMessage(inputData)
worker.onmessage = (e) => {
  console.log('Calculation result:', e.data)
}

Third-Party Library Integration

Considerations when integrating browser-specific libraries:

1. ECharts integration:

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

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

2. Asynchronous loading of map libraries:

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)
  })
}

Security Measures

The H5 platform faces additional security risks:

1. XSS protection:

// Use DOMPurify to sanitize HTML
import DOMPurify from 'dompurify'
const clean = DOMPurify.sanitize(userInput)

2. CSP policy setup:

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

3. Secondary verification for sensitive operations:

function transferFunds(amount) {
  if (amount > 1000) {
    const verified = confirm('Please confirm large transfer')
    if (!verified) return
  }
  // Execute transfer
}

Debugging and Error Monitoring

H5-specific debugging techniques:

1. Enhanced mobile debugging with vConsole:

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

2. Error reporting:

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

3. Performance metrics collection:

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

Browser Storage Strategies

H5 storage solutions:

1. Local storage wrapper:

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 for large data:

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

3. Caching strategy:

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

Cross-Origin Solutions

Common cross-origin handling methods:

1. Development environment proxy:

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

2. Production CORS configuration:

// Backend example (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 fallback:

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)
}

Mobile Gesture Handling

Special handling for mobile gestures:

1. Distinguishing tap and long press:

let timer
element.addEventListener('touchstart', () => {
  timer = setTimeout(() => {
    console.log('Long press event')
  }, 500)
})

element.addEventListener('touchend', () => {
  clearTimeout(timer)
  console.log('Tap event')
})

2. Swipe direction detection:

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 ? 'Swipe right' : 'Swipe left')
  } else {
    console.log(deltaY > 0 ? 'Swipe down' : 'Swipe up')
  }
})

3. Pinch-to-zoom implementation:

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 ratio:', scale)
  }
})