【小程序】跨页面传参通信 onfire.js

在小程序开发过程中，难免会遇到一种情况，当A页面需要用户设置数据 点击进入B页面，在B页面设置成功后返回并将设置的值传递给A页面。但是wx.navigateBack()并不支持返回传参。这种情况下就可以使用onfire.js，onfire.js 是一个很简单的事件分发的 Javascript 库（仅仅 0.9kb），简洁实用。

onfire.js下载地址

1. 将onfire.js下载下来并放置在开发项目某个目录下，例如根目录lib文件夹内。
2. 在使用页面对应的js文件中引入该文件。

代码如下：

A页面

<!--index.wxml-->
<view class="order">
  <view class="order-alert">设置您的联系方式</view>
  <view class="order-mobile" bindtap="setMobile">
      <view class="order-mobile__caption">联系方式</view>
      <view class="order-mobile__content">
          <text class="valign-mid">
              <text>{{ mobile }}</text>
          </text>
          <text class="iconfont order-mobile__content__more"></text>
      </view>
  </view>
</view>

//index.js
const onfire = require('../../lib/onfire.js')

Page({
  data: {
    mobile: ''
  },

  onLoad: function () {
    // 绑定事件，当名为EventPhoneChange的事件发生的时
    onfire.on('EventPhoneChange', e => {
      this.setData({
        mobile: e
      })
    })
  },
  // 设置手机号
  setMobile: function () {
    wx.navigateTo({
      url: '../phone/phone?mobile=' + this.data.mobile,
    })
  },
  onUnload: function () {
    // 取消事件绑定
    onfire.un("EventPhoneChange");
  }
})

B页面

<!--phone.wxml-->
<view class="phone">
    <input class="phone-input" placeholder="手机号码" bindinput="bindinput" value="{{mobile}}"></input>

    <button class="phone-setting" bindtap="tapSetting">设置</button>
</view>

// phone.js

const onfire = require('../../lib/onfire.js')

Page({

  data: {
    mobile: ''
  },
  onLoad: function (e) {
    this.setData({
      mobile: e.mobile
    })
  },
  tapSetting: function () {
    let mobile = this.data.mobile;
    if (!mobile) {
      wx.showToast({
        title: '请填写手机号！',
        icon: 'none',
        duration: 2000,
      })
      return;
    }
    // 触发名为EventPhoneChange的事件，并且携带变量mobile值。
    onfire.fire('EventPhoneChange', mobile)
    wx.navigateBack()
  },

  bindinput: function (e) {
    this.setData({
      mobile: e.detail.value.trim()
    })
  }
})

其效果图如下：

关于onfire.js的API

1.on(event_name, callback) 绑定事件，参数为event_name和callback， 当有名字为event_name的事件发生的时候，callback方法将会被执行。这个方法会返回一个eventObj，这个可以用于使用un(eventObj)方法来取消事件绑定。

2.one(event_name, callback) 绑定（订阅）事件，参数为 event_name with callback. 当被触发一次之后失效。只能被触发一次，一次之后自动失效。

3.fire(event_name, data) 触发名字为event_name的事件，并且赋予变量data为callback方法的输入值。

4.un(eventObj / eventName / function)取消事件绑定。可以仅仅取消绑定一个事件回调方法，也可以直接取消全部的事件；

5.clear() 清空所有事件。