小程序跨面通信

1 场景

场景A

有三个页面,A,B,C, A是一个类似管理数据的列表页面 页面B,C通过A跳转进来的

A->B 在页面B中做新增/修改动作,修改成功后,需要返回A时,需要刷新为最新的数据
A->C 同上,只是类型不同

以上可以通过onShow中完成

场景B

页面M,N, M是一个表单项,有多个不同的字段,其中有的条目可以根据情况,可以跳转到修改页面,修改成功后,返回页面M,需要刷新条目为最新值

M->N 在N中修改,刷新M对应的值

这时,使用onShow就不太适合,一个要是会冲掉之前的已填写的其它值,而是消耗比较大,这时就需要广播的方式通知上一个页面更新数据

原理

原理是通过广播的方式,发出通知,监听的页面做对应的响应 可以借助事件公共bus 小程序一般在app.js中注入bus实例,在page中的onLoad中添加监听器,在onUnload中移除监听器,注意,添加和移除时的回调函数一定要是同一个,如果都没有,就传递null

下载

raw.githubusercontent.com/krasimir/Ev…

使用

1 注册到app.js中

在App.js中引入

const EventBus = require('./libs/eventBus/eventBus.js')

绑定到全局变量上

globalData: {
  EventBus
},

2 页面中

页面A

• 导入EventBus
• onLoad中注册监听和回调函数
• onUnload中移除监听
• 编写对应的回调函数

const app = getApp()
const EventBus = app.globalData.EventBus;

Page({
  onLoad() {
    // 注册监听
    EventBus.addEventListener('updateRemark', this.updateRemarkCb, this)
  },

  onUnload() {
    // 移除监听
    EventBus.removeEventListener('updateRemark', this.updateRemarkCb, this)
  },

  // 定义收到通知的回调函数
  updateRemarkCb(event, params) {
    const { remark } = params
    this.setData({
      remark: remark
    })
  }
  // ....
})

页面B

• 导入EventBus
• 通过EventBus.dispatch发出通知

const app = getApp()
const EventBus = app.globalData.EventBus;

Page({
  save() {
    const { remark } = this.data
    // 发出通知,通知updateRemark事件, 呼叫者null, 传递的数据为{ remark }
    EventBus.dispatch('updateRemark', null, { remark })
    wx.navigateBack({
      detal: 1
    })
  }
})