网页网站开发手机游戏百度推广服务费一年多少钱
一、五种跳转方式
1.wx.navigateTo()
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面
通常推荐使用 wx.navigateTo进行跳转,以便返回原页面,以提高加载速度
wx.navigateTo({url: ''
})
2.wx.redirectTo()
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.redirectTo({url: ''
})
3.wx.reLaunch()
关闭所有页面,打开到应用内的某个页面
wx.reLaunch()与 wx.redirectTo()的用途基本相同, 只是 wx.reLaunch()先关闭了内存中所有保留的页面,再跳转到目标页面
wx.reLanch({url: ''
})
4.wx.switchTab()
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
对于跳转到 tabBar 的页面,最好选择 wx.switchTab(),它会先关闭所有非 tabBar 的页面。其次,也可以选择 wx.reLaunch(),它也能实现从非 tabBar 跳转到 tabBar,或在 tabBar 间跳转,效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tabBar,则会跳转失败
wx.switchTab({url: ''
})
5.wx.navigateBack
关闭当前页面,返回上一页面或多级页面。可通过getCurrentPages 获取当前的页面栈,决定需要返回几层
这个 API 需要填写的参数只有 delta,表示要返回的页面数。若 delta 的取值大于现有可返回页面数时,则返回到用户进入小程序的第一个页面。当不填写 delta 的值时,就默认其为 1(注意,默认并非取 0),即返回上一页面
wx.navigateBack({delta: 1
})
二、跳转问题汇总(不定时更新)
微信小程序路由跳转有个隐藏的坑,就是 wx.navigateTo打开新页面,最多只能打开10个,超过10个之后就没反应,控制台也不会报错。
方案一:简单粗暴navigateTo不行,用redirectTo
小程序路由跳转的方式有五种,分别是wx.navigateTo(打开新页面,新页面入栈)、wx.redirectTo(重定向,当前页面出栈,新页面入栈)、wx.navigateBack(返回,页面不断出栈,直到目标返回页)、wx.switchTab(切换tab页面,页面全部出栈,只留下新的 Tab 页面)、wx.reLaunch(页面全部出栈,只留下新的页面)由此产生了第一种方式,当页面栈超过 10 时,直接用redirectTo。但这样太粗暴了,显然很多场景是需要保留访问过的页面的,由此有了方案一的升级版。
方案一升级版:根据页面栈决定当前跳转方式
每次跳转先去页面栈中查找目标页面是否已经访问过,如果访问过则用wx.navigateBack返回,如果没有访问过则判断页面栈中是否已经有10个页面,有则用wx.redirectTo,没有则navigateTo
class RouteMap {constructor(opt={}) {this.MAX_DEEP = opt.MAX_DEEP || 10this.IS_AUTO_BACK = opt.IS_AUTO_BACK || truethis.PAGE_STACk = getCurrentPages()}_findPageInHistory(path) {const { PAGE_STACk } = thislet delta = -1for (let i = 0; i < PAGE_STACk.length; i++) {if (PAGE_STACk[i].route === path) {delta = i + 1 // 目标页在栈中的位置break}}return delta}_dataToUrlQuery(data={}) {let query = '?';const prop in data) {if (data.hasOwnProperty(prop)) {const value = data[prop];query += `${prop}=${value}&`}}return query.replace(/&$/,'');}goPage(opt) {if (!opt) return new Error('缺少参数')if (opt && !opt.path) '缺少跳转目标path')const pageStackLen = PAGE_STACk.lengthlet { path,data } = optlet delta = this._findPageInHistory(path)path = '/' + path.replace(/^\//,0);">'') + this._dataToUrlQuery(data)if (delta > -1 && this.IS_AUTO_BACK) {// 如果有目标页已经是被访问过的const backPage = PAGE_STACk[pageStackLen - delta]backPage.setData({data});wx.navigateBack({delta: pageStackLen - delta})} else {if (pageStackLen < this.MAX_DEEP) {wx.navigateTo({url: path})} else {wx.redirectTo({url: path})}}}}module.exports = RouteMap
但是这样依然有问题,页面传参数变得无法统一,而且明明是前进页面,用户使用的时候很可能看着就是返回了几个页面。
方案二:在小程序页面栈之外维护多一个自己的逻辑栈
详细细节见该博客