小程序不同页面之间通讯的解决方案 1
小程序做开发的时候难免需要不同页面之间的通讯,比如首页打开新的页面搜索获取结果返回到首页,不同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'] });
附上小程序代码片段,不知道这工具对大家有没有用,如有有用请给个星星吧,或者有其他好的意见可以讨论一下。
本文发布于我的个人博客,https://www.kelen.cc/posts/5bf5802d4a11da65869b75bb
小程序不同页面之间通讯的解决方案 1相关推荐
- 小程序不同页面之间通讯的解决方案
小程序做开发的时候难免需要不同页面之间的通讯,比如首页打开新的页面搜索获取结果返回到首页,不同tab页面之间的数据交互等等.于是做了以下总结 当前页面打开新的页面 打开新的页面可以通过 navigat ...
- 微信小程序之页面之间四种通讯方式
类似于vue中的组件传值,可以应用于很多场景,用的最多的则是路由跳转传值和获取上一页面的数据 一. 页面跳转传参:直接在url后拼接 wx.navigateTo({//可以使用反引号,用${}的形式, ...
- 微信小程序6 - 页面之间传参及通知系统封装
1. 简单传参 wx.navigateTo({ url: '/pages/demo/index/index?id=1' }) /pages/demo/index/index.js 中 onLoad(o ...
- 微信小程序之----页面之间相互传递数据
一.使用全局变量globalData 最外层的app.js中定义全局变量 globalData: {js_code:null} 可以在page1的登陆函数中设置值 wx.login({success: ...
- 微信小程序实现界面之间的跳转
说到微信小程序之间的跳转主要归为三类: 1,跳转到指定页面,保存当前页面wx.navigateTo 2,跳转到指定页面,关闭当前页面 wx.redirectTo 3,返回之前页面,跳转之前的页面wx. ...
- 微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...
- 微信小程序和H5之间互相跳转、互相传值
最近又开始写小程序了,刚好遇到微信小程序和内嵌 H5 之间来回跳转,来回交互:这里记录一下微信小程序和 H5 之间交互的实现:(我的小程序是通过 un-app 框架来写的,内部代码基本都是 vue) ...
- 微信小程序嵌入Udesk即时通讯网页插件
作者:张振琦 小程序除了使用原生通讯方式接入Udesk,还可以使用web-view组件嵌入Udesk即时通讯网页插件的专用链接来实现. 原生接入方式可以参考以下文章 <Udesk微信小程序即时通 ...
- 微信小程序页面栈_微信小程序之页面传值(路由、页面栈、globalData、缓存)
1. 通过url带参数传递 1.1 固定参数传递 例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: 点此进入 detail detail页面取值: onLoa ...
- 微信小程序webview页面使用painter生成海报
微信小程序webview页面使用painter生成海报 因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...
最新文章
- [转]后期-快速消除痘痘,完美修复MM肌肤
- 单片机怎么学?新手怎么快速学会单片机?
- redmine plugin
- 对象引用与托管指针(object references and managed pointers)
- Boostrap的按钮下拉菜单
- Grafana Labs 携手阿里云,将提供国内首款 Grafana 托管服务
- 目前流行的装修风格_当下最流行的十大装修风格。目前主流的装修风格前十
- Eclipse正确配置Tomcat之后仍然报错Type Target runtime Apache Tomcat v8.0 is not defined解决方式
- 矩阵拼接_TEC无缝拼接矩阵切换器(处理器)的技术
- 黑马程序员——程序结构
- VBS操作注册表设置新建读取,删除等操作(更新中)
- 【重识 HTML + CSS】CSS 选择器
- C#流处理文件 文件读写常用类
- java MAVEN下载的代码仓库位置 mac
- Spark-SQL与hive整合【版本spark1.6.0+hive0.14】--Standalone模式
- CentOS7 bcc 与 bpftrace环境搭建
- linux shell 判断ELF文件,linux file命令查看elf文件信息
- 计算机基本概念--超标量,多发射
- 【刘润五分钟商学院】-151幸存者偏见
- 邓凡平WIFI学习笔记1:netd