微信小程序中多个页面传参通信的学习与实践


Posted in Javascript onMay 05, 2017

前言

微信小程序越来越火,不少公司都在将原生代码转为微信小程序代码。在开发过程中,由于微信小程序wx.navigateBack方法并不支持返回传参,导致一些页面,尤其是从列表页面跳入详情页,用户在详情页改变了状态,返回后无论是否刷新页面,体验都不是很好。在android中,我们一般采用setresult方法来返回参数,或者直接使用rxjava框架或者eventbus框架来解决此类问题。

业务分析

此类需求大概意思是:A页面进入B页面,B页面返回并传值给A。

探索之路

刚开始我想采用一个比较偷懒的方法,利用微信的wx.setStorage缓存在B页面存储,返回A页面,在onshow方法里调用wx.getStorage读取缓存来实现此功能。但是想想解决方式过于投机取巧,也会给日后维护带来大量隐患。
随后我在网上找到获取前一个page的方法,也可以实现此功能,部分代码如下:

var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面

//直接调用上一个页面的setData()方法,把数据存到上一个页面中去
prevPage.setData({
 mdata:1 
})

仔细想了下,代码也不是很安全,因为进B页面的入口可能是多个,这样会导致获取的page出错。

本来是没招了,突然想到微信小程序支持js,然后就找了个轻量级的js库,而且是观察者模式,是我想要的类型。于是,好戏开始了

onfire.js介绍

onfire.js 是一个很简单的事件分发的Javascript库(仅仅 0.9kb),简洁实用。

github地址:https://github.com/hustcc/onfire.js [作者不是我]

本地下载地址:http://xiazai.3water.com/201705/yuanma/onfire.js(3water.com).rar

可以用于:

  • 简单的事件分发;
  • 在 react / vue.js / angular 用于跨组件的轻量级实现;
  • 事件订阅和发布;

实践

整理下思路如下:

  • A页面先订阅一个事件,并定义处理方法。
  • B页面返回时发送消息。
  • A页面卸载时,解除订阅。

A页面代码:

var onfire = require("../utils/onfire.js");
var that;
var eventObj = onfire.on('key', function () {
 //做具体的事
});

Page({
 data: {
 },
 onLoad: function(options) {
 // Do some initialize when page load.
 },
 onReady: function() {
 // Do something when page ready.
 },
 onUnload: function (e) {
 onfire.un('key');
 onfire.un(eventObj2);
 }
})

直接调用onfire.on方法订阅一个名字为key的消息,并且无传参。如果需要传参的话,直接在function里增加参数即可,如var eventObj = onfire.on('key', function (data)...

需要注意:一定要在onUnload里取消订阅key的消息,并取消绑定eventObj

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

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

分析库代码

function _bind(eventName, callback, is_one, context) {
 if (typeof eventName !== string_str || typeof callback !== function_str) {
  throw new Error('args: '+string_str+', '+function_str+'');
 }
 if (! hasOwnKey(__onfireEvents, eventName)) {
  __onfireEvents[eventName] = {};
 }
 __onfireEvents[eventName][++__cnt] = [callback, is_one, context];

 return [eventName, __cnt];
 }

从代码中可以看出订阅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]; // 当类型为只订阅一次时,通知后即移除自己。
  });
 }
 }

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

function un(event) {
 var eventName, key, r = false, type = typeof event;
 if (type === string_str) {
  // 如果存在key值,则移除数组
  if (hasOwnKey(__onfireEvents, event)) {
  delete __onfireEvents[event];
  return true;
  }
  return false;
 }
 else if (type === 'object') {
  eventName = event[0];
  key = event[1];
  //如果找到这个对象则卸载
  if (hasOwnKey(__onfireEvents, eventName) && hasOwnKey(__onfireEvents[eventName], key)) {
  delete __onfireEvents[eventName][key];
  return true;
  }
  //否则返回false
  return false;
 }
 else if (type === function_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];
   r = true;
   }
  });
  });
  return r;
 }
 return true;
 }

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

总结

有了这个事件分发库,很多问题游刃而解。好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
javascript中如何判断类型汇总
May 14 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
微信小程序 开发之全局配置
May 05 #Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 #jQuery
微信小程序 图片上传实例详解
May 05 #Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 #Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 #Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 #Javascript
移动端web滚动分页的实现方法
May 05 #Javascript
You might like
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
ECMAScript6--解构
2017/03/30 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
销售会计岗位职责
2014/03/15 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
航空学院求职信
2014/06/11 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
2015年林业工作总结
2015/05/14 职场文书
花木兰观后感
2015/06/10 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL