uniapp小程序踩坑

uniapp小程序开发常见问题及解决方案

跨平台兼容性问题 不同小程序平台（微信、支付宝、百度等）存在API差异，建议使用条件编译处理平台特异性代码。示例：

// #ifdef MP-WEIXIN
wx.login()
// #endif
// #ifdef MP-ALIPAY
my.getAuthCode()
// #endif

样式兼容处理 部分CSS属性在小程序环境不支持，例如：background简写需要拆分为background-color和background-image。推荐使用rpx替代px作为单位，确保多端尺寸适配。

页面栈限制 小程序平台通常限制页面栈层级（微信限制10层），需优化导航逻辑。避免连续使用uni.navigateTo，可改用uni.redirectTo清除当前页面栈。

图片路径问题 动态绑定的图片路径需使用绝对路径或base64。网络图片需添加域名白名单，本地图片建议放在static目录下。

表单组件差异 picker组件在不同平台表现不一致，微信支持多列选择器但支付宝不支持。可封装统一组件或使用第三方插件库如uview-ui处理兼容性。

生命周期注意事项 小程序端onLoad比onShow先触发，H5端相反。页面传参应在onLoad中接收，数据刷新建议放在onShow。

分包加载优化 主包大小超过2MB会导致无法预览，合理使用分包：

{
  "subPackages": [{
    "root": "subpackage",
    "pages": ["pages/sub/index"]
  }]
}

自定义组件通信 父子组件通信推荐使用$emit触发事件，跨组件通信可使用uni.$on/uni.$emit。注意及时销毁事件监听防止内存泄漏。

性能优化建议 减少setData调用频率，大数据拆分传输。列表渲染使用virtual-list优化长列表性能，避免在模板中使用复杂逻辑计算。

调试技巧 真机调试时开启vConsole，使用uni.getSystemInfoSync()获取运行环境信息。生产环境务必关闭调试模式和console日志输出。