微信小程序之頁面路由

小程序的路由可以理解為:根據路由規則(路徑)從一個頁面跳轉到另一個頁面的規則。

一、微信小程序中頁面跳轉的方法:

(1)wx.navigateTo(OBJECT)
保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。
示例代碼:

wx.navigateTo({
    url:'test?id=1'//實際路徑要寫全
})
//test.js
Page({
  onload:function(option){
    console.log(option.query)
  }
})

(2)wx.redirectTo(OBJECT)
關閉當前頁面,跳轉到應用的某個頁面。
示例代碼:

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

(3)wx.switchTab(OBJECT)
跳轉到tabBar頁面,并關閉其他所有非tabBar頁面
示例代碼:

{
  'tabBar': {
      'list': [{
        'pagePath':'index',
        'test':'首頁' 
      },{
        'pagePath':'other',
        'test':'其他'
      }]
  }
}
wx.switchTab({
  url:'/index'
})

(4)wx.navigateBack(OBJECT)
關閉當前頁面,返回上一頁面或多級頁面。可通過getCurrentPages()獲取當前的頁面棧,決定需要返回幾層。
示例代碼:

//注意:調用navigateTo跳轉時,調用該方法的頁面會被加入堆棧,而redirectTo方法則不會。
//此處是A頁面
wx.navigateTo({
  url:'B?id=1'
})
//此處是B頁面
wx.navigateTo({
    url:'C?id=1'
})
//在C頁面內navigateBack,將返回A頁面
wx.navigateBack({
    delta:2
}) 

(5)使用<navigator/>標簽實現頁面跳轉
可以用open-type屬性指定頁面跳轉方式,可選值‘navigate’、'redirect'、'switchTab',對應于wx.navigateTo、wx.redirectTo、wx.switchTab功能
示例代碼:

<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator>
<navigator url="navigate?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當前頁打開</navigator>
<navigator url="index" open-type="switchTab" hover-class="navigator-hover">切換</navigator>

二、如何正確使用頁面跳轉

官方規定小程序最多只能有五個頁面同時存在,意思是在不關閉頁面的情況下,最多新開五個頁面,頁面深度為5

  1. 對于可逆操作,使用wx.navigateTo,比如從首頁跳轉到二級頁面,從二級頁面返回是不需要重新渲染頁面
  2. 對于不可逆操作,使用wx.redirectTo,比如用戶登錄成功后,關閉登錄頁面,不能返回到登錄界面。
  3. 對于一些介紹性等不常用頁面,使用wx.redirectTo或wx.navigateBack
  4. 對于類似九宮格、列表項,使用<navigator />跳轉
  5. 不要在首頁使用wx.redirectTo,這樣會導致應用無法返回首頁
  6. 簡化需求、簡化流程;核心功能在兩三個頁面完成便是張小龍追求【小而美】的體現

三、頁面棧

頁面棧以棧(先進后出)的形式維護頁面與頁面之間的關系;
小程序提供了getCurrentPages()函數獲取頁面棧,第一個元素為首頁,最后一個元素為當前頁面。

1、使用wx.navigateTo每新開一個頁面,頁面棧大小加1,直到頁面棧大小為5為止;

2、使用wx.navigateTo重復打開頁面

上圖中,假如使用wx.navigateTo從四級頁面跳轉到二級頁面,此時會在頁面棧頂添加一個與二級頁面初始狀態一樣的界面,但兩個頁面狀態是獨立的。頁面棧大小會加1,如果頁面棧大小為5,則wx.navigateTo無效
使用wx.redirectTo重定向

3、使用wx.redirectTo重定向

上圖中,假如使用wx.redirectTo從四級頁面重定向到二級頁面,此時會將關閉四級頁面,并使用二級頁面替換四級頁面,但兩個頁面狀態是獨立的。此時的頁面棧大小不變,請注意和使用wx.navigateTo的區別。
使用wx.navigateBack返回

4、使用wx.navigateBack返回

上圖中,假如當前頁面為五級頁面,使用wx.navigateBack:
當delta為1,關閉五級頁面,當前頁面為四級頁面,頁面棧大小減1;
當delta為2,關閉依次五級頁面和四級頁面,當前頁面為三級頁面,頁面棧大小減2;
以此類推,直到棧底為止,也就是首頁。

總結

  • wx.navigateTo會增加頁面棧大小,直到頁面棧大小為5
  • wx.redirectTo不會增加頁面棧大小
  • wx.navigateBack會減少頁面棧大小,直到頁面棧大小為1

內容參考自:小程序基礎之頁面路由

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,002評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,400評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,136評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,714評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,452評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,818評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,812評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,997評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,552評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,292評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,510評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,035評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,721評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,121評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,429評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,235評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,480評論 2 379

推薦閱讀更多精彩內容