开发微信小程序时,页面间数据传送多采用URL方式传参、添加全局变量,对于在本地缓存不大实用(感觉操作缓存,应该性能会有一定的损耗吧)。而从新打开的页面回到之前的界面,貌似只有放在本地缓存、添加全局变量两种方式。后来渐渐地又发现了可以使用页面栈进行传参,但这种方式有个弊端就是多页面访问同一页面时,可能出现一些问题。最近发现了一种简便方法,既可以传参,也能用于作页面回调函数。
有一个开源的事件分发插件onfire.js,Github开源地址,这个地址下并不能找到onfire.js文件,好像是需要怎么生成的吧,没玩过。后来在BootCDN找到了一个1.0.6版本的,是在线的js源代码,直接Ctr+C之后新建一个文本放进去,将文件名字改成js文件就能使用了,如果懒得干也可以使用我上传的onfire.js。这个插件貌似能做这些事儿:
(1)简单的事件分发
(2)在 React、Vue.js、Angular 中用于跨组件的轻量级实现
(3)事件订阅和发布
API方法:
1、绑定(订阅)事件
1.1、on(event_name, callback)订阅事件,可触发多次。当有名字为event_name的事件发生时,执行callback回调函数(可以传参)。返回值为事件对象eventObj,可以用于取消事件绑定。
1.2、one(event_name, callback)绑定(订阅)事件,只能触发一次,触发之后失效。当有名字为event_name的事件发生时,执行callback回调函数(可以传参)。返回值为事件对象eventObj。
2、发布消息
2.1、fire(event_name, data)
触发事件。事件名为event_name,参数为data(可多个参数,用逗号隔开)的事件
2.2、fireSync(event_name, data)触发同步。事件名为event_name,
参数为data(可多个参数,用逗号隔开)的事件
3、取消订阅
un(event_name/eventObj
)取消事件绑定,可以取消一个绑定事件,也可取消全部。
clear()清空所有事件
开始撸代码测试一波:
首先在pages/display/index页面注册事件,需要先导入onfire.js插件(用的1.0.6版本),这东西我放在utils下面了,在顶部导入吧:
const onfire = require("../../utils/onfire1.0.6.js")
然后进入pages/test/index点击相应按钮触发事件
1、可重复触发的订阅事件
1.1、在pages/display/index注册事件
let onfireOn = onfire.on("on",function(data){
console.log("正在运行可多次执行的订阅事件....."+data)
})
1.2、需要在onUnload(页面被关闭时)注销订阅事件
onUnload: function () {
onfire.un(onfireOn)
//也可通过下面的注销
//onfire.un("on")
}
1.3、在pages/test/index页面点击相应按钮发布事件
/**
* 执行多次监听事件
*/
manyExecute(){
console.log("执行多次订阅事件")
for(let i=1; i<=3; i++){
onfire.fire("on",i)
console.log("测试是否同步事件,在订阅事件发布后显示说明是同步的;否则就异步")
}
},
1.4、测试效果如下:
2、可重复的同步订阅事件
2.1、在pages/display/index注册事件
let onfireSync = onfire.on("onsync",function(data){
console.log("正在运行可多次执行的同步订阅事件....."+data)
})
2.2、需要在onUnload(页面被关闭时)注销订阅事件
onUnload: function () {
onfire.un(onfireOn)
//也可使用下面的
//onfire.un("onsync")
}
2.3、
在pages/test/index页面点击相应按钮发布事件
/**
* 执行多次同步监听事件
*/
manySyncExecute(){
console.log("执行多次同步订阅事件")
for(let i=1; i<=3; i++){
onfire.fireSync("onsync",i)
console.log("测试是否同步事件,在订阅事件发布后显示说明是同步的;否则就异步")
}
},
2.4、测试效果如下:
3、单次订阅事件
3.1、在pages/display/index注册事件
let onfireOne = onfire.one("one",function(data){
console.log("正在运行单次执行的订阅事件....."+data)
})
3.2、需要在onUnload(页面被关闭时)注销订阅事件:和上面类似
3.3、
在pages/test/index页面点击相应按钮发布事件
/**
* 执行单次监听事件
*/
oneExecute(){
console.log("执行单次订阅事件")
for(let i=1; i<=3; i++){
onfire.fire("one",i)
console.log("测试是否同步事件,在订阅事件发布后显示说明是同步的;否则就异步")
}
},
3.4、测试效果如下:
4、多次同步订阅事件
4.1、在pages/display/index注册事件
let onfireSync = onfire.on("onsync",function(data){
console.log("正在运行可多次执行的同步订阅事件....."+data)
})
4.2、需要在onUnload(页面被关闭时)注销订阅事件:和上面类似
4.3、
在pages/test/index页面点击相应按钮发布事件
/**
* 执行单次同步监听事件
*/
oneSyncExecute(){
console.log("执行单次同步订阅事件")
for(let i=1; i<=3; i++){
onfire.fireSync("onesync",i)
console.log("测试是否同步事件,在订阅事件发布后显示说明是同步的;否则就异步")
}
},
4.4、测试效果如下:
5、使用onfire的un解绑注册事件
5.1、在pages/display/index注册一个unfire事件
let unfire = onfire.one("unfire",function(data){
console.log("执行unfire事件....."+data)
})
5.2、需要在onUnload(页面被关闭时)注销订阅事件:和上面类似
5.3、
在pages/test/index页面点击相应按钮发布事件
先触发一次unfire事件,然后用un函数解绑,再次触发unfire事件,会发现不能触发了,说明注册事件已被成功解绑
/**
* 取消绑定事件unfire
*/
unExecute(){
onfire.fire("unfire","111")
setTimeout(function(){
console.log("清除事件unfire,测试是否还能执行")
onfire.un("unfire")
},500)
setTimeout(function(){
console.log("再次执行unfire事件")
onfire.fire("unfire","000")
},1000)
},
5.4、测试效果如下:
6、使用onfire的clear清空注册事件
6.1、先触发onsync事件,然后使用clear清空注册事件,再次触发onfire事件就会发现原来的onsync事件已被解绑清除了
6.2、pages/test/index页面处罚函数如下:
/**
* 清空所有事件,测试是否能运行其他事件
*/
clearExecute(){
onfire.fireSync("onsync",100)
setTimeout(function(){
console.log("清空所有事件,测试是否能运行其他事件")
onfire.clear()
},500)
setTimeout(function(){
console.log("再次执行多次监听函数")
onfire.fireSync("onsync","000")
},1000)
}
6.3、测试效果如下:
7、onfire注册事件放到Page里面,实现跨页面传参(新进页面调用上一页面注册事件修改Data中的参数)
7.1、在pages/display/index中注册一个事件,用于在新进页面pages/test/index中回调传参,在pages/display/index的注册事件中获取数据,并修改页面数据Data中的值
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let self = this
/**
* 在Page里面注册一个事件,当下一个页面逻辑执行之后可以回调上一页面(本页面)执行一段逻辑,并可修改页面Data数据
*/
// var定义的事件是全局的注册事件
var pageOnfire = onfire.on("page",function(data){
console.log("执行pageOnfire事件....."+data)
self.setData({
data: data
})
wx.showModal({
title: '提醒',
content: '获取数据:'+data,
showCancel: false,
confirmText: '确定',
confirmColor: '#3CC51F'
})
})
},
7.2、 pages/test/index页面中传参修改上一页面pages/display/index页面Data中的值
/**
* 可在上一页面Page中注册事件,进入下一页面之后可修改上一页面Page中的数据
*/
transferExecute(){
let pageOnfire = onfire.fireSync("page","给你一个棒棒糖")
}
7.3、测试效果如下:
总结下吧:
总的来说onfire这个控件很轻量、小巧嘛,使用起来也挺简单。微信小程序想实现跨页面传参,也是很棒的一种方法。但感觉可能会使js有点乱,没见过onfire的人可能会有点懵吧,所以注释还得写清才行(当然这是我一个刚入行立志专研后台Coder的拙见)。这种事件订阅发布的插件自己用的比较少,也不是很了解,但感觉也是相当棒的,可以推荐一波。
自己写的测试Demo也上传了,需要的可以下来看看,如果不懂的话也可评论问我。