资讯专栏INFORMATION COLUMN

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

Kerr1Gan / 2023人阅读

摘要:小程序做开发的时候难免需要不同页面之间的通讯,比如首页打开新的页面搜索获取结果返回到首页,不同页面之间的数据交互等等。

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

当前页面打开新的页面

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

搜索

在新的页面 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 来代替,原理一样,这里不做展开,两种办法都可行,但是就是太笨了,场景复杂起来没法搞

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108800.html

相关文章

  • 深入理解程序数据——程序探索

    摘要:传输时间与数据量大体上呈现正相关关系,传输过大的数据将使这一时间显著增加。小程序不管从组件化开发调试发布灰度回滚上报统计监控和最近的云能力都非常完善,小程序的工程化简直就是前端的典范。 研究背景 上一篇文章了解了小程序的生命周期,接下来研究一下数据通信,我觉得清楚了生命周期和数据通信,就能对整个程序有一定的把控能力,定位问题和解决问题的能力将大幅提高我刚开始撸小程序的时候,觉得看看文...

    Jochen 评论0 收藏0
  • 自制微信程序通讯JS

    摘要:自制微信小程序通讯起因现在微信小程序开发基本会使用到组件的开发。随着组件的不断增加,使得组件之间的通讯越发频繁。这个能使得我们在组件和页面之间随意通讯,您只需要按照规范注册,使用即可,可以帮你建立任意两个组件之间的通信通道。 自制微信小程序通讯JS 起因 现在微信小程序开发基本会使用到组件的开发。随着组件的不断增加,使得组件之间的通讯越发频繁。然后,微信小程序中组件之前通讯必须通过父子...

    keke 评论0 收藏0
  • 程序页面之间通讯利器 - nsevent

    摘要:这个模块主要的原因是用在微信开发时候监听两个页面之间的状态交互比如和两个页面页面有收藏项也有同样的收藏项,监听同一个事件收藏事件改变刷新列表数据那么在页面操作收藏事件会触发自身页面回调,这时候就派上用场,在这样声明收藏事件改变刷新列表数据在 这个模块主要的原因是用在微信开发时候监听两个页面之间的状态交互 比如 pageA 和 pageB 两个页面, pageA 页面有收藏项 pageB...

    Eric 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<