乐趣区

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

jiezi

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

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

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

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

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

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 里把自定义组件门路加上去，真机调试时有时会通不过，但起初删掉了又没事了，不晓得其他人是不是配置了啥，迷！
退出移动版