微信小程序开发中的小技巧

背景

在小程序开发中，经常会遇到很多奇怪的 bug，需要耗费不少的时间和精力来解决，所以在此处做一个记录，后续会不断补充。

阻止事件冒泡

1. 对于一般的子元素的触发事件使用 catchtap 方法即可

2. 对于 input、video、[openType]类型的 button，我们可以同样在标签中添加 catchtap 方法，其中 catchtap 对应的方法内容为空即可，如下

   <button open-type="share" catchtap="xxx"></button>
   
   xxx(){
   
   }

转发时多选好友

onLoad: function() {
    wx.showShareMenu({
        withShareTicket: false, // 属性值为false时，开启好友分享多选功能
        menus: ['shareAppMessage', 'shareTimeline'] // 调用微信好友分享，朋友圈分享（朋友圈分享功能ios暂不支持 2021.02.04）
    });
}

setData 的使用事项

1. 因为涉及到小程序渲染层与逻辑层的数据交互，所以 setData 是一个异步的过程;
2. 直接修改 Page 实例的 this.data 是无法改变页面状态的;
3. 如果不需要改变渲染层数据，减少使用 setData;
4. 由于 setData 是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过 1024kB;
5. setData 的第二个参数是一个 callback 回调，在此次 setData 对界面渲染完毕后触发;

   Page({
       onLoad: function () {
           this.setData(
               {
                   text: "change text",
               },
               function () {
                   // setData对界面渲染完毕后触发
               }
           );
       },
   });

小程序页面栈最大层级为 10 层

在类似于 列表 -> 详情 业务开发中我们需要注意，在每次 wx.navigateTo()时，getCurrentPages()判断页面栈层级数，如果到达 10 层无法新增时，使用 wx.redirecTo()进行页面跳转。（将当前页面推出页面栈）

小程序向上一页面传递数据

在业务开发中，我们会遇到 A -> B -> A 页面回跳且需要带参数的情况，对于这种需求，我们如何来满足呢？

1. 在 B 页面调用后端接口，在 A 页面 onShow 方法中获取数据;

2. 使用 globalData 全局参数。在 B 页面赋值，A 页面取值;

3. 使用缓存 api wx.setStorageSync() wx.getStorageSync()。在 By 页面 set，A 页面 get;

4. 使用 getCurrentPages()获取小程序页面栈，并执行 setData({})

   let pages = getCurrentPages(); // 获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。
   let prevPage = pages[ pages.length - 2 ];  // 获取上一页面Page() 实例
   prevPage.setData({
       ...
   },
       wx.navigateBack({
           delta: 1  // 返回上一级页面。
       })
   )