微信小程序使用onfire.js（事件订阅和分发JavaScript 库）实现跨页面传参，对onfire的全面了解

开发微信小程序时，页面间数据传送多采用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也上传了，需要的可以下来看看，如果不懂的话也可评论问我。

CSDN下载通道

Github下载通道