Cross-platform debugging and issue troubleshooting

Selection of Cross-Platform Debugging Tools

Commonly used cross-platform debugging tools in uni-app development include:

• Chrome Developer Tools (H5)
• WeChat Developer Tools (Mini Program)
• Android Studio Logcat (Android Native)
• Xcode Console (iOS Native)
• Built-in debugging features of uni-app

H5 debugging example:

// Output logs in the page
console.log('Current page path:', this.$route.path)

// Performance monitoring
console.time('renderTime')
// ...Rendering logic
console.timeEnd('renderTime')

Mini Program-specific debugging methods:

// WeChat Mini Program-specific API
wx.getSystemInfo({
  success: function(res) {
    console.log('System info:', res)
  }
})

// Trigger forced re-render
this.$forceUpdate()

Unified Log Collection Across Platforms

Implementation of a cross-platform unified log management solution:

// utils/logger.js
const log = {
  info(msg) {
    #ifdef H5
    console.log(`[H5] ${msg}`)
    #endif
    #ifdef MP-WEIXIN
    console.log(`[WeChat Mini Program] ${msg}`)
    wx.addLog({ content: msg }) // WeChat-specific log API
    #endif
    // Other platform checks...
    
    // Simultaneously send to server
    uni.request({
      url: 'https://api.example.com/log',
      method: 'POST',
      data: { message: msg }
    })
  }
}

// Usage example
import log from '@/utils/logger'
log.info('User clicked purchase button')

Troubleshooting Style Compatibility Issues

Common style issues and solutions:

1. Handling unit differences:

/* Universal style solution */
.container {
  padding: 10px; /* Base unit */
  /* #ifdef H5 */
  padding: 0.625rem; /* H5 uses rem */
  /* #endif */
  /* #ifdef MP-WEIXIN */
  padding: 20rpx; /* Mini Program uses rpx */
  /* #endif */
}

2. Flex layout differences example:

<view class="flex-container">
  <view class="item">A</view>
  <view class="item">B</view>
</view>

<style>
/* Cross-platform compatible flex solution */
.flex-container {
  display: flex;
  flex-direction: row;
  /* #ifdef MP-WEIXIN */
  align-items: flex-start; /* Mini Program default stretch may behave differently */
  /* #endif */
}
</style>

Handling Native Capability Call Exceptions

Cross-platform API call error capture solution:

// Encapsulate safe call method
async function safeCall(apiName, params = {}) {
  try {
    // Check API availability
    if (typeof uni[apiName] !== 'function') {
      throw new Error(`API ${apiName} does not exist`)
    }
    
    const res = await uni[apiName](params)
    console.log(`${apiName} call successful:`, res)
    return res
  } catch (e) {
    console.error(`${apiName} call failed:`, e)
    // Platform-specific error handling
    #ifdef H5
    alert(`Feature not supported on H5: ${apiName}`)
    #endif
    #ifdef APP-PLUS
    uni.showToast({ title: 'Feature error', icon: 'none' })
    #endif
    return null
  }
}

// Usage example
safeCall('chooseImage', {
  count: 3,
  sourceType: ['album']
})

Performance Issue Identification and Optimization

Cross-platform performance analysis toolchain:

1. Memory leak detection example:

// Track component instances
const instanceMap = new WeakMap()

export default {
  mounted() {
    instanceMap.set(this, {
      created: Date.now(),
      route: this.$route.path
    })
  },
  beforeDestroy() {
    // Check unreleased components
    console.log('Component destroyed:', instanceMap.get(this))
    instanceMap.delete(this)
  }
}

2. Rendering performance optimization:

<template>
  <!-- Large data list optimization -->
  <scroll-view 
    scroll-y 
    @scrolltolower="loadMore"
    :scroll-with-animation="false">
    <recycle-list 
      :items="bigData" 
      :item-size="80">
      <template v-slot="{ item }">
        <view class="item">{{ item.name }}</view>
      </template>
    </recycle-list>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      bigData: [] // Large data collection
    }
  },
  methods: {
    loadMore() {
      // Pagination loading logic
    }
  }
}
</script>

Platform Feature Detection and Adaptation

Dynamic environment detection implementation:

// platform.js
export default {
  // Get detailed platform info
  getPlatformInfo() {
    const info = {
      os: '',
      version: '',
      isDarkMode: false
    }
    
    #ifdef H5
    const ua = navigator.userAgent
    info.os = /Android/i.test(ua) ? 'android' : 
              /iPhone|iPad/i.test(ua) ? 'ios' : 'unknown'
    #endif
    
    #ifdef MP-WEIXIN
    const sys = wx.getSystemInfoSync()
    info.os = sys.platform
    info.version = sys.version
    info.isDarkMode = sys.theme === 'dark'
    #endif
    
    #ifdef APP-PLUS
    const os = plus.os.name.toLowerCase()
    info.os = os
    info.version = plus.os.version
    info.isDarkMode = plus.ui.getUIStyle() === 'dark'
    #endif
    
    return info
  },
  
  // Feature detection
  isSupport(feature) {
    const features = {
      bluetooth: false,
      nfc: false
    }
    
    #ifdef MP-WEIXIN
    features.bluetooth = !!wx.openBluetoothAdapter
    #endif
    
    #ifdef APP-PLUS
    features.nfc = !!plus.nfc
    #endif
    
    return features[feature] || false
  }
}

Network Request Debugging Techniques

Cross-platform network request troubleshooting methods:

1. Request interceptor example:

uni.addInterceptor('request', {
  invoke(args) {
    console.log('Request initiated:', {
      url: args.url,
      method: args.method,
      data: args.data
    })
    // Add global parameters
    args.header = {
      ...args.header,
      'X-Platform': process.env.VUE_APP_PLATFORM
    }
  },
  success(res) {
    console.log('Request successful:', res.statusCode, res.data)
  },
  fail(err) {
    console.error('Request failed:', err)
  },
  complete(res) {
    // Performance statistics
    const duration = Date.now() - res.timestamp
    console.log(`Request duration: ${duration}ms`)
  }
})

2. Offline cache debugging:

// Encapsulate cached request
async function cachedRequest(options) {
  const cacheKey = `req_${md5(options.url + JSON.stringify(options.data))}`
  
  // Read cache
  #ifdef H5
  const cache = localStorage.getItem(cacheKey)
  #else
  const cache = uni.getStorageSync(cacheKey)
  #endif
  
  if (cache && !options.forceUpdate) {
    console.log('Using cached data')
    return JSON.parse(cache)
  }
  
  const res = await uni.request(options)
  
  // Cache data
  if (res.statusCode === 200) {
    #ifdef H5
    localStorage.setItem(cacheKey, JSON.stringify(res.data))
    #else
    uni.setStorageSync(cacheKey, JSON.stringify(res.data))
    #endif
  }
  
  return res
}

Complex Interaction Issue Tracking

Gesture conflict debugging case:

// Gesture conflict solution
export default {
  data() {
    return {
      touchStartY: 0,
      isScrolling: false
    }
  },
  methods: {
    handleTouchStart(e) {
      this.touchStartY = e.touches[0].clientY
      this.isScrolling = false
    },
    handleTouchMove(e) {
      const moveY = e.touches[0].clientY
      const deltaY = moveY - this.touchStartY
      
      // Vertical swipe exceeding threshold is considered scrolling
      if (Math.abs(deltaY) > 10) {
        this.isScrolling = true
      }
      
      // Prevent horizontal swipe if scrolling
      if (this.isScrolling) {
        e.preventDefault()
      }
    },
    handleTap() {
      if (this.isScrolling) {
        console.log('Ignore click during scrolling')
        return
      }
      console.log('Handle click event')
    }
  }
}

Automated Testing Integration

Cross-platform testing solution configuration example:

// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': 'babel-jest'
  },
  testMatch: [
    '**/__tests__/**/*.spec.js'
  ],
  globals: {
    'uni': require('./uni-mock') // Mock uni object
  }
}

// uni-mock.js
module.exports = {
  request: jest.fn(() => Promise.resolve({
    statusCode: 200,
    data: {}
  })),
  showToast: jest.fn(),
  // Other API mocks...
}

// __tests__/component.spec.js
import { mount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'

describe('MyComponent', () => {
  it('Test API call', async () => {
    const wrapper = mount(MyComponent)
    await wrapper.vm.fetchData()
    expect(uni.request).toHaveBeenCalled()
  })
})

Error Monitoring System Integration

Frontend error collection implementation:

// errorHandler.js
export function initErrorTracking() {
  // Vue error capture
  Vue.config.errorHandler = (err, vm, info) => {
    trackError('VueError', {
      error: err.stack,
      component: vm.$options.name,
      lifecycle: info
    })
  }
  
  // Global error capture
  window.onerror = (msg, url, line, col, error) => {
    trackError('GlobalError', {
      message: msg,
      url,
      line,
      column: col,
      stack: error?.stack
    })
  }
  
  // Unhandled Promise rejection
  window.addEventListener('unhandledrejection', event => {
    trackError('PromiseError', {
      reason: event.reason?.stack || event.reason
    })
  })
  
  // Cross-platform API error
  uni.onError = function(error) {
    trackError('UniError', {
      type: error.type,
      message: error.message
    })
  }
}

function trackError(type, data) {
  const errorData = {
    platform: process.env.VUE_APP_PLATFORM,
    timestamp: Date.now(),
    type,
    ...data
  }
  
  // Send to monitoring system
  uni.request({
    url: 'https://error-api.example.com/log',
    method: 'POST',
    data: errorData,
    fail: () => {
      // Store locally if failed
      const errors = uni.getStorageSync('uncaughtErrors') || []
      errors.push(errorData)
      uni.setStorageSync('uncaughtErrors', errors)
    }
  })
}