亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

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

來源：Bri0117 發(fā)布時(shí)間：2019-04-10 15:29:43 閱讀量：1307

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í)行）

示例代碼：

?

1

2

3

wx.navigateTo({

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

})

?

1

2

3

4

5

6

//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í)行）

示例代碼：

?

1

2

3

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í)行）

示例代碼：

?

1

2

3

4

5

6

7

8

9

10

11

{

"tabBar": {

"list": [{

"pagePath":"index",

"text":"首頁"

},{

"pagePath":"other",

"text":"其他"

}]

}

}

?

1

2

3

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ù)，則返回到首頁。

示例代碼：

?

1

2

3

4

5

6

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

// 此處是A頁面

wx.navigateTo({

url:'B?id=1'

})

?

1

2

3

4

// 此處是B頁面

wx.navigateTo({

url:'C?id=1'

})

?

1

2

3

4

// 在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í)間，單位毫秒

示例代碼：

?

1

2

3

<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為代表

?

1

2

3

4

```

wx.navigateTo({

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

})

?

1

2

3

4

5

6

//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ù)值

 


標(biāo)簽： 環(huán)境搭建 小程序
分享：
評(píng)論：
你還沒有登錄，請(qǐng)先

熱門文章

    推薦文章