微信小程序系列3——頁面跳轉詳解

前言

  首先，微信頁面跳轉的是一個頁面棧進棧出棧的過程，也可以簡單的理解對頁面跳轉的操作就是一個棧的操作。

微信小程序主要一下兩類樣式的跳轉（JS、WXML控件）：

JS控制的跳轉：

• navigation 棧的形式（導航欄）
• tabBar 標籤欄
• 其他

WXML模板內控件控制的跳轉方法

• navigator

一、navigation頁面跳轉

1.wx.navigateTo({ url: ‘pageA’ })

navigateTo方式 跳轉的應用內非 tabBar 的頁面的路徑，頁面之間不能像IOS或者Android對頁面進行賦值進行傳遞對象，只能像Web的URL地址一樣，在路徑後可以帶參數。

1）參數和路徑之間使用？分隔，參數鍵與參數值用=相連。

wx.navigateTo({
  url: 'pageA?id=1'
})

2）不同參數用&分隔

wx.navigateTo({
  url: 'pageA?id=1&token=222'
})

navigateTo的導航欄默認有返回按鈕，返回到上一個頁面。

2.wx.navigateBack({})

navigateBack和navigateTo是一對，navigateTo是頁面進棧操作，navigateBack是頁面出棧操作。navigateBack默認返回到上一級頁面（內部參數：delta：1）。

參數	類型	默認值	描述
delta	Number	1	返回的頁面數；如果delta大於現在頁面，則頁面棧的第一個頁面

// 此處是A頁面    
wx.navigateTo({
  url: 'B'
})
 
// 此處是B頁面
wx.navigateTo({
  url: 'C'
})
 
// 在C頁面內 navigateBack，將返回A頁面
wx.navigateBack({
  delta: 2
	// delta > 2 都會返回A頁面    A頁面之前沒有navigate的頁面
})

二、tabBar頁面跳轉

tabBar中的頁面需要在app.json中配置，tabBar頁面最少2頁面，最多5個頁面。tabBar之間的跳轉採用wx.switchTab({ url: ‘’ })的方式，默認情況下tabBar之間的頁面跳轉，只需要點擊tabBar上對應的控件就可以相互跳轉。（注：tabBar之間的跳轉，路徑後不能帶參數）

wx.switchTab({
      url: 'switchA',
  })

tabBar上的頁面的跳轉只能採用switchTab的方式。其他頁面跳轉到tabBar上也必須採用switchTab的方式跳轉。

三、其他頁面跳轉

1.wx.redirectTo({url: ‘’})（跳轉的下一個頁面，存在默認返回按鈕）

redirectTo跳轉非tabBar頁面的路徑，路徑後可以帶參數。（帶參數可以參考：navigateTo）

wx.redirectTo({
  url: 'redirectA?id=1'
})

跳轉下一個頁面默認有返回按鈕，返回到上一個頁面的再上一層。

2.wx.reLaunch({url: ‘’})（跳轉的下一個頁面，有一個返回首頁的按鈕）

redirectTo跳轉非tabBar頁面的路徑，路徑後可以帶參數。（帶參數可以參考：navigateTo）

wx.reLaunch({
  url: 'reLaunchA?id=1'
})

跳轉下一個頁面默認有返回首頁，返回到首頁。（頁面棧的第一個頁面）

四、navigator組件—頁面跳轉（WXML內組件，其他的都是JS中操作）

navigator作爲一個跳轉的WXML模板中的控件，其他幾種的操作都是在JS中的操作。下邊詳細介紹navigator控件的屬性和使用說明

屬性	類型	默認值	描述說明
target	String	當前小程序	在哪個目標程序上發生跳轉，默認當前小程序
url	String		當前小程序內的跳轉鏈接 （後面可以攜帶參數，除switchTab之外）
open-type	String	navigate	跳轉方式
delta	Number		當 open-type 爲 ‘navigateBack’ 時有效，表示回退的層數
app-id	String		當target="miniProgram"時有效，要打開的小程序 appId
path	String		當target="miniProgram"時有效，打開的頁面路徑，如果爲空則打開首頁
extra-data	Object		當target="miniProgram"時有效，需要傳遞給目標小程序的數據，目標小程序可在 App.onLaunch()，App.onShow() 中獲取到這份數據。
version	version	release	當target="miniProgram"時有效，要打開的小程序版本，有效值 develop（開發版），trial（體驗版），release（正式版），僅在當前小程序爲開發版或體驗版時此參數有效；如果當前小程序是正式版，則打開的小程序必定是正式版。
hover-class	String	navigator-hover	指定點擊時的樣式類，當hover-class="none"時，沒有點擊態效果
hover-stop-propagation	Boolean	false	指定是否阻止本節點的祖先節點出現點擊態
hover-start-time	Number	50	按住後多久出現點擊態，單位毫秒
hover-stay-time	Number	600	手指鬆開後點擊態保留時間，單位毫秒
bindsuccess	String		當target="miniProgram"時有效，跳轉小程序成功
binderror	String		當target="miniProgram"時有效，跳轉小程序失敗
bindcomplete	String		當target="miniProgram"時有效，跳轉小程序完成

target 的合法值

target值	描述說明
self	當前小程序
miniProgram	其它小程序

open-type 的合法值：

open-type值	描述說明
navigate	對應 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect	對應 wx.redirectTo 的功能
switchTab	對應 wx.switchTab 的功能
reLaunch	對應 wx.reLaunch 的功能
navigateBack	對應 wx.navigateBack 的功能
exit	退出小程序，target="miniProgram"時生效

version 的合法值

值	說明
develop	開發版
trial	體驗版
release	正式版，僅在當前小程序爲開發版或體驗版時此參數有效；如果當前小程序是正式版，則打開的小程序必定是正式版。

下面是navigator的例子：

<!-- sample.wxml -->
<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當前頁打開</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打開綁定的小程序</navigator>
</view>

微信小程序頁面跳轉的功能基本就這些內容，微信小程序頁面跳轉方式和Android、iOS的方式非常相似之處，可以相互結合理解。

本文章的內容參考自《微信官方文檔》

持續更新中……