微信小程序,响应式监听全局函数

最新推荐文章于 2024-08-19 16:06:56 发布

原创最新推荐文章于 2024-08-19 16:06:56 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在项目中创建和使用自定义事件系统。通过在utils目录下新建event.js文件，实现了一个简单的Event类，支持事件的监听、触发和移除。在app.js等文件中导入并实例化Event类，即可实现跨组件或页面间的数据通信。

在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是自定义的事件,{}是发射的参数

四, 使用

onShow: function () {
//监听app.js发射的change事件,页面卸载的时候要停止监听event.off
wx.event.on(‘change’, function () {
that.setData({
messageNum: App.globalData.messageNum
})
})
},
五, 销毁监听
最好在页面销毁的时候停止监听,这样子可以节约性能,要不然就一直监听
// 生命周期函数–监听页面卸载
onUnload: function () {
//你监听的页面
wx.event.off(‘change’)
},