uniapp小程序踩坑
uniapp小程序开发常见问题与解决方案
跨端兼容性问题 不同平台的小程序存在API差异,例如微信小程序与支付宝小程序的API命名不同。使用条件编译解决平台差异:
// #ifdef MP-WEIXIN
wx.request()
// #endif
// #ifdef MP-ALIPAY
my.request()
// #endif
样式兼容问题
部分CSS属性在小程序端不支持,例如position: fixed在部分平台表现异常。建议使用Flex布局替代,并通过uni.upx2px()处理单位转换。
路由跳转限制
小程序页面栈有层级限制(微信默认10层),超过会跳转失败。使用uni.reLaunch重置页面栈,或通过getCurrentPages()管理页面栈深度。
图片路径问题 网络图片需配置download域名白名单,本地图片建议使用绝对路径。动态绑定图片时需使用require:
imageSrc: require('@/static/logo.png')
生命周期差异
小程序没有完整的Vue生命周期,onLoad替代created。App.vue的onLaunch与页面的onLoad执行顺序需特别注意。

自定义组件问题
组件样式默认不隔离,需设置options: { styleIsolation: 'shared' }。组件通信推荐使用uni.$emit和uni.$on进行全局事件管理。
性能优化要点
避免在onShow中执行耗时操作,长列表使用<scroll-view>替代原生滚动。图片资源压缩到100KB以下,使用雪碧图减少请求次数。
真机调试问题
真机与模拟器表现可能不一致,特别是扫码功能和摄像头调用。开发阶段开启调试模式,使用vConsole查看日志。

分包加载策略
主包大小需控制在2MB内,超过部分使用分包。配置subPackages时注意路径不能相互包含,静态资源需放在对应分包目录下。
第三方库兼容性 部分npm库可能不兼容小程序环境,优先选择uniapp插件市场的组件。使用第三方UI库时需检查是否支持条件编译。
本地存储限制
uni.setStorageSync单条数据限制为1MB,建议关键数据加密存储。频繁读写数据应考虑使用globalData临时存储。
更新机制处理
热更新需遵循小程序平台规范,微信需配置updateManager,App端可使用plus.runtime.getProperty获取版本信息。






