微信小程序路由跳转失败——不能使用wx.navigateTo跳转到tabBar定义的页面
程序员文章站
2022-06-01 22:21:53
...
背景
在编写微信小程序的时候,遇到了跳转页面部分失灵的问题。使用了一个weUI自带的msg页面如下, wxml
如下:
<view class="page">
<view class="weui-msg">
<view class="weui-msg__icon-area">
<icon type="waiting" size="93"></icon>
</view>
<view class="weui-msg__text-area">
<view class="weui-msg__title">提交成功,请等待审核</view>
<view class="weui-msg__desc">审核成功后会得到相应的消息通知。</view>
</view>
<view class="weui-msg__opr-area">
<view class="weui-btn-area">
<button class="weui-btn" type="primary" bindtap="backToHost">回到主页面</button>
<button class="weui-btn" type="default" bindtap="backToMine">查看我的信息</button>
</view>
</view>
</view>
</view>
期望通过两个bindtap
事件,在提交成功后可以分别回到主页面,或者查看我的信息,在.js
文件中使用了wx.navigateTo
方法,但一直无法成功跳转。
附.js
文件如下:
Page({
backToHost(){
wx.navigateTo({
url: '/pages/host/host',
})
},
backToMine() {
wx.navigateTo({
url: '/pages/mine/mine',
})
}
});
后来通过查阅微信公众平台相关资料后发现,微信小程序对于路由提供了多种方式,但也对不同的路由方式做了限制。
注意如下
- ·
navigateTo
,redirectTo
只能打开非 tabBar 页面。 -
switchTab
只能打开 tabBar 页面。 -
reLaunch
可以打开任意页面。
因为在我的小程序中主页面
和我的信息
页面分别是两个Tab页,所以无法通过调用wx.navigateTo
实现页面跳转,而应该使用wx.switchTab
。至此,将.js
文件中的wx.navigateTo
方法改为wx.switchTab
,路由跳转成功。
如下:
...
wx.switchTab({
url: '/pages/mine/mine',
})
...
附微信官方路由的触发方式及页面的生命周期函数:
路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
---|---|---|---|
初始化 | 小程序打开的第一个页面 | onLoad, onShow | |
打开新页面 | 调用 API wx.navigateTo 或使用组件 <navigator open-type=”navigateTo”/> | onHide | onLoad, onShow |
页面重定向 | 调用 API wx.redirectTo 或使用组件 <navigator open-type=”redirectTo”/> | onUnload | onLoad, onShow |
页面返回 | 调用 API wx.navigateBack 或使用组件<navigator open-type=”navigateBack”>或用户按左上角返回按钮 | onUnload | onShow |
Tab 切换 | 调用 API wx.switchTab 或使用组件<navigator open-type=”switchTab”/> 或用户切换 Tab | ||
重启动 | 调用 API wx.reLaunch 或使用组件 <navigator open-type=”reLaunch”> | onUnload | onLoad, onShow |
更多详情请参见微信公众平台官网
路由:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html
上一篇: 小程序底部tabBar的使用
下一篇: 怎样使用vue实现2048小游戏