[Small program] cross-page communication onfire.js

In the process of small program development, it is inevitable to encounter a situation. When page A requires the user to set data and click to enter page B, after the setting of page B is successful, it will return and pass the set value to page A. But wx.navigateBack() does not support returning parameters. In this case, you can use onfire.js, onfire.js is a very simple Javascript library for event distribution (only 0.9kb), concise and practical.

onfire.js download address

1. Download onfire.js and place it in a certain directory of the development project, such as the lib folder in the root directory.
2. Introduce this file in the js file corresponding to the usage page.

code show as below:

A page

<!--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");
  }
})

Page 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()
    })
  }
})

The effect diagram is as follows:

About the API of onfire.js

1. on(event_name, callback) binds the event, the parameters are event_name and callback, when an event named event_name occurs, the callback method will be executed. This method will return an eventObj, which can be used to unbind the event using the un(eventObj) method.

2.one(event_name, callback) binds (subscribes) to the event, the parameter is event_name with callback. It becomes invalid after being triggered once. It can only be triggered once, after which it will automatically expire.

3.fire(event_name, data) triggers the event named event_name, and assigns the variable data as the input value of the callback method.

4. un(eventObj / eventName / function) cancels the event binding. You can unbind only one event callback method, or cancel all events directly;

5.clear() clears all events.