简单业务场景,比如用户中心进入修改手机号页面,修改成功后用户中心需要立马调用setData来修改显示数据,最优的方法是使用发布/订阅模式
创建Event类,event.js
class Event {on (event, fn, ctx) {if (typeof fn != "function") {console.error('fn must be a function')return}this._stores = this._stores || {};(this._stores[event] = this._stores[event] || []).push({cb: fn, ctx: ctx})}emit (event) {this._stores = this._stores || {}var store = this._stores[event], argsif (store) {store = store.slice(0)args = [].slice.call(arguments, 1)for (var i = 0, len = store.length; i < len; i++) {store[i].cb.apply(store[i].ctx, args)}}}off (event, fn) {this._stores = this._stores || {}// allif (!arguments.length) {this._stores = {}return}// specific eventvar store = this._stores[event]if (!store) return// remove all handlersif (arguments.length === 1) {delete this._stores[event]return }// remove specific handlervar cbfor (var i = 0, len = store.length; i < len; i++) {cb = store[i].cbif (cb === fn) {store.splice(i, 1)break}}return} }module.exports = Event
app.js引入event.js,确保每个page都能调用
const Event = require('./utils/event.js')App({event: new Event(),...
发布消息页面 (修改手机号页面)
let app = getApp();Page({formSubmit: function(e) {//发布修改手机号事件app.event.emit('eventUpdateMobile', mobile);}})
订阅消息页面 (个人中心)
let app = getApp();Page({onLoad: function (options) {//订阅消息app.event.on('eventUpdateMobile', this.eventUpdateMobile, this)},eventUpdateMobile(mobile) {this.setData({"mobile": mobile})},/*** 生命周期函数--监听页面卸载*/onUnload: function () {//必须注销掉之前订阅的事件app.event.off('eventUpdateMobile')},})
参考:https://aotu.io/notes//01/19/wxapp-event/
