【uni-app】兼容APP与微信小程序踩坑实录

---

注：本文档基于uni-app开发APP，同时兼容微信小程序的情况编写，所述情况不完全，请多阅读并理解官方文档（uni-app官网 (dcloud.net.cn)）。

一、分包及性能优化

微信小程序是一款不需下载安装即可使用的轻量应用，因此对大小限制有要求。而APP往往功能较多，主页面加上组件、静态资源等往往会超出微信小程序要求范畴，因此需采用分包。单包要求不超过2M，主包尽量不要超过1.5M，总包不超过20M。
详见：
小程序性能优化指南 | 微信开放社区 (qq.com)

注意事项：

1. 不要在主包中预加载子包。上传时主包会包含子包大小，可能会出现超出2M的情况，导致上传失败；
2. 请在架构前端代码时进行分包。带有分包意识，尽量在开发具体功能前做好分包工作；
3. 公共组件无需书写过多。无功能交叉的组件建议放在子包中；
4. 依赖按需引入。减少vendor.js文件的大小；
5. 静态资源尽量放在服务器上；
6. 隐私条例等需要放在static文件夹下，小程序仅支持本地html文件

二、兼容

兼容微信小程序有很多写法需要注意，以下仅罗列部分我在开发过程中遇到的问题。

1. 项目中尽量使用小程序的生命周期。不要使用vue的生命周期。不然会出现各种各样的问题，比如路由传参拿不到数据，小程序页面数据无法显示等；
2. 样式问题
   开发时要经常查看微信开发者工具中的样式情况，有时候可能在h5或者APP页面中是正常的，但是在小程序中运行就不正常了。例如以下具体情况：
   （1）尽量使用class定义样式，且尽量不要使用嵌套。会出现样式不生效问题；
   （2）不支持:class="warnType?'alarm':'warn'"写法。可使用 [] 括起来；
   （3）本地图片引入，直接引用会报错，应先import或使用require()；
   （4）z-index。在使用弹窗时，微信小程序严格执行层级，若弹窗所属的父组件层级过低，弹窗不会超过父组件层级而显示在顶层，需注意。
3. 不支持动态组件
4. 不允许使用id这种特殊字符传参
5. 同一页面出现多个相同slot只会渲染第一个，建议提成组件，或不要相同命名；
6. v-if和v-else-if搭配使用，不可全部使用v-if；

三、上传发布

1. 配置服务器域名
   请提前在微信小程序平台的开发管理=>开发设置中配置服务器域名和业务域名，并确认证书是否满足要求。若域名和证书校验不通过，则无法访问接口
2. 隐私政策与安全协议
   需让用户主动去选择和阅读，不可直接勾选同意，否则审核不通过

遇到比较重要的兼容问题会更新~overover