相信只要开发过小程序,对wx。navigateBack这个api都不会陌生。在摩拜单车的小程序中,它也被改造的更方便满足复杂的业务需求,可谓之增强型的wx.navigateBack。
先来看看官方文档中的用法:
wx.navigateBack ({
三角洲:2
})
之前
δ表示返回的层级数。通过具体的业务示例来说明我们如何改造它:
余额充值的例子
两个页面:
<李>一页面展示用户余额,使用H5实现,通过网页视图嵌套在小程序里李
<李> B页面为用户充值,为了方便使用支付api,用小程序原生页面实现李
用户在B页面充值完成后返回页面,更新用户余额。翻译成技术语言就是:从小程序原生页面返回到H5页面,需要刷新。
简单的业务代码如下:
& lt; !——页/平衡/索引。wxml——比;
& lt;网页视图src=" https://www.yisu.com/zixun/{{url}}”祝辞& lt;/web-view>
页面({
数据:{
url: https://balance/url的
}，>
const URL=' https://balance/url '
页面({
数据:{
url: url
}，>
页面({
数据:{},>
const URL=' https://balance/url '
页面({
数据:{
url: url、
isPaySuccess:假
}，>
页面({
数据:{},>
函数返回(配置){
让prevPageData=https://www.yisu.com/zixun/config.prevPageData
让δ=config.delta | | 1
如果(prevPageData) {
让页面=getCurrentPages ()
让prevPage=页面(页面。(长度)-δ+ 1)
prevPage.setData (config.prevPageData)
}
wx.navigateBack(配置)
}
之前
通过这样封装,上面的页面B的代码可以改成这样:
让回=要求(. ./跑龙套回来)
页面({
数据:{},>
页面({
数据:{},
onTopup () {
wx.requestPayment ({//?
成功(res) {
回美元。({
prevPageData: {
isPaySuccess:真
}
})
}
})
}
})
之前
简单的api也可以变得丰富,一切都是基于日益复杂的业务需求。通过增强wx。navigateBack不仅仅可以改变前一个页面的标记位,还可以改变其页面显示数据。比如页面一个的余额值是小程序通过参数传给H5的,而页B面充值成功后接口返回用户新的余额。这样就可以在充值成功后直接改变页面一个的余额数据,而不是先返回到页面一个再刷新重新请求接口。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
