微信小程序跳轉函數總結

​ 筆者在微信小程序前端的開發過程中，在不同的情況下遇到了需要使用不同的頁面跳轉邏輯的情況，以下是我對這些函數的使用場景的一個總結介紹。

wx.navigateTo

這是最常用也是最基本的一個頁面跳轉函數，該函數跳轉之前會先保留當前頁面指針，然后跳轉到目標頁面。因此使用該跳轉函數跳轉到的頁面也都可以回退到上一個頁面。示例如下：

//保留當前頁面，跳轉到指定頁面
wx.navigateTo({
  url: 'page/des/des'   // 目的頁面url
})

wx.redictTo

上面提到，利用wx.navigateTo跳轉到的頁面均可以返回的上機頁面，當我們不希望用戶在跳轉以后再次返回到當前頁面，那么我們就需要在跳轉前把當前的頁面給關閉掉，wx.redictTo則實現了這個功能，通過該函數進行跳轉到的目的頁面，將無法返回到它的父級頁面。（注意：如果目的頁面父級頁面是由它父級頁面通過wx.navigateTo跳轉而來的話，那么目的頁面返回上一層的話，將會返回到其父級頁面的父級頁面。）代碼示例如下：

// 關閉當前頁面，跳轉到目的頁面
wx.redirectTo({
  url: 'page/des/des'  //目的頁面url
})

wx.reLanch

wx.redictTo只能關閉當前層的頁面，如果我們需要在跳轉時關閉其所有父級的頁面話，就需要從父級到當前，每一級的跳轉都用wx.redictTo。而且如果我們只希望在當前層關閉所有頁面，那么僅僅使用wx.redictTo就會很不方便，wx.reLanch及實現了關閉所有頁面以后的跳轉功能，代碼示例如下：

// 關閉所有頁面，跳轉到目的頁面
wx.reLanch({
  url: 'page/home/home' //目的頁面url
})

wx.navigateBack

該函數為頁面回退函數，我們在實際使用的過程中不僅僅是需要跳轉到新的頁面，當用戶完成一些操作以后我們可能需要自動返回到上級頁面來增加用戶的體驗。navigateBack與navigateTo相對應，即利用navigateTo保存的頁面指針來實現跳轉操作。具體示例如下:

//假設我們從頁面A 跳轉到頁面B 在跳轉到頁面C.

wx.navigateTo({
  url: 'page/A/A　　// 頁面 A
})
wx.navigateTo({
  url: 'page/B/B'　　// 頁面 B
})
wx.navigateTo({
  url: 'page/C/C'　　// 頁面 C
})
//接下來進行回退
//delta 返回的頁面數，如果 delta 大於現有頁面數，則返回到首頁。
//如果想回退到頁面A,則delta 為 3 即返回三個頁面
wx.navigateBack({
  delta: 2
})

文章參考

• https://developers.weixin.qq.com/miniprogram/dev/api/