uniapp打包兼容性
打包兼容性问题概述
UniApp打包时可能遇到不同平台的兼容性问题，例如H5、小程序、iOS、Android等平台的差异。常见问题包括样式适配、API支持、原生插件兼容性等。
跨平台样式适配
使用Flex布局或百分比布局替代固定尺寸，确保在不同屏幕尺寸下正常显示。通过uni.upx2px()将设计稿尺寸转换为适配单位。避免使用平台特有CSS属性，如-webkit-box。
.container {
display: flex;
width: 100%;
padding: 20rpx; /* 使用rpx单位 */
}条件编译处理平台差异
通过条件编译区分不同平台的代码逻辑。例如，小程序不支持window对象，需使用uni.getSystemInfoSync()替代。
// #ifdef H5
console.log(window.innerWidth);
// #endif
// #ifdef MP-WEIXIN
const systemInfo = uni.getSystemInfoSync();
console.log(systemInfo.windowWidth);
// #endif原生插件兼容性检查
使用原生插件时，需确认插件是否支持目标平台。在manifest.json中声明插件依赖，并通过uni.requireNativePlugin()动态加载。
// manifest.json示例
"app-plus": {
"plugins": {
"examplePlugin": {
"version": "1.0.0",
"provider": "插件ID"
}
}
}API兼容性处理
部分API在不同平台表现不同。例如，H5的localStorage在小程序中需使用uni.setStorageSync。通过uni.canIUse()检测API支持情况。
if (uni.canIUse('getSystemInfoSync')) {
const res = uni.getSystemInfoSync();
}打包配置优化
在manifest.json中配置平台特有参数。例如，Android需设置minSdkVersion，iOS需配置UIWebView替代方案。
"app-plus": {
"android": {
"minSdkVersion": 21
},
"ios": {
"useWKWebView": true
}
}测试与调试建议
使用真机测试各平台表现，利用uni.getSystemInfo()获取运行环境信息。通过Chrome开发者工具调试H5，微信开发者工具调试小程序。
uni.getSystemInfo({
success: (res) => {
console.log(res.platform);
}
});性能优化
减少全局组件使用，避免过多v-if动态渲染。使用分包加载降低主包体积，提升启动速度。
// manifest.json分包配置
"subPackages": [
{
"root": "subpackage",
"pages": [
"pageA",
"pageB"
]
}
]
