微信小程序实现页面间跨页面通信

wx-bus实现小程序跨页面通信

为什么要有wx-bus?

一个熟悉的业务流程：page A跳转到到page B,page B修改数据后,page A需要同步刷新。有三个解决方案：

• 返回page A时重新请求数据。如果A是个列表，刷新会重新回到顶部，并且如果网络不好，也会影响用户体验。
• 在page B获取到page A实例对象，在该对象上直接修改数据(getCurrentPages方法)。这样做会导致页面耦合。

//pageB.js
//...
var pages = getCurrentPages();
//获取到pageA实例  
var prevPage = pages[pages.length - 2];//当前页面的上一个页面

prevPage.setData({

 oldData: 'new data'

})
复制代码

• 全局bus

实现wx-bus

创建一个bus对象缓存事件和事件到处理函数

let bus = {};
复制代码

添加一个事件

function on(key, func) {
 if(!bus[key]){
   bus[key] = [func];
 }else{
   bus[key].push(func)
 }
}
复制代码

触发一个事件

function emit(key, params) {
  if(!bus[key]) return;
  for(let v of bus[key]){
    v(params)
  }
}
复制代码

移除一个事件

function off(key) {
  bus[key] && delete bus[key];
}
复制代码

使用wx-bus

//pageA.js

//引入bus.js
const bus = requier('bus.js');
//...
//在onLoad中绑定'testEvent'事件
onLoad: function () {
 bus.on('testEvent',(params) => {
  //...
 })
},
//...
复制代码

//pageB.js

const bus = requier('bus.js');
//...
//触发'testEvent'事件
toEmitEvent: function () {
 let params = 'new data'
 bus.emit('testEvent', params)
},
//解绑'testEvent'事件
toOffEvent: function () {
 bus.off('testEvent')
},
//...
复制代码

详见 github.com/huanghaodon…

注意！如果on方法里的回调函数用到this,则回调必须为箭头函数

bus.on('test',() => {
 //用到this,必须为箭头函数
})
复制代码

bus.js 的完整源代码和Demo详见 github.com/huanghaodon…

转载于:https://juejin.im/post/5bf791daf265da612b133fa1