评论

小程序跨页面通信解决方案

小程序跨页面通信解决方案

场景介绍

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

下载地址

onfire.js下载地址

  1. https://www.bootcdn.cn/onfire.js/
  2. https://gitee.com/mirrors/onfire-js

如何使用

将onfire.js下载下来并放置在开发项目某个目录下,例如根目录lib文件夹内。
在使用页面对应的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()
    })
  }
})

其效果图如下:
图一

图二

图三

相关API

关于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() 清空所有事件。

总结

个人对于onfire.js的理解就是一个全局通知,从B页面发出一个通知带上Key和Value,在其他某一个页面监听这个Key值来获取传出来的Value。

其他解决方案

最后一次编辑于  2019-12-20  
点赞 6
收藏
评论

4 个评论

  • Meゞ夨ヤ譩丨网站,App,小程序开发
    Meゞ夨ヤ譩丨网站,App,小程序开发
    2019-12-20

    不知道好不好使,但是我知道getCurrentPages可以获取页面的实例,直接操作。

    2019-12-20
    赞同 1
    回复 2
    • 小肥羊
      小肥羊
      2019-12-20
      是的之前看过,摩拜单车小程序的开发者写过一篇文章,用到就是getCurrentPages的方案,技术就是这样,选择自己习惯就好。
      2019-12-20
      回复
    • 小肥羊
      小肥羊
      2019-12-20
      我把链接放下面:https://juejin.im/post/5da80767f265da5b5f7584dc
      2019-12-20
      回复
  • 九块腹肌的猛男
    九块腹肌的猛男
    2019-12-23

    这种 我一般用是用内存来解决的。。

    2019-12-23
    赞同
    回复
  • 静
    2019-12-21
    小程序怎么解决生成二维码
    2019-12-21
    赞同
    回复 1
    • 小肥羊
      小肥羊
      2019-12-21
      这个问题虽然我会,但是不是这么问的
      2019-12-21
      回复
  • 天天修改
    天天修改
    2019-12-21

    用钩子方法,或者app或者storage也可以实现

    放个链接,https://developers.weixin.qq.com/community/develop/article/doc/00002c3a558990e7f499974675ac13

    第一个小程序内有hooks的相关文档

    2019-12-21
    赞同
    回复 1
    • 小肥羊
      小肥羊
      2019-12-21
      非常感谢,等忙完了这个我回头消化下,看看具体怎么使用。
      2019-12-21
      回复
登录 后发表内容