小顺序差别页面之间通信的解决方案

2023年10月14日 262次阅读 来源: kelen

小顺序做开辟的时刻不免须要差别页面之间的通信，比方首页翻开新的页面搜刮猎取效果返回到首页，差别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

    原文作者：kelen
    原文地址: https://segmentfault.com/a/1190000017102784
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞