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

微信小程序 頁面跳轉和數(shù)據(jù)傳遞

1.先導

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

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

分析：

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

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

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)

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

示例代碼：

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

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

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

（2）wx.redirectTo(OBJECT)

關閉當前頁面，跳轉到應用內(nèi)的某個頁面。

示例代碼：

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

（3）wx.switchTab(OBJECT)

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

OBJECT 參數(shù)說明：

示例代碼：

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

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

（4）wx.navigateBack(OBJECT)

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

OBJECT 參數(shù)說明：

示例代碼：

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

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

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

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

（5）使用標簽實現(xiàn)頁面跳轉

navigator

頁面鏈接。

示例代碼：

跳轉到新頁面
 在當前頁打開
 切換 Tab

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

（1）頁面的路由

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

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

4.參數(shù)傳遞

（1）通過路徑傳遞參數(shù)

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

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

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

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

test?id=1 中id為參數(shù)鍵，1 為參數(shù)值

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

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

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