微信小程序原生开发注意事项

Posted 2021-10-15 old_bin

最近参加了一个小程序原生开发项目，虽然有好几年没写过小程序了，但还是记得那么一点。

不过也只是记得有点印象而已，现在再写还是得再好好看看文档，所以那些坑点还是趟了不少。

既然有坑那就来吐槽，不，来记录一番吧～

布局时宽高用百分比不生效问题

这个问题，用 vw 或 vh 代替就能解决

onPullDownRefresh 下拉刷新使用

下拉刷新使用正确使用方式：

• 首先，在页面 json配置 中加上 "enablePullDownRefresh": true
• 其次，onPullDownRefresh 事件里写好请求，如下
• 再次，得调用 wx.stopPullDownRefresh() 结束这次下拉刷新请求。我能理解会有这样的场景需要自已去关闭下拉刷新动作，但你官方能不能写明白一点，什么叫 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新，可以你妹啊，不 stop 都不给我回弹了，下次也下拉刷新不了了。必须调用 stop 结束下拉动作就明确写必须 stop，大家都用中文，就不能写点人话么？？？

onPullDownRefresh: function () {
    this.request();
    wx.stopPullDownRefresh();
}

Page 里引用了 自定义组件，导致页面底部有大量空白区域

这是一个奇葩问题，网上也没找到好的办法，刚开始以为会要卡不少时间，后来无意中发现在外层容器上加一个 overflow: hidden; 能解决这个问题，amazing!
这里最好再加一个最小高度：

.wrapper {
  min-height: 100vh;
  overflow: hidden;
  padding-bottom: xxpx;
}

同级或跨多级组件与组件（或页面）之间数据通信

对于复杂的页面，比如有几个tab页需要切换，有很多自定义组件需要相互通信，在没有状态管理是很痛苦的。
官方有一个页面与页面之间通信的事件 EventChannel，这个藏的挺深的，至少我没找到，用搜索也没找到，官方API写的真是一言难尽，刚看这个API时还以为能解决我的需要，但它又没写清楚具体场景，然后网上找其他文章才发现只是页面之间的事件通信，不满足我的需求。
然后只好网上找了个简单的订阅发布管理事件改了改，发现还是挺好用的。

// app.js
App({
  addListener: function (pageName, callback) {
    if (!(\'fn\' in this)) {
      this.fn = {}
    }
    this.fn[pageName] = callback
  },
  setChangedData: function (pageName, data) {
    if (this.fn && pageName in this.fn) {
      this.fn[pageName](data)
    }
  }
})


const app = getApp()

const PageName1 = \'page1\'
const EventType1 = \'eventType1\'

// 订阅, onLoad 或者 ready 里
onLoad: onLoad: function () {
    const self = this
    app.addListener(PageName1, function (data) {
      if (data.type === EventType1) {
        self.dosomething(data)
      }
    }
}

// 发布
app.setChangedData(PageName1, {
  type: EventType1,
  data1: \'xxx\',
  data2: \'xxx\',
  ...
})

其他

• 小程序开发工具清理缓存在特殊情况下不好使，比如合了其他分支，需要删除dist再重新生成时，缓存清不掉，开发工具报错会一直提示，这时候需要重启一下开发工具了
• 官方API 看上去整洁有序，实际上想要的都不好找，直接用搜索的好，但经常搜不到想要的。
• 有自定义组件时，如果不在根目录里app.json 里把自定义组件路径加上去，真机调试时有时会通不过，但后来删掉了又没事了，不知道其他人是不是配置了啥，迷！