【微信小程序】页面返回且带回数据
一、回退上一级页面 beforePage
返回页面同时需要刷新数据
var pages = getCurrentPages(); //当前页面
var beforePage = pages[pages.length - 2]; //前一页
beforePage.onLoad(); // 执行前一个页面的onLoad方法
wx.navigateBack({delta: 1
});
二、回退 3 级页面 wx.navigateBack
当我们页面跳转到三级页面后,点击左上角的返回按钮,能够直接返回到首页
wx.navigateBack 这个方法可以返回界面 在 onUnload 触发的时候可以执行。但是我发现这个方法确实可以回到首页,但是他会一个一个界面返回,不能直接返回到首页
onUnload:function(){wx.navigateBack({delta: 3})
}
正常 A -> B -> C 都是通过 wx.navigateTo 跳转的,所以 wx.navigateBack 只能返回上一界面,如果要返回到 A 界面就会出现 C -> B -> A 的效果。
如果想实现 A -> B -> C 当 C 点击返回时, 实现直接 C -> A 这种效果就只能 A -> B 通过
wx.navigateTo 跳转 B -> C 通过 wx.redirectTo 跳转,跳转触发后 B 页面就会被销毁,C 页面再返回 wx.navigateBack 就会直接到 A 了。
wx.redirectTo({url: url
})
三、回退 4 级或者更多级页面,wx.reLaunch
onUnload() {console.log('返回按钮')wx.reLaunch({url: '/pages/index/index'})
}
四、返回多级页面,同时刷新
比如我们现在希望在第四级页面返回首页后刷新,我们需要在 onShow 方法中调用 onLoad() 方法
页面需要带参进来的情况
onShow() {this.onLoad({age: '18'})
}
页面不需要带参的情况
onShow() {this.onLoad()
}
五、带参数返回上个页面
当前页面
var pages = getCurrentPages(); //当前页面
var prevPage = pages[pages.length - 2]; //上个页面
// 直接给上一个页面赋值
prevPage.setData({params: this.data.params
});wx.navigateBack({delta: 1
})
要跳转的页面
data: {params: null,
},onShow: function () {console.log(this.data.params)
}
在 data 里定义属性后,也可以获取到上个页面传过来的值
六、对于携带不同参数的情况,页面跳转最好不要采用带参跳转方式,采用全局变量方式比较好
比如:
从 A 页面到 B 页面带的对象 a = {name: ‘小明’, age: ‘18’}
从 C 页面到 B 页面带的对象 c = {pname: ‘小红’, page: ‘17’}
像这样对象内部的字段名称不一样,B页面在拿到该对象后无法解析
在全局中定义变量 e ,在 A 页面中跳转前设置
app.globalData.e.name = a.name;
app.globalData.e.age = a.age;
wx.navigateTo({url: 'B'
})
在全局中定义变量 e ,在 C 页面中跳转前设置
app.globalData.e.name = c.pname;
app.globalData.e.age = c.page;
wx.navigateTo({url: 'B'
})
在 B 页面 onLoad() 方法中取值
this.obj = app.globalData.e,
console.log(obj.name);
console.log(obj.age);
【微信小程序】页面返回且带回数据相关推荐
- 微信小程序页面间传递文本数据
写了一个微信小程序可以实现记录日记的功能.当点击编辑时,会再另一个页面中显示这个页面的日记数据,发现通过传递参数的方法很不现实,就在网上搜集了各种方法来实现,其中一个比较可取的方法是利用getCurr ...
- 微信小程序页面返回并传递参数
微信小程序返回 wx.navigateBack({delta: 1 }) 在这里插入图片描述 但是navigateBack 无法携带参数, 于是想到了getCurrentPages let pages ...
- 微信小程序页面间传递json数据
1.页面跳转函数 wx.navigateTo(Object object) 保留当前页面,跳转到应用内的某个页面.但是不能跳到 tabbar 页面.使用 wx.navigateBack 可以返回到原页 ...
- 微信小程序页面之间数据传递
微信小程序跳转界面传递数据,要传递的数据拼接在url 后面实现 下面看一个简单的demo 传递数据 要传递界面 wxml <!--index.wxml--> <view class= ...
- 微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替 完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面 主页面login.js代码 // pages/login/logi ...
- 微信小程序-页面间如何进行传递数据(通信)
前言 在小程序中组件与组件之间的通信是通过在引用组件处,在自定义组件上添加自定义属性实现的,子组件内部通过properties进行接收 更多关于组件与组件之间的通信可参考小程序-实现自定义组件以及自定 ...
- vue 传参 微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结 最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
- 小程序向Java传值,微信小程序 页面传值详解
微信小程序 页面传值详解 一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如 这里将good_id=16 参数传入detail页面, 然后detail页面的 ...
- 详解微信小程序页面间传递信息的三种方式
详解微信小程序页面间传递信息的三种方式 在开发微信小程序的时候,经常会遇到在页面间传递信息的情况,有三种方法可以实现. 1. 使用数据缓存 将要存储的数据使用以下方法放入缓存 wx.setStorag ...
- 微信小程序——页面之间传递值
微信小程序--页面之间传递值 小程序页面传值的方式: 1.正向传值:上一页面 --> 下一页面 url传值 本地储存 全局的app对象 2.反向传值:下一页面 --> 上一页面 本地储 ...
最新文章
- dma工作时cpu工不工作_CPU如何工作?
- linux的txt转为windows的txt
- 判断一个对象是否是可调用对象
- CSAPP lab2 二进制拆弹 binary bombs phase_6
- Keras保存和载入训练好的模型和参数
- 华为鸿蒙备胎转正,华为鸿蒙是备胎系统,但已经实现上网随时能转正?
- win32 禁用缩放功能_Firefox 73 将引入全局缩放功能,在所有网站都可适用
- 有一种无耻叫 “我是为你着想”
- 2020年最新程序员职业发展路线指南,超详细!
- Tensorflow 2 Auto-Encoder
- 数据挖掘项目:银行信用评分卡建模分析(上篇)
- docker portainer_Docker可视化管理:Portainer中文版
- 【预测模型-ELAMN预测】基于遗传算法优化ELMAN神经网络实现数据回归预测matlab代码
- php报修小程序,微信小程序报修管理系统
- Spark小文件合并
- 【ARTS】01_07_左耳听风-20181224~1230
- 为响应国家号召1+X证书Web前端开发最新考试模拟题
- 知识产权服务机构列表
- 用HTML和CSS制作一个网页
- 那些年啊,那些事——一个程序员的奋斗史 ——121