微信小程序> 一个JS库就能解决小程序跨页传递事件消息和数据-js触发小程序事件-小程序模拟点击

一个JS库就能解决小程序跨页传递事件消息和数据-js触发小程序事件-小程序模拟点击

浏览量:2613 时间: 来源:honey缘木鱼
1.

由于微信小程序wx.navigateBack方法并不支持返回传值,导致页面在返回后,不能方便地即时更新数据。

2.

一.需求分析此类需求大概意思是:A页面进入B页面,B页面返回并传值给A或在B页面触发事件时,A页面也有事件触发改变。

3.

业务分析

4.

普遍方法为:第一种:利用微信的wx.setStorage,将数据缓存在小程序实例内。从B页面返回A页面时,B页面先将数据缓存;然后在A页面的onshow方法里,调用wx.getStorage读取缓存来实现。但为日后维护带来大量隐患。(用全局变量方法类似)

5.

第二种:获取前一个page实例的方法,也可以实现此功能。部分代码如下:

varpagesgetCurrentPages();varcurrPagepages[pages.length-1];//当前页面varprevPagepages[pages.length-2];//上一个页面//直接调用上一个页面的setData()方法,把数据存到上一个页面中去prevPage.setData({mdata:1})6.

这种方法的弊端:因为进入B页面的入口可能是很多个。这样做,可能会导致获取到的页面实例不正确。

7.

二.方法介绍(onfire.js的下载地址https://github.com/hustcc/onfire.js)下面进入正题介绍onfire.js()onfire.js是一个很简单的事件分发JavaScript库(仅仅0.9kb),简洁实用。它可以应用于:1.简单的事件分发。2.在React、Vue.js、Angular中用于跨组件的轻量级实现。3.事件订阅和发布。

8.

使用思路:(做过移动端开发的都知道,类似于iOS的通知和安卓的广播)a.A页面先订阅一个事件,并定义处理方法;b.从B页面返回时,发送消息;c.A页面卸载时,解除订阅。

9.

我的使用方法为:A页面代码:

varonfirerequire("../utils/onfire.js");varthat;vareventObjonfire.on('key',function(){//当消息被传递时,做具体的事});Page({data:{},onLoad:function(options){//Dosomeinitializewhenpageload.},onReady:function(){//Dosomethingwhenpageready.},onUnload:function(e){onfire.un('key');onfire.un(eventObj);//移除}})10.

我们可以在A页面直接调用onfire.on方法,订阅一个名字为key的消息。在上面的代码中,消息附带的参数无传参。如果需要传参的话,直接在function里增加参数即可,例如:

vareventObjonfire.on('key',function(data){//执行操作})11.

需要注意的是,一定要在onUnload里(在页面被关闭时)取消订阅消息,并取消绑定eventObj。

12.

B页面里代码在回调的地方加入以下代码:

onfire.fire('key');//key为上文中订阅的消息//有参数时onfire.fire('key','test');13.

三.分析库代码

function_bind(eventName,callback,is_one,context){if(typeofeventName!string_str||typeofcallback!function_str){thrownewError('args:'+string_str+','+function_str+'');}if(!hasOwnKey(__onfireEvents,eventName)){__onfireEvents[eventName]{};}__onfireEvents[eventName][++__cnt][callback,is_one,context];return[eventName,__cnt];}14.

从代码中可以看出订阅on方法的时候,实际调用_bind方法。该方法利用一个二维数组,来存储订阅的对象。

function_fire_func(eventName,args){if(hasOwnKey(__onfireEvents,eventName)){_each(__onfireEvents[eventName],function(key,item){item[0].apply(item[2],args);//执行订阅时的方法if(item[1])delete__onfireEvents[eventName][key];//当类型为只订阅一次时,通知后即移除自己。});}}15.

而fire发送消息方法的实质,是调用_fire_func方法,通过名字(key)来遍历订阅者,然后通知订阅者。

functionun(event){vareventName,key,rfalse,typetypeofevent;if(typestring_str){//如果存在key值,则移除数组if(hasOwnKey(__onfireEvents,event)){delete__onfireEvents[event];returntrue;}returnfalse;}elseif(type'object'){eventNameevent[0];keyevent[1];//如果找到这个对象则卸载if(hasOwnKey(__onfireEvents,eventName)hasOwnKey(__onfireEvents[eventName],key)){delete__onfireEvents[eventName][key];returntrue;}//否则返回falsereturnfalse;}elseif(typefunction_str){//两层循环来判断方法名_each(__onfireEvents,function(key_1,item_1){_each(item_1,function(key_2,item_2){if(item_2[0]event){delete__onfireEvents[key_1][key_2];rtrue;}});});returnr;}returntrue;}16.

调用un方法,通过名字(key)来遍历订阅者,找到后移除。

17.

注:因为卸载支持按key、对象、方法卸载,所以需要先判断类型,然后按各自规则去解除绑定。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎