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


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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
Javascript valueOf 使用方法
Dec 28 Javascript
javascript 写类方式之五
Jul 05 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 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
德劲1103二次变频版的打磨
2021/03/02 无线电
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
js切换光标示例代码
2013/10/10 Javascript
理解AngularJs指令
2015/12/10 Javascript
Vue精简版风格概述
2018/01/30 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
京东优选小程序的实现代码示例
2020/02/25 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
Python 的 with 语句详解
2014/06/13 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
涉外文秘个人求职的自我评价
2013/10/07 职场文书
党员公开承诺书范文
2014/03/25 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
党员群众路线承诺书
2014/05/20 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
刑事案件上诉状
2015/05/23 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js