好资源导航 » 文章资讯 » 详解小程序不同页面之间通讯的解决方案

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

2023-09-05 10:45:05 159

小程序做开发的时候难免需要不同页面之间的通讯，比如首页打开新的页面搜索获取结果返回到首页，不同tab页面之间的数据交互等等。于是做了以下总结

当前页面打开新的页面

打开新的页面可以通过navigator组件来实现，通过url传参来实现，例如

搜索

在新的页面onLoad事件可以拿到传过来的参数options

onLoad:function(options){
console.log(options.id);
}

新的页面回传数据到当前页面

在当前页面定义一个方法

searchRet(results){
console.log(results);
}

在搜索页面获取到的结果，由于小程序页面是通过栈来存储的，所以可以通过getCurrentPages()获取获取当前页面栈的实例，第一个元素为首页，最后一个元素为当前页面

letpages=getCurrentPages();
lethomePage=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来代替，原理一样，这里不做展开，两种办法都可行，但是就是太笨了，场景复杂起来没法搞