不同平台的特性差异

跨端开发中的平台特性差异

uni-app作为跨端框架，核心挑战在于处理不同平台的特性差异。这些差异主要体现在API支持、组件表现、样式渲染、生命周期等方面。开发者必须理解这些差异才能写出真正跨平台的代码。

API兼容性差异

不同平台原生能力存在天然差异，uni-app通过条件编译和统一API层处理这些问题。例如获取系统信息：

// 统一API写法
uni.getSystemInfo({
  success: res => {
    console.log(res.platform) // 自动区分平台
  }
})

// 条件编译处理平台差异
// #ifdef MP-WEIXIN
wx.login() // 微信小程序特有API
// #endif
// #ifdef APP-PLUS
plus.device.getInfo() // App端特有API
// #endif

典型API差异包括：

• 支付接口：微信用wx.requestPayment，支付宝用my.tradePay
• 文件系统：H5用FileReader，App端用plus.io
• 蓝牙：小程序和App端API完全不同

组件表现差异

相同组件在不同平台渲染效果可能不同。以<button>组件为例：

处理方案：

<button 
  hover-class="none" 
  :style="platform === 'h5' ? 'border:none' : ''"
>
  统一按钮
</button>

样式适配问题

CSS在不同平台需要特殊处理：

1. 单位差异：

/* rpx在H5和小程序有效，App需要转换 */
.rect {
  width: 750rpx; /* 小程序占满屏幕 */
  /* #ifdef APP-PLUS */
  width: 100%;
  /* #endif */
}

2. 伪元素支持：

/* 微信小程序不支持::before */
.input {
  /* #ifndef MP-WEIXIN */
  &::placeholder {
    color: #999;
  }
  /* #endif */
}

3. Flex布局差异：

/* 在H5需要加前缀 */
.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

生命周期差异

平台特有的生命周期需要条件编译：

export default {
  // 所有平台通用
  onLaunch() {},
  
  // 小程序特有
  // #ifdef MP
  onShareAppMessage() {},
  // #endif
  
  // App特有
  // #ifdef APP-PLUS
  onBackPress() {},
  // #endif
  
  // H5特有
  // #ifdef H5
  onPageScroll() {},
  // #endif
}

导航系统差异

路由系统在各平台表现不同：

1. 小程序路由栈限制10层
2. App端支持原生动画
3. H5支持完整history API

// 统一跳转方式
uni.navigateTo({
  url: '/pages/detail',
  animationType: 'slide-in-right', // 仅App生效
  success: () => {
    // #ifdef H5
    window.addEventListener('popstate', this.handleBack)
    // #endif
  }
})

性能优化差异

各平台需要不同的优化策略：

1. 小程序需要分包加载

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

2. App端需要注意原生渲染性能

<template>
  <!-- 避免在App端使用过多view -->
  <scroll-view> <!-- 优于view滚动 -->
    <!-- 内容 -->
  </scroll-view>
</template>

3. H5需要注意首屏加载

// 使用预加载策略
// #ifdef H5
const preloadPages = ['/pages/index', '/pages/detail']
// #endif

调试技巧

针对不同平台的调试方法：

1. 小程序：

// 微信开发者工具可开启自定义预处理
const isDebug = __wxConfig.envVersion === 'develop'

2. App：

// 输出原生日志
plus.logger.log('debug info')

3. H5：

// 使用vConsole
import VConsole from 'vconsole'
new VConsole()

平台扩展机制

处理深度平台差异的方案：

1. 原生插件

// 调用原生插件
// #ifdef APP-PLUS
const module = uni.requireNativePlugin('MyModule')
// #endif

2. 条件编译组件

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

3. 平台特定文件

/components
  /button.vue       # 通用实现
  /button.mp.vue    # 小程序专用
  /button.h5.vue    # H5专用

构建配置差异

各平台构建配置示例：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 小程序需要关闭代码分割
    // #ifdef MP
    config.optimization.splitChunks(false)
    // #endif
    
    // App需要特殊处理assets
    // #ifdef APP-PLUS
    config.module.rule('assets').use('url-loader').tap(options => {
      options.limit = 8192
      return options
    })
    // #endif
  }
}

用户授权差异

权限系统在各平台实现不同：

// 统一封装权限检查
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
}

平台判断策略

运行时精确判断平台的方法：

function getPlatform() {
  // 通过UA判断H5子平台
  // #ifdef H5
  const ua = navigator.userAgent
  if (/MicroMessenger/i.test(ua)) return 'wechat'
  if (/Alipay/i.test(ua)) return 'alipay'
  // #endif
  
  // 通过uni.getSystemInfo同步获取
  const system = uni.getSystemInfoSync()
  return system.platform || 'unknown'
}

代码组织建议

推荐的项目结构处理平台差异：

src/
  ├── common/          # 完全通用代码
  ├── platform/
  │   ├── mp/          # 小程序专用
  │   ├── h5/          # H5专用
  │   └── app/         # App专用
  └── utils/
      ├── api.mp.js    # 平台API封装
      └── api.h5.js

版本迭代应对

处理平台API版本变化：

// 检查微信基础库版本
// #ifdef MP-WEIXIN
const SDKVersion = wx.getSystemInfoSync().SDKVersion
function compareVersion(v1, v2) {
  // 版本比较逻辑
}
// #endif

// App端检查原生模块
// #ifdef APP-PLUS
const hasModule = !!plus.android.importClass('com.example.Module')
// #endif

测试策略差异

各平台需要不同的测试方案：

1. 小程序：真机调试+体验版
2. App：云打包+TestFlight
3. H5：多浏览器测试

// 自动化测试示例
describe('Platform Test', () => {
  // #ifdef MP
  it('should work in miniprogram', () => {})
  // #endif
  
  // #ifdef H5
  it('should work in browser', () => {})
  // #endif
})