Differences in characteristics across platforms

Cross-Platform Development Challenges in Platform-Specific Differences

uni-app, as a cross-platform framework, faces core challenges in handling differences across platforms. These differences are primarily reflected in API support, component behavior, style rendering, lifecycles, and more. Developers must understand these variations to write truly cross-platform code.

API Compatibility Differences

Native capabilities vary across platforms, which uni-app addresses through conditional compilation and a unified API layer. For example, obtaining system information:

// Unified API approach
uni.getSystemInfo({
  success: res => {
    console.log(res.platform) // Automatically distinguishes platforms
  }
})

// Conditional compilation for platform differences
// #ifdef MP-WEIXIN
wx.login() // WeChat Mini Program-specific API
// #endif
// #ifdef APP-PLUS
plus.device.getInfo() // App-specific API
// #endif

Typical API differences include:

• Payment interfaces: WeChat uses wx.requestPayment, Alipay uses my.tradePay
• File system: H5 uses FileReader, App uses plus.io
• Bluetooth: Mini Programs and App have entirely different APIs

Component Behavior Differences

The same component may render differently across platforms. Take the <button> component as an example:

Handling approach:

<button 
  hover-class="none" 
  :style="platform === 'h5' ? 'border:none' : ''"
>
  Unified Button
</button>

Style Adaptation Issues

CSS requires special handling across platforms:

1. Unit differences:

/* rpx works in H5 and Mini Programs but needs conversion in App */
.rect {
  width: 750rpx; /* Full screen in Mini Programs */
  /* #ifdef APP-PLUS */
  width: 100%;
  /* #endif */
}

2. Pseudo-element support:

/* WeChat Mini Programs don't support ::before */
.input {
  /* #ifndef MP-WEIXIN */
  &::placeholder {
    color: #999;
  }
  /* #endif */
}

3. Flex layout differences:

/* Prefix required in H5 */
.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

Lifecycle Differences

Platform-specific lifecycles require conditional compilation:

export default {
  // Common across all platforms
  onLaunch() {},
  
  // Mini Program-specific
  // #ifdef MP
  onShareAppMessage() {},
  // #endif
  
  // App-specific
  // #ifdef APP-PLUS
  onBackPress() {},
  // #endif
  
  // H5-specific
  // #ifdef H5
  onPageScroll() {},
  // #endif
}

Navigation System Differences

Routing systems behave differently across platforms:

1. Mini Programs have a 10-layer route stack limit
2. App supports native animations
3. H5 supports full history API

// Unified navigation approach
uni.navigateTo({
  url: '/pages/detail',
  animationType: 'slide-in-right', // Only effective in App
  success: () => {
    // #ifdef H5
    window.addEventListener('popstate', this.handleBack)
    // #endif
  }
})

Performance Optimization Differences

Each platform requires different optimization strategies:

1. Mini Programs need subpackage loading

// manifest.json
"mp-weixin": {
  "optimization": {
    "subPackages": true
  }
}

2. App requires attention to native rendering performance

<template>
  <!-- Avoid excessive views in App -->
  <scroll-view> <!-- Better than view scrolling -->
    <!-- Content -->
  </scroll-view>
</template>

3. H5 requires attention to first-screen loading

// Use preloading strategy
// #ifdef H5
const preloadPages = ['/pages/index', '/pages/detail']
// #endif

Debugging Techniques

Platform-specific debugging methods:

1. Mini Programs:

// WeChat DevTools allow custom preprocessing
const isDebug = __wxConfig.envVersion === 'develop'

2. App:

// Output native logs
plus.logger.log('debug info')

3. H5:

// Use vConsole
import VConsole from 'vconsole'
new VConsole()

Platform Extension Mechanisms

Solutions for deep platform differences:

1. Native plugins

// Call native plugins
// #ifdef APP-PLUS
const module = uni.requireNativePlugin('MyModule')
// #endif

2. Conditional compilation components

<!-- components/PlatformButton.vue -->
<template>
  <!-- #ifdef MP -->
  <button open-type="share">Share</button>
  <!-- #endif -->
  <!-- #ifdef H5 -->
  <button @click="share">Share</button>
  <!-- #endif -->
</template>

3. Platform-specific files

/components
  /button.vue       # Generic implementation
  /button.mp.vue    # Mini Program-specific
  /button.h5.vue    # H5-specific

Build Configuration Differences

Example build configurations per platform:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // Mini Programs need code splitting disabled
    // #ifdef MP
    config.optimization.splitChunks(false)
    // #endif
    
    // App requires special asset handling
    // #ifdef APP-PLUS
    config.module.rule('assets').use('url-loader').tap(options => {
      options.limit = 8192
      return options
    })
    // #endif
  }
}

Authorization Differences

Permission systems vary across platforms:

// Unified permission check
async function checkPermission(type) {
  // #ifdef MP-WEIXIN
  const res = await wx.getSetting()
  return res.authSetting[`scope.${type}`]
  // #endif
  
  // #ifdef APP-PLUS
  return new Promise(resolve => {
    plus.android.requestPermissions([type], resolve)
  })
  // #endif
  
  // #ifdef H5
  return navigator.permissions.query({name: type})
  // #endif
}

Platform Detection Strategies

Runtime platform detection methods:

function getPlatform() {
  // Detect H5 sub-platforms via UA
  // #ifdef H5
  const ua = navigator.userAgent
  if (/MicroMessenger/i.test(ua)) return 'wechat'
  if (/Alipay/i.test(ua)) return 'alipay'
  // #endif
  
  // Synchronous detection via uni.getSystemInfo
  const system = uni.getSystemInfoSync()
  return system.platform || 'unknown'
}

Code Organization Suggestions

Recommended project structure for platform differences:

src/
  ├── common/          # Fully shared code
  ├── platform/
  │   ├── mp/          # Mini Program-specific
  │   ├── h5/          # H5-specific
  │   └── app/         # App-specific
  └── utils/
      ├── api.mp.js    # Platform API wrappers
      └── api.h5.js

Version Iteration Handling

Managing platform API version changes:

// Check WeChat base library version
// #ifdef MP-WEIXIN
const SDKVersion = wx.getSystemInfoSync().SDKVersion
function compareVersion(v1, v2) {
  // Version comparison logic
}
// #endif

// Check native modules in App
// #ifdef APP-PLUS
const hasModule = !!plus.android.importClass('com.example.Module')
// #endif

Testing Strategy Differences

Different testing approaches per platform:

1. Mini Programs: Real-device debugging + trial versions
2. App: Cloud packaging + TestFlight
3. H5: Multi-browser testing

// Automated testing example
describe('Platform Test', () => {
  // #ifdef MP
  it('should work in miniprogram', () => {})
  // #endif
  
  // #ifdef H5
  it('should work in browser', () => {})
  // #endif
})