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

創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡(luò)營(yíng)銷推廣、網(wǎng)站重做改版、伊春網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為伊春等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

1.先導(dǎo)

在Android中，我們Activity和Fragment都有棧的概念在里面，微信小程序頁面也有棧的概念在里面。微信小程序頁面跳轉(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是將原來的頁面保存在頁面棧中，在跳入到下一個(gè)頁面的時(shí)候目標(biāo)頁面也進(jìn)棧，只有在這個(gè)情況下點(diǎn)擊手機(jī)的返回按鈕才可以跳轉(zhuǎn)到上一個(gè)頁面；

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

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

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

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

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

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

   
   

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

(1)wx.navigateTo(OBJECT)

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

參數(shù)	類型	必填	說明
url	String	是	需要跳轉(zhuǎn)的應(yīng)用內(nèi)非 tabBar 的頁面的路徑 , 路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；如 ‘path?key=value&key2=value2'
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

示例代碼：

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

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

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

（2）wx.redirectTo(OBJECT)

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

參數(shù)	類型	必填	說明
url	String	是	需要跳轉(zhuǎn)的應(yīng)用內(nèi)非 tabBar 的頁面的路徑，路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；如 ‘path?key=value&key2=value2'
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

示例代碼：

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

（3）wx.switchTab(OBJECT)

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

OBJECT 參數(shù)說明：

參數(shù)	類型	必填	說明
url	String	是	需要跳轉(zhuǎn)的 tabBar 頁面的路徑（需在 app.json 的 tabBar 字段定義的頁面），路徑后不能帶參數(shù)
success	Function	否	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

示例代碼：

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

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

（4）wx.navigateBack(OBJECT)

關(guān)閉當(dāng)前頁面，返回上一頁面或多級(jí)頁面?？赏ㄟ^ getCurrentPages()) 獲取當(dāng)前的頁面棧，決定需要返回幾層。

OBJECT 參數(shù)說明：

參數(shù)	類型	必填	說明
delta	Number	1	返回的頁面數(shù)，如果 delta 大于現(xiàn)有頁面數(shù)，則返回到首頁。

示例代碼：

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

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

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

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

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

navigator

頁面鏈接。

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

示例代碼：

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

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

（1）頁面的路由

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

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

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

當(dāng)前頁面	路由后頁面	觸發(fā)的生命周期（按順序）
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（從分享進(jìn)入）	A	D.onUnload(), A.onLoad(), A.onShow()
D（從分享進(jìn)入）	B	D.onUnload(), B.onLoad(), B.onShow()

4.參數(shù)傳遞

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

通過路徑傳遞參數(shù)在wx.navigateTo(OBJECT)、wx.redirectTo(OBJECT)和<navigator/>中使用方法相同
示例代碼：以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ù)值

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

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

當(dāng)前名稱：微信小程序中頁面跳轉(zhuǎn)和數(shù)據(jù)傳遞的方法-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://chinadenli.net/article25/doedci.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)、網(wǎng)站營(yíng)銷、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)