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


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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
taro开发微信小程序的实践
May 21 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
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
python中pop()函数的语法与实例
2020/12/01 Python
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
在校生党员自我评价
2013/09/25 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
运动会开幕式解说词
2014/02/05 职场文书
益达广告词
2014/03/14 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
求职信名称怎么写
2014/05/26 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
Java中的Kotlin 内部类原理
2022/06/16 Java/Android
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android