背景
在編寫微信小程序的時候,遇到了跳轉頁面部分失靈的問題。使用了一個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