当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-04 23:01:33 HTML5

在开发小程序的时候,难免需要不同页面之间的通信,比如在首页打开新页面、搜索结果返回首页、不同标签页之间的数据交互等等。所以我做了以下总结。可以通过navigator组件实现打开??新页面,通过url传递参数,如search中新页面的onLoad事件,可以获取传入的参数optionsLoad:function(options){console.log(options.id);}新页面向当前页面返回数据。定义一个方法searchRet(在当前页面results){console.log(results);}在搜索页面获取结果,因为小程序页面是通过栈存储的,所以可以通过栈获取当前页面的实例getCurrentPages(),第一个元素是首页,最后一个元素是当前页}生命周期和存储通过wx.setStorageSync()方法可以将数据存储到本地,在页面的onShow回调中获取storage的值并进行相应的处理,例如//index.jswx.setStorageSync('refresh',true);//mycenter.jsif(wx.getStorageSync('refresh')){//做更新操作wx.removeStorageSync('refresh');}storage也可以换成globalData,原理一样,这里就不展开了,两种方法都可行,就是太笨了,场景复杂了做不出来?事件监控个人觉得通过全局事件监控来处理事件是一个很好的方式。在Page上监听事件,在另一个Page上触发相应的事件,可以做相应的处理,实时高效,所以我封装了一个事件监听器nsevent,可以声明一个命名空间,可以通过npm安装成小程序(微信官方npm使用方法)。nsevent的用法也很简单。你只需要使用nsevent。取消绑定相应事件的回调,举如下例子//select.jsconstnsevent=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.jsremoveaddevent')nsevent.off('add','select.js');}});emit方法不仅可以触发普通事件,还可以触发指定命名空间的事件,比如pageA、pageB、pageC都监听locationChange事件。如果想在pageC页面单独触发pageA的回调,可以这样写免费分享:731771211学习qun