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

前言

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

避坑

• 坑一：开发工具配置
  （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，需要在源码相应的页面手动引入组件文件

别人避坑指南，请往这边走👉

补充
1.获取openid和用户头像信息
2.上班打卡，判断坐标距离（wx.getLocation/wx.startLocationUpdate）