为什么小程序的页面有二次跳转时会瞬间显示一下第一次的页面再跳转呢?
navigateTo redirectTo switchTab tabBar
先来看示例代码并且在微信开发者工具上测试
下面看示例代码共有三个页面,分别是index productshow cart
index的js与wxml
Page({
/*跳转到商品详情*/
toProductshow: function (event) {
//如果这里用navigateTo,跳转到详细页,然后详细页又跳转到购物车页面时,在跳转之前会瞬间显示一下首页,为什么会这样,看下面的说明
wx.navigateTo({
url: '../productshow/productshow?id=8'
})
//所以为了避免上面的问题,这里上面需要使用redirectTo
}
})
<view bindtap="toProductshow">
点击进入详细页面
</view>
productshow的js与wxml
Page({
/*跳转到购物车,注意跳转到tab栏目时需要使用switchTab*/
toCart:function(){
wx.switchTab({
url: '/pages/cart/cart'
});
}
})
<view bindtap="toCart">点击进入购物车</view>
cart的js与wxml
Page({
})
<view>
这里就是购物车了
</view>
下面是app.json的代码
{
"pages": [
"pages/index/index",
"pages/productshow/productshow",
"pages/cart/cart"
],
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "imgs/toolbar/index.png",
"selectedIconPath": "imgs/toolbar/index@selected.png",
"text": "主页"
},
{
"pagePath": "pages/cart/cart",
"iconPath": "imgs/toolbar/cart.png",
"selectedIconPath": "imgs/toolbar/cart@selected.png",
"text": "购物车"
}
]
}
}
经过测试发现在index页面点击进入productshow页时,然后再从productshow点击进入cart页面时,会在进入cart页面前瞬间显示一下index页面的内容,然后再进入cart页面?那么为什么会这样?看了开发者文档发现wx.navigateTo的解释是保留当前页面,跳转到应用内的某个页面,所以原因就出现这里,因为navigateTo在跳转之前就保留了index页面,所以会瞬间显示一下index页面的内容,当然这里并不是我们想要的结果,所以只能通过redirectTo来跳转,下面是路由的几个api说明
1、wx.navigateTo
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
2、wx.redirectTo
关闭当前页面,跳转到应用内的某个页面。
3、wx.switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
4、wx.navigateBack
关闭当前页面,返回上一页面或多级页面。可通过 [getCurrentPages()] 获取当前的页面栈,决定需要返回几层。
5、wx.reLaunch
关闭所有页面,打开到应用内的某个页面。