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

36次阅读

共计 1255 个字符，预计需要花费 4 分钟才能阅读完成。

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

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

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

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

这是一个奇葩问题，网上也没找到好的方法，刚开始认为会要卡不少工夫，起初无心中发现在外层容器上加一个 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',
  ...
})