小程序做开发的时候难免需要不同页面之间的通讯,比如首页打开新的页面搜索获取结果返回到首页,不同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相关推荐

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

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

  2. 微信小程序之页面之间四种通讯方式

    类似于vue中的组件传值,可以应用于很多场景,用的最多的则是路由跳转传值和获取上一页面的数据 一. 页面跳转传参:直接在url后拼接 wx.navigateTo({//可以使用反引号,用${}的形式, ...

  3. 微信小程序6 - 页面之间传参及通知系统封装

    1. 简单传参 wx.navigateTo({ url: '/pages/demo/index/index?id=1' }) /pages/demo/index/index.js 中 onLoad(o ...

  4. 微信小程序之----页面之间相互传递数据

    一.使用全局变量globalData 最外层的app.js中定义全局变量 globalData: {js_code:null} 可以在page1的登陆函数中设置值 wx.login({success: ...

  5. 微信小程序实现界面之间的跳转

    说到微信小程序之间的跳转主要归为三类: 1,跳转到指定页面,保存当前页面wx.navigateTo 2,跳转到指定页面,关闭当前页面 wx.redirectTo 3,返回之前页面,跳转之前的页面wx. ...

  6. 微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由

    前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...

  7. 微信小程序和H5之间互相跳转、互相传值

    最近又开始写小程序了,刚好遇到微信小程序和内嵌 H5 之间来回跳转,来回交互:这里记录一下微信小程序和 H5 之间交互的实现:(我的小程序是通过 un-app 框架来写的,内部代码基本都是 vue) ...

  8. 微信小程序嵌入Udesk即时通讯网页插件

    作者:张振琦 小程序除了使用原生通讯方式接入Udesk,还可以使用web-view组件嵌入Udesk即时通讯网页插件的专用链接来实现. 原生接入方式可以参考以下文章 <Udesk微信小程序即时通 ...

  9. 微信小程序页面栈_微信小程序之页面传值(路由、页面栈、globalData、缓存)

    1. 通过url带参数传递 1.1 固定参数传递 例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: 点此进入 detail detail页面取值: onLoa ...

  10. 微信小程序webview页面使用painter生成海报

    微信小程序webview页面使用painter生成海报 因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...

最新文章

  1. [转]后期-快速消除痘痘,完美修复MM肌肤
  2. 单片机怎么学?新手怎么快速学会单片机?
  3. redmine plugin
  4. 对象引用与托管指针(object references and managed pointers)
  5. Boostrap的按钮下拉菜单
  6. Grafana Labs 携手阿里云,将提供国内首款 Grafana 托管服务
  7. 目前流行的装修风格_当下最流行的十大装修风格。目前主流的装修风格前十
  8. Eclipse正确配置Tomcat之后仍然报错Type Target runtime Apache Tomcat v8.0 is not defined解决方式
  9. 矩阵拼接_TEC无缝拼接矩阵切换器(处理器)的技术
  10. 黑马程序员——程序结构
  11. VBS操作注册表设置新建读取,删除等操作(更新中)
  12. 【重识 HTML + CSS】CSS 选择器
  13. C#流处理文件 文件读写常用类
  14. java MAVEN下载的代码仓库位置 mac
  15. Spark-SQL与hive整合【版本spark1.6.0+hive0.14】--Standalone模式
  16. CentOS7 bcc 与 bpftrace环境搭建
  17. linux shell 判断ELF文件,linux file命令查看elf文件信息
  18. 计算机基本概念--超标量,多发射
  19. 【刘润五分钟商学院】-151幸存者偏见
  20. 邓凡平WIFI学习笔记1:netd

热门文章

  1. VisualStudioCode常用快捷键
  2. 第二十七节:Java基础面向对象-静态,单例模式,继承详情知识点
  3. Luogu P2048 [NOI2010]超级钢琴
  4. javase二维数组笔记
  5. Linux网络管理常用命令:net-tools VS iproute2
  6. js本地存储解决方案(localStorage与userData)
  7. 写, 读sdcard目录上的文件
  8. Sass中使用@each循环
  9. Gradle与Gradle插件
  10. KMP算法 --- 在文本中寻找目标字符串