微信小程序跨页面通信

简单业务场景,比如用户中心进入修改手机号页面,修改成功后用户中心需要立马调用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/2017/01/19/wxapp-event/

微信小程序跨页面通信相关推荐

微信小程序跨页面通信解决思路
宏观上,微信小程序是由一个个 Page 组成的.有时候我们会遇到一些业务存在耦合的 Page,一个 Page 里某个状态改变后,相关 Page 的状态需要进行更新.而在小程序里,每个 Page 都是一 ...
2021-09-15核芯物联推荐生态合作伙伴莱讯科技#蓝牙AoA微信小程序跨楼层高精度定位导航，支持ibeacon+aoa融合，完美解决ibeacon导航存在的覆盖盲区
2021-09-15核芯物联推荐生态合作伙伴莱讯科技#蓝牙AoA微信小程序跨楼层高精度定位导航,支持ibeacon+aoa融合,完美解决ibeacon导航存在的覆盖盲区核芯物联推荐生态合作伙伴莱讯科 ...
微信小程序之页面打开数量限制
微信小程序之页面打开数量限制无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页 ...
微信小程序组件间通信（二）
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序中通过事件,实现子组件向父组件中传递数据或操作注:子组件向父组件中传递通过事件传递操作通过事件参数对象det ...
微信小程序：页面传递中文出现乱码
微信小程序:页面传递中文 decodeURIComponent() 参考微信小程序页面中文传参Option获取参数乱码问题
微信小程序某个页面直接返回首页（微信小程序回退到首页）
微信小程序某个页面直接返回首页(微信小程序回退到首页) 打开小程序后,到三级页面后点击左上角的返回按钮,能够直接返回到首页正常 A -> B -> C 都是通过 wx.navigate ...
微信小程序tabar页面不触发onShow
微信小程序tabar页面不触发onShow [场景]: 开发中,原本js里面没有onShow方法,后面加上了onShow, 除了第一次页面加载调用了onShow方法,之后切换页面都没有触发. [解决办 ...
微信小程序跨域问题 post 403 Invalid CORS request 后台
微信小程序跨域问题 post 403 Invalid CORS request 后台
uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...

微信小程序跨页面通信

微信小程序跨页面通信相关推荐

最新文章

热门文章