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

小程序做开发的时候难免需要不同页面之间的通讯，比如首页打开新的页面搜索获取结果返回到首页，不同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'] });

附上小程序代码片段，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 小程序组件之仿微信通讯录的实现代码

    最近模仿微信通信录做了个小程序组件,分享给大家,具体如下: 效果图 因为是使用的手机录屏,视频格式为MP4,上传到文章时发现只支持图片,还好电脑自动录屏功能,所以简单的录制了一下,完后又提示只能4M,只能再去压缩图片,所以画质略渣,各位客官讲究的看看吧. 特色功能介绍 用户只需按照格式传入参数,组件能够自动将参数按首字母分组,简单方便: 组件右侧首字母导航无需另外传值,并且根据参数具体有哪些首字母显示(没有的咱就不要): 用户进行上下滑动时,左右相互联动: 点击右侧导航,组件会相应的上下滚动.

  • 详解微信小程序中组件通讯

    这篇主要讲组件通讯 (1)父组件向子组件传值: <header title='{{title}}' bind:fn='fn' id='header'></header> 通过title='{{title}}'传向子组件向子组件传递参数 子组件接收参数: Component({ properties: { title: { // 属性名 type: Number, // 类型(必填) type: String,//目前接受的类型包括:String, Number, Boolean,

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

    小程序做开发的时候难免需要不同页面之间的通讯,比如首页打开新的页面搜索获取结果返回到首页,不同tab页面之间的数据交互等等.于是做了以下总结 当前页面打开新的页面 打开新的页面可以通过 navigator 组件来实现,通过url传参来实现,例如 <navigator url="../search/search?id=123" open-type="redirect">搜索</navigator> 在新的页面 onLoad 事件可以拿到传过来的

  • 详解小程序退出页面时清除定时器

    详解小程序退出页面时清除定时器

    由于小程序页面退出时,定时器和长连接等不会自动清除断开,所以需要我们在生命周期函数中手动清除 但是定时器定义在函数中,我们无法在函数外清除,所以为了解决这个问题,我们需要把定时器定义在data中 比如:Loadingtime是一个定时器,在data中定义Loadingtime:''. 然后在time方法中使用 在onUnload监听页面卸载生命周期函数中清除 如此在退出该页面时,就可以清除该定时器了 以上所述是小编给大家介绍的小程序退出页面时清除定时器详解整合,希望对大家有所帮助,如果大家有任何

  • 详解小程序输入框闪烁及重影BUG解决方案

    前言 本人所说的小程序,都是基于mpvue框架而上的,因此BUG可能是原生小程序的,也有可能是mpvue的. 问题描述 在小程序input组件中,如果使用v-model进行双向绑定,在输入时会出现光标闪烁的BUG. 原因 造成这个BUG的原因,是因为在原生小程序input组件上,进行了封装.才导致光标闪烁的问题. 解决方案 这里提供了两种解决方案.各有各的优势,请选取合适的方案: 一.弃用v-model,使用@input 适用于input组件单纯是用户手动输入的,而没有像授权获取手机号,然后自动

  • 详解小程序横屏方案对比

    前言 随着小程序api开放的功能日渐增多,小程序可以做到的功能和展现形式也越来越多,其中横屏的展现形式就是其中的一种,而实现横屏的方案也有多种,但是每种方案都有一定的缺陷,恰巧最近也在横屏方案上踩了不少坑,接下来就来和大家分享一下小程序的不同横屏方案的优劣(踩坑心得) 组件自带横屏方法 小程序中的媒体组件一般都会提供全屏的方法,而且全屏方法中会提供一个direction的全屏参数,可以通过这全屏参数将小程序旋转90度横屏展示,这是小程序中最简单的横屏方法. 这个方法优点在于调用的组件全屏方法做的

  • 详解小程序中h5页面onShow实现及跨页面通信方案

    小程序webview的现状 h5页面在小程序中的交互(跳转)场景 h5跳转小程序native页面(如:调用小程序地址选择能力,然后返回对应的地址信息给h5页面) h5跳转己方业务线的h5页面(内部页面交互,方式比较多样) h5跳转其它业务线的h5页面(如:交易流程,相关页面可能有其他业务线提供) 主要痛点 在完成相关操作后, 页面状态需要更新 ,目前常见的更新方式有如下两种: 第一种:通过url传参(如:url中加入__isonshowrefresh=1,告诉webview再次onshow时候刷

  • 详解小程序如何避免多次点击，重复触发事件

    作为前端开发,我们经常会遇到的场景,比如用户点击获取验证码按钮时,没有反应,大部分用户都会接着点击,这就会造成用户收到多条验证码,这是因为后台api请求比较慢,而客户端体验又做得不到位,导致用户以为没点击到或者是页面假死,在上次请求还没处理完,就再次点击按钮.这对于我们开发来说,这是bug. 如何解决或避免这个问题呢?一般来说有两种情况. 1.点击事件是执行网络请求(提交评论,验证码,支付) 这种情况下可以在请求执行之前显示一个模式的加载框,请求完成后再关闭加载框. 由于小程序在1.1.0版本基

  • 详解小程序开发经验：多页面数据同步

    详解小程序开发经验：多页面数据同步

    导语:本文主要介绍在小程序中,多页面之间如何保持数据同步 在很多的产品中,都会存在跨页面间需要数据同步,如下示例: 为了更好的理解该场景,我们再详细描绘一下: 本场景包括4个页面:动态广场.个人中心.我的动态.动态详情 首先,进入动态广场页,请求加载数据,展示动态列表,其中,我们用绿色内阴影区分该条动态是"我的",其他未加内阴影的表示是"别人的": 然后,进入个人中心页,请求加载数据,展示获赞数量: 点击我的动态,进入我的动态页,请求加载数据,展示我的动态列表: 点

  • 详解小程序毫秒级倒计时（适用于拼团秒杀功能）

    详解小程序毫秒级倒计时（适用于拼团秒杀功能）

    废话不多说直接上代码: 效果图: index.js Page({ /** * 页面的初始数据 */ data: { countdown:'' , endDate2: '2018-08-08 11:41:00' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; that.countTime() }, countTime() { var that = this; var date = new Date()

  • 详解小程序之简单登录注册表单验证

    详解小程序之简单登录注册表单验证

    这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容 一.首先我是在util.js中引入表单正则验证规则,给予login.js来引用 function regexConfig() { var reg = { userid: /^[A-Za-z0-9]+$/, //邮箱正则验证 phone: /^1(3|4|5|7|8)\d{9}$/, //手机号正则验证 cards: /^[\u4e00-\u9fa5]{2,

  • 详解小程序用户登录状态检查与更新实例

    这篇文章主要解决以下问题:用户每次登录小程序(包括第一次使用)及点击小程序的每个页面的时候,我们如何判断他当前的登录状态是否过期?如果过期,如何重新获取用户信息并发送至开发者服务器更新用户信息,以及设置新的用户登录状态? 将这个部分单独作为一篇文章有两个原因: ① wx.getUserInfo(OBJECT) 接口调整,废弃了以前直接获取用户信息的方法: ② 上篇文章授权.登录.session_key.unionId只梳理了登录流程而没有贴实际的代码,所以这篇文章以代码实现为主. 1. 代码逻辑

随机推荐