那些年我们在微信小程序遇到的坑

前言

本篇主要记录一下我在开发中遇到的小程序的坑，还有实现的功能。

避坑

坑一：开发工具配置
（1）控制台如果报proxy代理相关错误，先检查左上角菜单栏中设置>代理设置>使用系统代理
（2）开发环境，我们经常在右侧菜单中详情>本地设置>选中不校验域名等，注意在体验版和正式版中，都需要在微信公众平台配置相应域名，否则接口访问不了，webview无法打开
（3）提前完善小程序信息，尤其是服务类目，涉及到一些小程序api的权限，比如使用获取当前位置的方法wx.getLocation，需要设置小程序服务类目为生活服务等
坑二：page路径找不到
app.json里pages数组中路径具有顺序，主要是第一个路径比较关键，默认访问第一个路径。配置tabBar时，list参数中的pagePath参数至少需要包含第一个路径，否则会导致tabBar不显示。
坑三：不能通过行内样式设置背景图
微信小程序background-image不能直接指定本地图片，解决办法①使用网络图片②使用base64编码③使用image，设置src属性。
坑四：webview不能自定义nabbar
webview页面想要返回指定页面，使用小程序开放给web view的方法wx.miniProgram.navigateTo跳转。
坑五：状态监听
参考vue监听原理使用Object.defineProperty()，来手动劫持对象的getter/setter，从而实现给对象赋值时(调用setter)，执行watch对象中相对应的函数，达到监听效果。以下是一个简易版的watcher，进阶版的watcher👉

//watcher.js
export function setWatch(data, watch) {Object.keys(watch).forEach(item => {observer(data, item, watch[item]);})
};
//监听属性，并执行监听函数
function observer(data, item, callback) {let val = data[`${item}`];Object.defineProperty(data, item, {get() {return val;},set(value) {callback(value, val);}})
};

//index.js
Page({data: {name: 'xxx',},onLoad(options) {setWatch(this.data, this.watch);},watch: {name(value) {console.log(value + 1111); //打印张三1111}},changeData() {// app.globalData.openId = '1111111';this.setData({name: '张三'})},
})

坑六：webview缓存问题（参考）

问题一：入口html页面被缓存
（1）H5url后添加时间戳（hash无效,history有效）,url后面加时间戳这个，苹果机是可以实时解决缓存的，然而安卓机不行，包管理工具配置打包文件名，如：vite配置rollup
（2）服务器配置页面不缓存（有效但不建议）
在这里插入图片描述
（3）H5添加不缓存配置

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

问题二：页面引入的静态资源被缓存
（1）静态资源版本号（有效）
（2）微信自己清除本地缓存api，wx.clearStorage()

  onShow() {wx.clearStorage();this.onLoad();}

坑七：在微信内部浏览器的 H5 跳转小程序打开手机内置地图
（1）先给H5获得跳转小程序能力（wx.config）
（2）再配置api权限，这里使用打开地图的方法（wx.openLocation）
坑八：生成二维码，传参中文
有字符和数量限制（最大32个可见字符，只支持数字，大小写英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~，其它字符请自行编码为合法字符（因不支持%，中文无法使用 urlencode 处理，请使用其他编码方式）
（1）utf-8只适合少量中文转码
（2）做个中文和英文的对照表，放弃传中文
坑九：uniapp使用原生组件
（1）usingComponents里自定义组件名用短线-区分关键词，因为在项目打包之后会自动把驼峰转为短线连接，如：mapNav变成map-nav

（2）运行uniapp 生成微信小程序源码（mp-weixin），注意该源码里没有wxcomponents，需要在源码相应的页面手动引入组件文件