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

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

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

【小程序】跨页面传参通信 onfire.js相关推荐

微信小程序使用onfire.js（事件订阅和分发JavaScript 库）实现跨页面传参，对onfire的全面了解
开发微信小程序时,页面间数据传送多采用URL方式传参.添加全局变量,对于在本地缓存不大实用(感觉操作缓存,应该性能会有一定的损耗吧).而从新打开的页面回到之前的界面,貌似只有放在本地缓存.添加全局变量 ...
angularjs跨页面传参遇到的一些问题
上周写课程选择时间功能时需要将课程ID,星期,节次等参数传递给下一个页面,就查了查angularjs的ui-router跨页面传参,一开始是这样写的: 在app.js下添加 params:{'args ...
Java小程序post如何传参,微信小程序向Java后台传输参数的方法实现
微信小程序向Java后台传输参数的方法实现首先,微信小程序我使用的是微信web开发者工具想要向后台传输数据,需要在js中写在微信小程序的官方文档中可以看到一个api叫wx.request它的作用 ...
微信小程序分享路径传参的问题
最近在开发一个类似于小年糕的视频工具类的小程序,在写分享功能的时候需要实现以下两种场景 1. 当点击某个视频分享出去时,好友打开到视频详情页播放视频,返回时跳到首页. 2. 当在用户主页点击分享时,好 ...
微信小程序作品集实例：跨页面传参，数据库，换行，空格，css
审美是病,得治. 从左到右依次,初始界面,点一下,进入第二个作者目录,点击李贺,进入第三个作品目录,点击马诗二十三首,进入第四个作品详情,第五个是结构,◀▶切换前后. 依次往下捋, data里面pos ...
微信小程序跨页面通信解决思路
宏观上,微信小程序是由一个个 Page 组成的.有时候我们会遇到一些业务存在耦合的 Page,一个 Page 里某个状态改变后,相关 Page 的状态需要进行更新.而在小程序里,每个 Page 都是一 ...
微信小程序uni.switchTab传参获取不到；小程序跳转到tabBar页并传参；uni-app微信小程序获取tabBar页面参数失败；uni-app微信小程序tabBar页面onLoad不执行
需求场景:从非tabBar页面B跳转到tabBar页面A,并想要携带参数. 如果使用uni.switchTab传参,会导致tabBAE页面获取不到参数: 原因: 官方文档有说,uni.switchTa ...
uni-app 微信小程序分享功能传参接收与调试
uni-app 微信小程序功能传参接收与调试当使用微信小程序进行分享好友功能时,怎样能够联调,查看是否接收到参数,并在被分享人点进来的时候逻辑处理是否正确. 1.分享功能实现分享给朋友 ...
原生微信小程序跳转传参 : [非TabBar跳转传参] 和 [TabBar跳转传参]
一般常用的微信小程序跳转分为两种 1.非TabBar跳转 2.TabBar跳转 1.非TabBar跳转非TabBar页面的跳转通常使用wx.navigateTo来跳转页面,在链接后面加 ? 传参,如 ...

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

关于onfire.js的API

【小程序】跨页面传参通信 onfire.js相关推荐

最新文章

热门文章