微信小程序使用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下载通道