您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)微信小程序開發(fā)路由的使用方法的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
我們通常理解的路由指分組數(shù)據(jù)包從源到目的地時,決定端到端路徑的網(wǎng)絡(luò)范圍的進(jìn)程;
借用上面的定義,我們可以理解小程序頁面路由,根據(jù)路由規(guī)則(路徑)從一個頁面跳轉(zhuǎn)到另一個頁面的的規(guī)則。
通過本篇文章,你可以學(xué)習(xí)到:
哪些情況會觸發(fā)頁面跳轉(zhuǎn)
如何跳轉(zhuǎn)頁面
頁面?zhèn)鲄?/p>
頁面棧
小程序啟動,初始化第一個頁面
打開新頁面,調(diào)用 API wx.navigateTo 或使用組件 <navigator />
頁面重定向,調(diào)用 API wx.redirectTo 或使用組件 <navigator />
頁面返回,調(diào)用 API wx.navigateBack或用戶按左上角返回按鈕
tarbar切換
所有頁面都必須在app.json中注冊,例如:
{ "pages": [ "pages/index/index", "pages/logs/index" ] }
使用wx.navigateTo接口跳轉(zhuǎn),原頁面保留。
wx.navigateTo({ //目的頁面地址 url: 'pages/logs/index', success: function(res){}, ... })
使用wx.redirectTo接口跳轉(zhuǎn),關(guān)閉原頁面,不能返回。
wx.redirectTo({ //目的頁面地址 url: 'pages/logs/index', success: function(res){}, ... })
3.使用組件<navigator />跳轉(zhuǎn)。
<navigator url="pages/logs/index" hover-class="navigator-hover">跳轉(zhuǎn)</navigator>
當(dāng)該組件添加redirect屬性時,等同于wx.redirectTo接口;默認(rèn)redirect屬性為false,等同于wx.navigateTo接口。
用戶點擊左上角返回按鈕,或調(diào)用wx.navigateBack接口返回上一頁。
wx.navigateBack({ delta: 1 })
delta為1時表示返回上一頁,為2時表示上上一頁,以此類推;如果dalta大于已打開的頁面總數(shù),則返回到首頁。返回后,元界面會銷毀。
其實這個很簡單,形如:
url?key=value&key1=value1
經(jīng)過測試,傳遞的參數(shù)沒有被URIEncode,傳遞中文沒有亂碼。參數(shù)長度未測試。
官方規(guī)定小程序最多只能有五個頁面同時存在,意思是在不關(guān)閉頁面的情況,最多新開五個頁面,頁面深度為5。
對于可逆操作,使用wx.navigateTo,比如從首頁跳轉(zhuǎn)到二級頁面,從二級頁面返回是不需要重新渲染首頁
對于不可逆操作,使用wx.redirectTo,比如用戶登錄成功后,關(guān)閉登錄頁面,不能返回到登錄界面。
對于一些介紹性等不常用頁面wx.redirectTo或wx.navigatrBack
對于類似九宮格、列表項,使用<navigator />跳轉(zhuǎn)
不要在首頁使用wx.redirectTo,這樣會導(dǎo)致應(yīng)用無法返回首頁
簡化需求、簡化流程;核心功能在兩三個頁面完成便是張小龍追求『小而美』的體現(xiàn)
頁面棧以棧(先進(jìn)后出)的形式維護頁面與頁面之間的關(guān)系;
小程序提供了getCurrentPages()函數(shù)獲取頁面棧,第一個元素為首頁,最后一個元素為當(dāng)前頁面。
使用wx.navigateTo每新開一個頁面,頁面棧大小加1,直到頁面棧大小為5為止;
使用wx.navigateTo重復(fù)打開界面
上圖中,假如使用wx.navigateTo從四級頁面跳轉(zhuǎn)到二級頁面,此時會在頁面棧頂添加一個與二級頁面初始狀態(tài)一樣的界面,但兩個頁面狀態(tài)是獨立的。頁面棧大小會加1,如果頁面棧大小為5,則wx.navigateTo無效
使用wx.redirectTo重定向
上圖中,假如使用wx.redirectTo從四級頁面重定向到二級頁面,此時會將關(guān)閉四級頁面,并使用二級頁面替換四級頁面,但兩個頁面狀態(tài)是獨立的。此時的頁面棧大小不變,請注意和使用wx.navigateTo的區(qū)別。
使用wx.navigateBack返回
上圖中,假如當(dāng)前頁面為五級頁面,使用wx.navigateBack:
當(dāng)delta為1,關(guān)閉五級頁面,當(dāng)前頁面為四級頁面,頁面棧大小減1;
當(dāng)delta為2,關(guān)閉依次五級頁面和四級頁面,當(dāng)前頁面為三級頁面,頁面棧大小減2;
以此類推,直到棧底為止,也就是首頁。
感謝各位的閱讀!關(guān)于“微信小程序開發(fā)路由的使用方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。