這篇文章主要介紹了微信小程序中如何實現頁面跳轉和數據傳遞，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

目前創新互聯已為近千家的企業提供了網站建設、域名、雅安服務器托管、網站托管維護、企業網站設計、黎城網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協力一起成長，共同發展。

微信小程序 頁面跳轉和數據傳遞

1.先導

在Android中，我們Activity和Fragment都有棧的概念在里面，微信小程序頁面也有棧的概念在里面。微信小程序頁面跳轉有四種方式：

1.wx.navigateTo(OBJECT)；
2.wx.redirectTo(OBJECT)；
3.wx.switchTab(OBJECT)；
4.wx.navigateBack(OBJECT)
5.使用實現對應的跳轉功能；

分析：

1. 其中navigateTo是將原來的頁面保存在頁面棧中，在跳入到下一個頁面的時候目標頁面也進棧，只有在這個情況下點擊手機的返回按鈕才可以跳轉到上一個頁面；

2. redirectTo和switchTab都是先清除棧中原來的頁面，然后目標頁面進棧，使用這兩種跳轉方式，都不能通過系統的返回鍵回到上一個頁面，而是直接退出小程序；

3. redirectTo使用的時候一定要配合tabBar或是頁面里面可以再次跳轉按鈕，否則無法回到上一個頁面；

4. switchTab跳轉的頁面必須是tabBar中聲明的頁面；

5. tabBar中定義的字段不能超過5個頁面，小程序的頁面棧層次也不能超過5層。

6. navigateBack只能返回到頁面棧中的指定頁面，一般和navigateTo配合使用。

7. wx.navigateTo 和 wx.redirectTo 不允許跳轉到 tabbar 頁面，只能用 wx.switchTab 跳轉到 tabbar 頁面

2.頁面跳轉的具體操作

(1)wx.navigateTo(OBJECT)

保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。

參數	類型	必填	說明
url	String	是	需要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；如 ‘path?key=value&key2=value2'
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

示例代碼：

wx.navigateTo({
 url: 'test?id=1'//實際路徑要寫全
})

//test.js
Page({
 onLoad: function(option){
 console.log(option.query) 
 }
})

注意：為了不讓用戶在使用小程序時造成困擾，我們規定頁面路徑只能是五層，請盡量避免多層級的交互方式。

（2）wx.redirectTo(OBJECT)

關閉當前頁面，跳轉到應用內的某個頁面。

參數	類型	必填	說明
url	String	是	需要跳轉的應用內非 tabBar 的頁面的路徑，路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；如 ‘path?key=value&key2=value2'
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

示例代碼：

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

（3）wx.switchTab(OBJECT)

跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面

OBJECT 參數說明：

參數	類型	必填	說明
url	String	是	需要跳轉的 tabBar 頁面的路徑（需在 app.json 的 tabBar 字段定義的頁面），路徑后不能帶參數
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

示例代碼：

{
 "tabBar": {
 "list": [{
  "pagePath": "index",
  "text": "首頁"
 },{
  "pagePath": "other",
  "text": "其他"
 }]
 }
}

wx.switchTab({
 url: '/index'
})

（4）wx.navigateBack(OBJECT)

關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages()) 獲取當前的頁面棧，決定需要返回幾層。

OBJECT 參數說明：

參數	類型	必填	說明
delta	Number	1	返回的頁面數，如果 delta 大于現有頁面數，則返回到首頁。

示例代碼：

// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼

// 此處是A頁面
wx.navigateTo({
 url: 'B?id=1'
})

// 此處是B頁面
wx.navigateTo({
 url: 'C?id=1'
})

// 在C頁面內 navigateBack，將返回A頁面
wx.navigateBack({
 delta: 2
})

（5）使用<navigator/>標簽實現頁面跳轉

navigator

頁面鏈接。

參數	類型	必填	說明
url	String		應用內的跳轉鏈接
redirect	Boolean	false	打開方式為頁面重定向，對應 wx.redirectTo（將被廢棄，推薦使用 open-type）
open-type	String	navigate	可選值 ‘navigate'、'redirect'、'switchTab'，對應于wx.navigateTo、wx.redirectTo、wx.switchTab的功能
hover-class	String	navigator-hover	指定點擊時的樣式類，當hover-class=”none”時，沒有點擊態效果
hover-start-time	Number	50	按住后多久出現點擊態，單位毫秒
hover-stay-time	Number	600	手指松開后點擊態保留時間，單位毫秒

示例代碼：

<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator>
 <navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當前頁打開</navigator>
 <navigator url="index" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator>

3.頁面的路由和生命周期

（1）頁面的路由

在小程序中所有頁面的路由全部由框架進行管理，對于路由的觸發方式以及頁面生命周期函數如下：

路由方式	觸發時機	路由后頁面	路由前頁面
初始化	小程序打開的第一個頁面	onLoad，onShow
打開新頁面	調用 API wx.navigateTo 或使用組件	onLoad，onShow	onHide
頁面重定向	調用 API wx.redirectTo 或使用組件	onLoad，onShow	onUnload
頁面返回	調用 API wx.navigateBack 或用戶按左上角返回按鈕	onShow	onUnload（多層頁面返回每個頁面都會按順序觸發onUnload）
Tab 切換	調用 API wx.switchTab 或使用組件 或用戶切換 Tab	各種情況請參考下表

Tab 切換對應的生命周期（以 A、B 頁面為 Tabbar 頁面，C 是從 A 頁面打開的頁面，D 頁面是從 C 頁面打開的頁面為例）：

當前頁面	路由后頁面	觸發的生命周期（按順序）
A	A	Nothing happend
A	B	A.onHide(), B.onLoad(), B.onShow()
A	B（再次打開）	A.onHide(), B.onShow()
C	A	C.onUnload(), A.onShow(）
C	B	C.onUnload(), B.onLoad(), B.onShow()
D	B	D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D（從分享進入）	A	D.onUnload(), A.onLoad(), A.onShow()
D（從分享進入）	B	D.onUnload(), B.onLoad(), B.onShow()

4.參數傳遞

（1）通過路徑傳遞參數

通過路徑傳遞參數在wx.navigateTo(OBJECT)、wx.redirectTo(OBJECT)和<navigator/>中使用方法相同
示例代碼：以wx.navigateTo為代表

```
wx.navigateTo({
 url: 'test?id=1'//實際路徑要寫全
})

//test.js
Page({
 onLoad: function(option){
 console.log(option.id) 
 }
})

參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；

test?id=1 中id為參數鍵，1 為參數值

在目的頁面中onLoad（）方法中option對象即為參數對象，可以通過參數鍵來取出參數值

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序中如何實現頁面跳轉和數據傳遞”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯建站，關注創新互聯網站建設公司行業資訊頻道，更多相關知識等著你來學習!

另外有需要云服務器可以了解下創新互聯建站vcdvsql.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前標題：微信小程序中如何實現頁面跳轉和數據傳遞-創新互聯
網站路徑：http://vcdvsql.cn/article6/cschog.html

成都網站建設公司_創新互聯，為您提供企業網站制作、營銷型網站建設、網站收錄、網站排名、虛擬主機、App開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯