小程序跳坑 --- navigator 和 API中wx.系列的跳轉(如 wx.navigateTo、wx.reLaunch等)

    工作之余，想着幫老媽開發個小程序，一是宣傳一下她的業務，二是學習使用一下微信小程序的開發，哈哈。在此過程中遇到了navigator跳轉的問題，最終還是成功解決了，下面就記錄下來，並做個系列總結以作記錄分享，話不多說，下邊進入正題😝 ~

 

 我的需求：     點擊地址區域，跳轉至地址頁。

 遇到的問題： 點擊之后不跳轉。

 

contact.wxml 中：

<view style="margin-top:26rpx;height:100rpx;">
        <text class="contact">地址:</text>
        <a class="contact-num" href="javascript:void(0);" bindtap="map">地址BLABLA</a>
</view>

 

contact.js 中：

 map: function () {
        wx.navigateTo({
            url:'../address/address'
        })
  }

 

contact.js 更改后：

 map: function () {
        wx.switchTab({
            url:'../address/address'
        })
 }

　

   入坑結論：　navigateTo跳轉鏈接不生效？ 若想在跳轉鏈接中使用 TabBar中的list項的配置pagePath，要使用 wx.switchTab。

 

下邊我總結了navigator 和 各種跳轉API的區別：

<navigator url="../index/index">點擊跳轉不關閉當前頁面</navigator>

<navigator url="../logs/logs" redirect="true" >點擊跳轉關閉當前頁面</navigator>

 

• wx.navigateTo  用於保留當前頁面、跳轉到應用內的某個頁面，使用 wx.navigateBack可以返回到原頁面。對於頁面不是特別多的小程序，通常推薦使用 wx.navigateTo進行跳轉， 以便返回原頁面，以提高加載速度。當頁面特別多時，則不推薦使用。

 

• wx.redirectTo  當頁面過多時，被保留頁面會擠占微信分配給小程序的內存，或是達到微信所限制的 5 層頁面棧。這時，我們應該考慮選擇 wx.redirectTo。wx.redirectTo()用於關閉當前頁面，跳轉到應用內的某個頁面。這樣的跳轉，可以避免跳轉前頁面占據運行內存，但返回時頁面需要重新加載，增加了返回頁面的顯示時間。

 

• wx.reLaunch   wx.reLaunch()與 wx.redirectTo()的用途基本相同， 只是 wx.reLaunch()先關閉了內存中所有保留的頁面，再跳轉到目標頁面。

 

• wx.switchTab  對於跳轉到 tab bar 的頁面，最好選擇 wx.switchTab()，它會先關閉所有非 tab bar 的頁面。其次，也可以選擇 wx.reLaunch()，它也能實現從非 tab bar 跳轉到 tab bar，或在 tab bar 間跳轉，效果等同 wx.switchTab()。使用其他跳轉 API 來跳轉到 tab bar，則會跳轉失敗。

 

• wx.navigateBack  用於關閉當前頁面，並返回上一頁面或多級頁面。開發者可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。這個 API 需要填寫的參數只有 delta，表示要返回的頁面數。若 delta 的取值大於現有可返回頁面數時，則返回到用戶進入小程序的第一個頁面。當不填寫 delta 的值時，就默認其為 1（注意，默認並非取 0），即返回上一頁面。

 如若有誤，歡迎指正哦~ 😘