中山市原創(chuàng)動(dòng)力網(wǎng)絡(luò)科技有限公司
創(chuàng)您所想與您同在
免費(fèi)互聯(lián)網(wǎng)品牌營(yíng)銷咨詢服務(wù)
立刻咨詢
13450931319來源：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ù)值
在線
客服
服務(wù)時(shí)間：周一至周日 08:30-18:00
選擇下列產(chǎn)品馬上在線溝通：
客服
熱線
7*24小時(shí)客服服務(wù)熱線
關(guān)注
微信
關(guān)注官方微信
微信登錄
QQ登錄
微博登錄
售前咨詢