欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-09 16:24:05
小程序做开发的时候难免需要不同页面之间的通讯,比如首页打开新的页面搜索获取结果返回到首页,不同tab页面之间的数据交互等等。于是做了以下总结 当前页面打开新的页面...

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

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