小程序不一样页面之间通信的解决方案

小程序作开发的时候不免须要不一样页面之间的通信，好比首页打开新的页面搜索获取结果返回到首页，不一样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