這篇文章給大家分享的是有關(guān)微信小程序中頁(yè)面跳轉(zhuǎn)和數(shù)據(jù)傳遞的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)華池免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了近1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

微信小程序 頁(yè)面跳轉(zhuǎn)和數(shù)據(jù)傳遞

1.先導(dǎo)

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

1.wx.navigateTo(OBJECT)；
2.wx.redirectTo(OBJECT)；
3.wx.switchTab(OBJECT)；
4.wx.navigateBack(OBJECT)
5.使用實(shí)現(xiàn)對(duì)應(yīng)的跳轉(zhuǎn)功能；

分析：

1. 其中navigateTo是將原來的頁(yè)面保存在頁(yè)面棧中，在跳入到下一個(gè)頁(yè)面的時(shí)候目標(biāo)頁(yè)面也進(jìn)棧，只有在這個(gè)情況下點(diǎn)擊手機(jī)的返回按鈕才可以跳轉(zhuǎn)到上一個(gè)頁(yè)面；

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

3. redirectTo使用的時(shí)候一定要配合tabBar或是頁(yè)面里面可以再次跳轉(zhuǎn)按鈕，否則無法回到上一個(gè)頁(yè)面；

4. switchTab跳轉(zhuǎn)的頁(yè)面必須是tabBar中聲明的頁(yè)面；

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

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

7. wx.navigateTo 和 wx.redirectTo 不允許跳轉(zhuǎn)到 tabbar 頁(yè)面，只能用 wx.switchTab 跳轉(zhuǎn)到 tabbar 頁(yè)面

2.頁(yè)面跳轉(zhuǎn)的具體操作

(1)wx.navigateTo(OBJECT)

保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，使用wx.navigateBack可以返回到原頁(yè)面。

示例代碼：

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

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

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

（2）wx.redirectTo(OBJECT)

關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。

示例代碼：

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

（3）wx.switchTab(OBJECT)

跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面

OBJECT 參數(shù)說明：

示例代碼：

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

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

（4）wx.navigateBack(OBJECT)

關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面。可通過 getCurrentPages()) 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層。

OBJECT 參數(shù)說明：

示例代碼：

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

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

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

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

（5）使用標(biāo)簽實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

navigator

頁(yè)面鏈接。

示例代碼：

跳轉(zhuǎn)到新頁(yè)面
 在當(dāng)前頁(yè)打開
 切換 Tab

3.頁(yè)面的路由和生命周期

（1）頁(yè)面的路由

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

Tab 切換對(duì)應(yīng)的生命周期（以 A、B 頁(yè)面為 Tabbar 頁(yè)面，C 是從 A 頁(yè)面打開的頁(yè)面，D 頁(yè)面是從 C 頁(yè)面打開的頁(yè)面為例）：

4.參數(shù)傳遞

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

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

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

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

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

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

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

感謝各位的閱讀！關(guān)于“微信小程序中頁(yè)面跳轉(zhuǎn)和數(shù)據(jù)傳遞的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！