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、对象、方法卸载,所以需要先判断类型,然后按各自规则去解除绑定。
一个JS库就能解决小程序跨页传递事件消息和数据-js触发小程序事件-小程序模拟点击
浏览量:2613
时间:
来源:honey缘木鱼
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

最新资讯
-
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
阿坝小程序代理
阿坝藏族羌族小程序代理公司有哪些?阿坝藏族羌族小程序代理平台哪个好?阿坝藏族羌族小程序代理商怎么收费,代理政策如何?下面就让即速应用产品经理jisuapp.cn来告诉你吧!