微信小程序接口返回数据怎么弄(微信小程序页面返回传值的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种解决方案的文章就介绍到这了,更多相关微信小程序页面返回传值内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- 微信小程序开发完整操作流程(微信小程序开发之组件设计规范)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- 微信小程序做计算器(微信小程序实现计算器小功能)
- 微信小程序即时聊天功能怎么实现(微信小程序实现聊天室功能)
- 微信小程序开发如何实现自动保存(微信小程序开发实用技巧之数据传递和存储)
- flask项目微信小程序(Python Flask 搭建微信小程序后台详解)
- 微信小程序实现自动定位(微信小程序实现锚点定位功能的方法实例)
- 怎么编写计算小程序(微信小程序实现简易计算器)
- 微信小程序scrollview 截图(微信小程序scroll-view不能左右滑动问题的解决方法)
- 微信小程序如何请求服务器数据(微信小程序学习笔记之页面配置与路由方式)
- 微信小程序可以用h5开发不(微信小程序webView嵌入H5的方法实例)
- 微信小程序签名怎么操作(微信小程序实现简单手写签名组件的方法实例)
- 微信小程序计算器怎么用(用微信小程序实现计算器功能)
- 微信小程序function怎么使用(微信小程序在{{ }}中直接使用函数的方法示例)
- 微信小程序苹果部分内容打不开(微信小程序audio组件在ios端无法播放的解决办法)
- 微信小程序swiper大小调整(微信小程序swiper-dot中的点如何改成滑块详解)
- 东南亚安全吗(好不好挣钱)
- 潘长江小品《照亮全家福》台词剧本完整版(潘长江小品照亮全家福台词剧本完整版)
- 一窗通办政务服务小品剧本(一窗通办政务服务小品剧本)
- 刘韬涛丁子贺小品《根治低头族》台词剧本(刘韬涛丁子贺小品根治低头族台词剧本)
- 看完《夺冠》,黄渤的演技我实在夸不起来,彭昱畅反令人惊喜(黄渤的演技我实在夸不起来)
- 黄渤泪目 我的痴呆父亲,我内心永远的痛(黄渤泪目我的痴呆父亲)
热门推荐
- vio更新后怎么是黑页面(vite2.0 踩坑实录)
- react组件参数(浅析React中的受控组件和非受控组件)
- unix进程空间的区段(Unix/Linux fork隐藏的开销)
- 怎么开放sql server端口(SQLServer2019配置端口号的实现)
- tomcat架构结构图(Tomcat核心组件及应用架构详解)
- jquery解析xml
- laravel自定义实现服务提供者(laravel http 自定义公共验证和响应的方法)
- php的数组是如何实现的(PHP中遍历数组的三种常用方法实例分析)
- dedecms标签怎么调用(dedecms网站栏目增加缩略图的方法)
- 移动web跨端开发领域(Web移动端布局那些事)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9