找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 小程序开发 查看内容

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

作者:模板之家 2018-12-14 08:43 5619人关注

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

 
小程序做开发的时候难免需要不同页面之间的通讯,比如首页打开新的页面搜索获取结果返回到首页,不同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 来代替,原理一样,这里不做展开,两种办法都可行,但是就是太笨了,场景复杂起来没法搞

路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)