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


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中的History历史对象
Jan 16 Javascript
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
使用javascript做在线算法编程
May 25 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
创建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
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
jquery随机展示头像代码
2011/12/21 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python去掉字符串中空格的方法
2014/03/11 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
python的中异常处理机制
2018/08/30 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
教师档案管理制度
2014/01/23 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
颁奖晚会主持词
2014/03/25 职场文书
调研汇报材料范文
2014/08/17 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
2014年团支书工作总结
2014/11/14 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
利用Redis实现点赞功能的示例代码
2022/06/28 Redis