微信小程序接口返回数据怎么弄(微信小程序页面返回传值的4种解决方案汇总)
类别:编程学习 浏览量:1124
时间:2021-10-03 01:25:25 微信小程序接口返回数据怎么弄
微信小程序页面返回传值的4种解决方案汇总目录
- 使用场景
- 解决方案
- 1、使用globalData实现
- 2、使用本地缓存Storage实现
- 3、使用小程序的Page页面栈实现
- 4、使用wx.navigateTo API的events实现
- 总结
小程序从A页面跳转到B页面,在B页面选择一个值后返回到A页面,在A页面使用在B页面选中的值。例如:在购买订单页面跳转到地址列表,选择完地址以后回退到订单页面,订单页面的配送地址需要同步更新。
解决方案常见的比容要容易解决的方案是使用小程序的全局存储globalData、本地缓存storage、获取小程序的页面栈,调用上一个Page的setData方法、以及利用wx.navigateTo的events属性监听被打开页面发送到当前页面的数据。下面给大家简单对比下四种方法的优缺点:
1、使用globalData实现
//page A const app = getApp() //获取App.js实例 onShow() {//生命周期函数--监听页面显示 if (app.globalData.backData) { this.setData({ //将B页面更新完的值渲染到页面上 backData: app.globalData.backData },()=>{ delete app.globalData.backData //删除数据 避免onShow重复渲染 }) } } //page B const app = getApp() //获取App.js实例 changeBackData(){ app.globalData.backData = '我被修改了' wx.navigateBack() }
2、使用本地缓存Storage实现
//page A onShow: function () { let backData = wx.getStorageSync('backData') if(backData){ this.setData({ backData },()=>{ wx.removeStorageSync('backData') }) } }, //page B changeBackData(){ wx.setStorageSync('backData', '我被修改了') wx.navigateBack() },
3、使用小程序的Page页面栈实现
使小程序的页面栈,比其他两种方式会更方便一点而且渲染的会更快一些,不需要等回退到A页面上再把数据渲染出来,在B页面上的直接就会更新A页面上的值,回退到A页面的时候,值已经被更新了。globalData和Storage实现的原理都是在B页面上修改完值以后,回退到A页面,触发onShow生命周期函数,来更新页面渲染。
//page B changeBackData(){ const pages = getCurrentPages(); const beforePage = pages[pages.length - 2] beforePage.setData({ //会直接更新A页面的数据,A页面不需要其他操作 backData: "我被修改了" }) }
4、使用wx.navigateTo API的events实现
wx.navigateTo的events的实现原理是利用设计模式的发布订阅模式实现的,有兴趣的同学可以自己动手实现一个简单的,也可以实现相同的效果。
//page A goPageB() { wx.navigateTo({ url: 'B', events: { getBackData: res => { //在events里面添加监听事件 this.setData({ backData: res.backData }) }, }, }) }, //page B changeBackData(){ const eventChannel = this.getOpenerEventChannel() eventChannel.emit('getBackData', { backData: '我被修改了' }); wx.navigateBack() }
1和2两种方法在页面渲染效果上比后面两种稍微慢一点,3和4两种方法在B页面回退到A页面之前已经触发了更新,而1和2两种方法是等返回到A页面之后,在A页面才触发更新。并且1和2两种方式,要考虑到A页面更新完以后要删除globalData和Storage的数据,避免onShow方法里面重复触发setData更新页面,所以个人更推荐大家使用后面的3和4两种方式。
到此这篇关于微信小程序页面返回传值的4种解决方案的文章就介绍到这了,更多相关微信小程序页面返回传值内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- 微信小程序双人游戏横屏(微信小程序实现拼图游戏)
- 微信小程序转盘动画效果(微信小程序实现摇筛子效果)
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- 微信小程序可以用h5开发不(微信小程序webView嵌入H5的方法实例)
- 微信小程序抽签如何抽中(JavaScript实现班级抽签小程序)
- 9小时搞定微信小程序开发(关于加快微信小程序开发的一些小建议)
- 微信小程序计算器怎么用(微信小程序实现计算器功能)
- 微信小程序实现自动定位(微信小程序实现锚点定位功能的方法实例)
- 微信小程序计算器怎么用(用微信小程序实现计算器功能)
- 微信小程序开发模式(微信小程序引入Vant框架的全过程记录)
- 微信小程序存token(小程序开发实现access_token统一管理)
- 微信小程序接口返回数据怎么弄(微信小程序页面返回传值的4种解决方案汇总)
- 微信小程序开发完整操作流程(微信小程序开发之组件设计规范)
- 微信小程序多人编辑表格(微信小程序实现固定表头、列表格组件)
- 微信小程序开发简单计算器(小程序实现计算器功能)
- 微信小程序日期选择器有星期天(微信小程序 滚动选择器时间日期详解及实例代码)
- 冯骥才 年意(冯骥才年意)
- ()
- 百事大吉蓝底 绿底手机高清壁纸(绿底手机高清壁纸)
- 蓝底证件照怎么制作 证件照换底色 换尺寸快速搞定(蓝底证件照怎么制作)
- 你喜欢足球吗 足球如何点亮世界的(足球如何点亮世界的)
- 不可分鸽是什么梗(不可分鸽是什么梗)
热门推荐
- 纯css写三角形(老生常谈 使用 CSS 实现三角形的技巧多种方法)
- ASP.NET函数返回多个值的几种方法
- php环境搭建apache(apache 支持 php5 的配置方法)
- php框架制作方法(PHP从零开始打造自己的MVC框架之路由类实现方法分析)
- linux部署flask项目(用uWSGI和Nginx部署Flask项目的方法示例)
- css3过渡动画制作(CSS3中动画属性transform、transition和animation属性的区别)
- linux安装opencv版本(详解ubuntu安装opencv的正确方法)
- 宝塔面板使用外部数据库(宝塔面板负载状态load average中的数据代表了什么?)
- sqlserver查询自定义时间数据(SQLServer查询某个时间段购买过商品的所有用户)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)