404 lines
7.8 KiB
Markdown
404 lines
7.8 KiB
Markdown
|
||
|
||
|
||
# 多端适配方案
|
||
|
||
## 一、平台差异处理
|
||
|
||
### 1.1 条件编译
|
||
使用 UniApp 的条件编译处理不同平台的差异：
|
||
|
||
```javascript
|
||
// #ifdef MP-WEIXIN
|
||
// 微信小程序特有代码
|
||
wx.login()
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
// H5特有代码
|
||
window.location.href = '/login'
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
// App特有代码
|
||
plus.runtime.restart()
|
||
// #endif
|
||
```
|
||
|
||
### 1.2 平台判断工具
|
||
使用封装的平台判断工具：
|
||
|
||
```javascript
|
||
import { getPlatform, isMiniProgram, isH5, isApp } from '@/utils/platform'
|
||
|
||
if (isMiniProgram()) {
|
||
// 小程序端逻辑
|
||
} else if (isH5()) {
|
||
// H5端逻辑
|
||
} else if (isApp()) {
|
||
// App端逻辑
|
||
}
|
||
```
|
||
|
||
## 二、API 适配
|
||
|
||
### 2.1 统一 API 封装
|
||
对不同平台的 API 进行统一封装：
|
||
|
||
```javascript
|
||
// 跨端导航
|
||
export const navigateTo = (url, params = {}) => {
|
||
const query = Object.keys(params)
|
||
.map(key => `${key}=${encodeURIComponent(params[key])}`)
|
||
.join('&')
|
||
const fullUrl = query ? `${url}?${query}` : url
|
||
|
||
uni.navigateTo({ url: fullUrl })
|
||
}
|
||
|
||
// 跨端存储
|
||
export const setStorage = (key, value) => {
|
||
// #ifdef MP-WEIXIN
|
||
wx.setStorageSync(key, value)
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
localStorage.setItem(key, JSON.stringify(value))
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
plus.storage.setItem(key, JSON.stringify(value))
|
||
// #endif
|
||
}
|
||
```
|
||
|
||
### 2.2 第三方登录适配
|
||
不同平台的第三方登录实现：
|
||
|
||
```javascript
|
||
// 微信登录
|
||
export const wechatLogin = () => {
|
||
return new Promise((resolve, reject) => {
|
||
// #ifdef MP-WEIXIN
|
||
wx.login({
|
||
success: (res) => {
|
||
resolve(res.code)
|
||
},
|
||
fail: reject
|
||
})
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
// H5微信授权登录
|
||
const appId = 'YOUR_APP_ID'
|
||
const redirectUri = encodeURIComponent(window.location.href)
|
||
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo#wechat_redirect`
|
||
// #endif
|
||
})
|
||
}
|
||
```
|
||
|
||
## 三、样式适配
|
||
|
||
### 3.1 尺寸单位适配
|
||
- **小程序端**：使用 `rpx`（750rpx = 屏幕宽度）
|
||
- **H5端**：使用 `rem` 或 `vw`
|
||
- **App端**：使用 `rpx` 或 `upx`
|
||
|
||
```scss
|
||
// 统一使用 rpx，UniApp 会自动转换
|
||
.container {
|
||
width: 750rpx;
|
||
padding: 30rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
```
|
||
|
||
### 3.2 安全区域适配
|
||
处理刘海屏、底部安全区域：
|
||
|
||
```scss
|
||
.page {
|
||
// 顶部安全区域
|
||
padding-top: constant(safe-area-inset-top);
|
||
padding-top: env(safe-area-inset-top);
|
||
|
||
// 底部安全区域
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
```
|
||
|
||
### 3.3 状态栏高度适配
|
||
```javascript
|
||
// 获取状态栏高度
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
const statusBarHeight = systemInfo.statusBarHeight
|
||
|
||
// 在样式中使用
|
||
const navBarHeight = statusBarHeight + 44 // 44为导航栏高度
|
||
```
|
||
|
||
## 四、功能适配
|
||
|
||
### 4.1 分享功能
|
||
```javascript
|
||
// 小程序分享
|
||
// #ifdef MP-WEIXIN
|
||
onShareAppMessage() {
|
||
return {
|
||
title: '分享标题',
|
||
path: '/pages/index/index',
|
||
imageUrl: '/static/share.png'
|
||
}
|
||
}
|
||
// #endif
|
||
|
||
// H5分享
|
||
// #ifdef H5
|
||
const shareToWechat = () => {
|
||
// 调用微信 JS-SDK
|
||
wx.updateAppMessageShareData({
|
||
title: '分享标题',
|
||
desc: '分享描述',
|
||
link: window.location.href,
|
||
imgUrl: 'https://example.com/share.png'
|
||
})
|
||
}
|
||
// #endif
|
||
```
|
||
|
||
### 4.2 支付功能
|
||
```javascript
|
||
// 统一支付接口
|
||
export const pay = (orderInfo) => {
|
||
return new Promise((resolve, reject) => {
|
||
// #ifdef MP-WEIXIN
|
||
wx.requestPayment({
|
||
timeStamp: orderInfo.timeStamp,
|
||
nonceStr: orderInfo.nonceStr,
|
||
package: orderInfo.package,
|
||
signType: 'MD5',
|
||
paySign: orderInfo.paySign,
|
||
success: resolve,
|
||
fail: reject
|
||
})
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
// H5微信支付
|
||
WeixinJSBridge.invoke('getBrandWCPayRequest', orderInfo, (res) => {
|
||
if (res.err_msg === 'get_brand_wcpay_request:ok') {
|
||
resolve(res)
|
||
} else {
|
||
reject(res)
|
||
}
|
||
})
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
// App支付
|
||
plus.payment.request('wxpay', orderInfo, resolve, reject)
|
||
// #endif
|
||
})
|
||
}
|
||
```
|
||
|
||
### 4.3 定位功能
|
||
```javascript
|
||
// 获取位置
|
||
export const getLocation = () => {
|
||
return new Promise((resolve, reject) => {
|
||
uni.getLocation({
|
||
type: 'gcj02',
|
||
success: (res) => {
|
||
resolve({
|
||
latitude: res.latitude,
|
||
longitude: res.longitude
|
||
})
|
||
},
|
||
fail: (err) => {
|
||
// #ifdef H5
|
||
// H5使用浏览器定位API
|
||
if (navigator.geolocation) {
|
||
navigator.geolocation.getCurrentPosition(
|
||
(position) => {
|
||
resolve({
|
||
latitude: position.coords.latitude,
|
||
longitude: position.coords.longitude
|
||
})
|
||
},
|
||
reject
|
||
)
|
||
} else {
|
||
reject(new Error('浏览器不支持定位'))
|
||
}
|
||
// #endif
|
||
|
||
// #ifndef H5
|
||
reject(err)
|
||
// #endif
|
||
}
|
||
})
|
||
})
|
||
}
|
||
```
|
||
|
||
## 五、性能适配
|
||
|
||
### 5.1 小程序分包
|
||
```json
|
||
{
|
||
"pages": [
|
||
"pages/index/index",
|
||
"pages/user/index"
|
||
],
|
||
"subPackages": [
|
||
{
|
||
"root": "subPackages/order",
|
||
"pages": [
|
||
"list/index",
|
||
"detail/index"
|
||
]
|
||
},
|
||
{
|
||
"root": "subPackages/product",
|
||
"pages": [
|
||
"list/index",
|
||
"detail/index"
|
||
]
|
||
}
|
||
],
|
||
"preloadRule": {
|
||
"pages/index/index": {
|
||
"network": "all",
|
||
"packages": ["subPackages/order"]
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 5.2 图片懒加载
|
||
```vue
|
||
<template>
|
||
<!-- 小程序端使用 lazy-load -->
|
||
<image
|
||
:src="imageSrc"
|
||
lazy-load
|
||
mode="aspectFill"
|
||
/>
|
||
|
||
<!-- H5端使用 Intersection Observer -->
|
||
<img
|
||
v-lazy="imageSrc"
|
||
alt="图片"
|
||
/>
|
||
</template>
|
||
```
|
||
|
||
### 5.3 长列表优化
|
||
```vue
|
||
<template>
|
||
<!-- 使用虚拟列表 -->
|
||
<recycle-list :list="dataList">
|
||
<template v-slot="{ item }">
|
||
<view class="list-item">
|
||
{{ item.title }}
|
||
</view>
|
||
</template>
|
||
</recycle-list>
|
||
</template>
|
||
```
|
||
|
||
## 六、兼容性处理
|
||
|
||
### 6.1 API 兼容性检查
|
||
```javascript
|
||
// 检查API是否支持
|
||
if (uni.canIUse('getSystemInfoSync')) {
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
}
|
||
|
||
// 版本号比较
|
||
const compareVersion = (v1, v2) => {
|
||
const arr1 = v1.split('.')
|
||
const arr2 = v2.split('.')
|
||
const len = Math.max(arr1.length, arr2.length)
|
||
|
||
for (let i = 0; i < len; i++) {
|
||
const num1 = parseInt(arr1[i] || 0)
|
||
const num2 = parseInt(arr2[i] || 0)
|
||
|
||
if (num1 > num2) return 1
|
||
if (num1 < num2) return -1
|
||
}
|
||
|
||
return 0
|
||
}
|
||
|
||
// 使用示例
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
if (compareVersion(systemInfo.SDKVersion, '2.10.0') >= 0) {
|
||
// 支持新API
|
||
}
|
||
```
|
||
|
||
### 6.2 样式兼容性
|
||
```scss
|
||
// 使用 CSS 变量实现主题切换
|
||
:root {
|
||
--primary-color: #1890ff;
|
||
--text-color: #333;
|
||
}
|
||
|
||
.button {
|
||
background-color: var(--primary-color);
|
||
color: var(--text-color);
|
||
}
|
||
|
||
// 使用 autoprefixer 自动添加前缀
|
||
.flex-container {
|
||
display: flex;
|
||
// 自动添加 -webkit-flex
|
||
}
|
||
```
|
||
|
||
## 七、调试技巧
|
||
|
||
### 7.1 多端调试
|
||
- **微信小程序**：使用微信开发者工具
|
||
- **H5**：使用浏览器开发者工具
|
||
- **App**：使用 HBuilderX 真机调试
|
||
|
||
### 7.2 日志输出
|
||
```javascript
|
||
// 开发环境输出日志
|
||
if (process.env.NODE_ENV === 'development') {
|
||
console.log('调试信息:', data)
|
||
}
|
||
|
||
// 使用条件编译输出平台信息
|
||
// #ifdef MP-WEIXIN
|
||
console.log('当前平台：微信小程序')
|
||
// #endif
|
||
```
|
||
|
||
### 7.3 错误监控
|
||
```javascript
|
||
// 全局错误捕获
|
||
uni.onError((error) => {
|
||
console.error('全局错误:', error)
|
||
// 上报到错误监控平台
|
||
})
|
||
|
||
// 网络错误监控
|
||
uni.onNetworkStatusChange((res) => {
|
||
if (!res.isConnected) {
|
||
uni.showToast({
|
||
title: '网络已断开',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
```
|