微信小程序跳轉函數總結

微信小程序跳轉函數總結

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

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/