前端uniapp兼容
uniapp兼容性处理方案
uniapp作为跨平台开发框架，需针对不同端（H5、小程序、App）进行兼容性处理。以下为常见场景的解决方案：
平台条件编译 通过条件编译实现不同平台代码逻辑：
// #ifdef H5
console.log('仅在H5平台执行');
// #endif
// #ifdef MP-WEIXIN
console.log('仅微信小程序平台执行');
// #endifCSS兼容处理 使用uniapp特有样式单位rpx解决尺寸适配：
.container {
width: 750rpx; /* 小程序中750rpx=100%宽度 */
margin: 20rpx auto;
}API差异处理 封装通用API调用方法：
function navigateTo(url) {
// #ifdef H5
window.location.href = url;
// #endif
// #ifdef MP-WEIXIN
wx.navigateTo({ url });
// #endif
// #ifdef APP-PLUS
uni.navigateTo({ url });
// #endif
}组件库选择 推荐使用uni-ui等官方组件库：
- 内置跨平台兼容处理
- 自动适配各平台UI规范
- 提供统一API接口
调试技巧 使用chrome浏览器调试H5端：
# 启动调试
npm run dev:h5构建配置优化 在manifest.json中配置平台差异：
{
"h5": {
"router": {
"mode": "history"
}
},
"mp-weixin": {
"appid": "your-wechat-appid"
}
}常见兼容问题解决
图片路径问题 使用绝对路径或base64：
<image src="/static/logo.png"></image>本地存储差异 统一使用uni API：
uni.setStorageSync('key', 'value');
const data = uni.getStorageSync('key');生命周期差异 注意各平台生命周期差异：
- App端支持plusready
- 小程序使用onLoad/onShow
- H5支持DOMContentLoaded
字体图标处理 推荐方案：
- 使用unicode方式引入
- 通过条件编译加载平台特定样式
- 避免使用本地字体文件
第三方库兼容 选择时注意：
- 是否支持ES6模块化
- 是否有平台限制
- 体积是否过大影响性能
性能优化建议
渲染优化 避免频繁setData，使用虚拟列表：
<uni-list v-for="item in list" :key="item.id"></uni-list>包体积控制 通过分包加载：
{
"optimization": {
"subPackages": true
}
}异步加载组件 动态导入减少首屏负载：
components: {
'heavy-component': () => import('@/components/heavy.vue')
}图片优化 使用CDN地址并压缩：
<image src="https://cdn.example.com/pic.jpg" mode="widthFix"></image>通过以上方法可有效解决uniapp多端兼容问题，建议开发时使用真机调试及早发现问题。定期检查uniapp官方更新日志获取最新兼容性改进。
