概要
微信小程序的globalData是可以存放全局变量,但是不是响应式,所以要用一个文件来监听
一, 响应式文件
- 在utils下新建一个文件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], args
if (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, ctx) {
this._stores = this._stores || {}
// all
if (!arguments.length) {
this._stores = {}
return
}
// specific event
var store = this._stores[event]
if (!store) return
// remove all handlers
if (arguments.length === 1) {
delete this._stores[event]
return
}
// remove specific handler
var cb
for (var i = 0, len = store.length; i < len; i++) {
cb = store[i].cb
if (store[i].ctx === ctx) {
store.splice(i, 1)
break
}
}
return
}
}
module.exports = {
Event
}
二,导入
- 在你需要的文件里导入(例如:在app.js文件导入)
import {Event} from '/utils/events.js'
三,实例化和发射事件
onShow: function() {
//实例化
wx.event = new Event()
//发射事件给消息页面监听
wx.event.emit('change', {}) //change是自定义的事件,{}是发射的参数
},
wx.event.emit('change', {}) //change是自定义的事件,{}是发射的参数
四, 使用
//在要监听的页面使用wx.event
onShow: function () {
//监听app.js发射的change事件,页面卸载的时候要停止监听event.off
wx.event.on('change', function () {
that.setData({
messageNum: App.globalData.messageNum
})
})
},
事件"change"对应的是emit发射的"change"
五, 销毁监听
- 最好在页面销毁的时候停止监听,这样子可以节约性能,要不然就一直监听
// 生命周期函数--监听页面卸载
onUnload: function () {
//你监听的页面
wx.event.off('change')
},
动动手指点赞
如果这篇文章对你有用,请给我点个赞,让我更加有动力写下去,谢谢
