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

61次阅读

共计 1468 个字符,预计需要花费 4 分钟才能阅读完成。

小程序做开发的时候难免需要不同页面之间的通讯,比如首页打开新的页面搜索获取结果返回到首页,不同 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’] });
前端一起学,学习视频免费分享:731771211 学习 qun

正文完
 0