详解小程序不同页面之间通讯的解决方案


Posted in Javascript onNovember 23, 2018

小程序做开发的时候难免需要不同页面之间的通讯,比如首页打开新的页面搜索获取结果返回到首页,不同tab页面之间的数据交互等等。于是做了以下总结

当前页面打开新的页面

打开新的页面可以通过 navigator 组件来实现,通过url传参来实现,例如

<navigator url="../search/search?id=123" open-type="redirect">搜索</navigator>

在新的页面 onLoad 事件可以拿到传过来的参数 options

onLoad: function(options) {
 console.log(options.id);
}

新的页面回传数据到当前页面

在当前页面定义一个方法

searchRet(results) {
 console.log(results);
}

在搜索页面获取到的结果,由于小程序页面是通过栈来存储的,所以可以通过 getCurrentPages() 获取获取当前页面栈的实例,第一个元素为首页,最后一个元素为当前页面

let pages = getCurrentPages();
let homePage = pages[pages.length - 2];
if (homePage) {
 homePage.searchRet(results);
}

生命周期和storage

通过 wx.setStorageSync() 方法可以在本地存储数据,在 page 的 onShow 回调里获取 storage 的值后做相应的处理,例如

// index.js
wx.setStorageSync('refresh', true);

// mycenter.js
if (wx.getStorageSync('refresh')) {
 // 做更新操作
 wx.removeStorageSync('refresh');
}

storage 也可以用 globalData 来代替,原理一样,这里不做展开,两种办法都可行,但是就是太笨了,场景复杂起来没法搞 ?

事件监听

个人感觉通过全局的事件监听来处理是一个很好的方法,在 Page 页面监听事件,通过在另一个 Page 触发相应的事件,就可以做对应的处理,实时高效,于是我封装了一个可以声明命名空间的事件监听器 nsevent ,可以通过 npm 安装到小程序(微信官方npm使用方法)

nsevent的用法也很简单,只需要在监听的页面通过 nsevent.on() 来实现监听,建议添加第三个参数命名空间,这样可以在 onUnload 回调解绑相应的事件,举个以下例子

// select.js
const nsevent = require('nsevent');
Page({
 onLoad() {
  nsevent.on('add', (num) => {
   console.log(`select.js接收到add事件,参数为${num}`)
  }, 'select.js')
 },
 addnumber() {
  nsevent.emit('add', 1);
 },
 onUnload() {
  console.log('select.js移除add事件')
  nsevent.off('add', 'select.js');
 }
});

emit方法不仅可以触发普通的事件,也可以触发指定命名空间的事件,比如 pageA 和 pageB,pageC 都监听了 locationChange 事件,在 pageC 页面想单独触发 pageA 的回调,可以这样写 ?

nsevent.emit('locationChange', { ns: ['pageA'] });

附上小程序代码片段,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
javascript事件模型实例分析
Jan 30 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
node使用request请求的方法
Dec 20 Javascript
创建echart多个联动的示例代码
Nov 23 #Javascript
详解Angular模板引用变量及其作用域
Nov 23 #Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 #Javascript
详解Vue2.0组件的继承与扩展
Nov 23 #Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 #Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 #Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 #Javascript
You might like
PHP4实际应用经验篇(9)
2006/10/09 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php mail to 配置详解
2014/01/16 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
浅谈Postman解决token传参的问题
2018/03/31 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
python实现linux下使用xcopy的方法
2015/06/28 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
异步传递消息系统的作用
2016/05/01 面试题
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
实习单位评语
2014/04/26 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
小学校长开学致辞
2015/07/29 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书