小程序做开发的时候难免需要不同页面之间的通讯,比如首页打开新的页面搜索获取结果返回到首页,不同tab页面之间的数据交互等等。于是做了以下总结
当前页面打开新的页面
打开新的页面可以通过 navigator 组件来实现,通过url传参来实现,例如
<navigator url="../search/search" 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 来代替,原理一样,这里不做展开,两种办法都可行,但是就是太笨了,场景复杂起来没法搞 "htmlcode">
// 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 的回调,可以这样写 "htmlcode">
nsevent.emit('locationChange', { ns: ['pageA'] });
附上小程序代码片段,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“详解小程序不同页面之间通讯的解决方案”评论...
更新动态
2024年11月13日
2024年11月13日
- 刘欢《雨中的树(新歌加精选)2CD》德国HD24K金碟[WAV+CUE]
- 郑源 《世间情歌》6N纯银SQCD[WAV+CUE][1G]
- 群星《粤潮2HQII》头版限量编号[低速原抓WAV+CUE][991M]
- 群星《2023好听新歌21》十倍音质 U盘音乐[WAV分轨][1G]
- 《热血传奇》双11感恩回馈 超值狂欢30天
- 原神5.2版本活动汇总 5.2版本活动有哪些
- 张敬轩.2010-NO.ELEVEN【环球】【WAV+CUE】
- 黄丽玲.2006-失恋无罪【艾回】【WAV+CUE】
- 阿达娃.2024-Laluna【W8VES】【FLAC分轨】
- 宝可梦大集结段位等级划分表大全 大集结段位一览
- 龙腾世纪影障守护者工坊与装备如何升级 工坊与装备升级说明
- 龙腾世纪影障守护者全成就攻略分享 龙腾世纪4全成就列表一览
- 《剑星》更新四套全新战衣!
- 卡普空老将伊津野英昭宣布入职腾讯光子 开发3A动作
- 38岁梅根·福克斯官宣怀孕:将迎来第四个孩子