微信小程序之頁面路由

小程序頁面路由共有5個api,使用這些頁面路由首先你要到在小程序的主配置文件 app.json 里面配置你頁面的路徑材诽,這些頁面你可以放到pages目錄下闹瞧,也可以定義到pages目錄下子目錄的文件夾捎拯,例如pages/index/index滴铅。

{"pages": [

"pages/logs/index",

"pages/index/index",

"pages/user/index",

"pages/my/index"

]}

1.Tab 切換? wx.switchTab(Object object)

跳轉(zhuǎn)到 tabBar 頁面享扔,并關(guān)閉其他所有非 tabBar 頁面,這個api只能跳轉(zhuǎn)到底部導(dǎo)航設(shè)置的幾個頁面筋量,它是不能跳轉(zhuǎn)到其他單獨(dú)頁面的。


switchTab切換的頁面

代碼示例 (調(diào)用 API?wx.switchTab?或使用組件?<navigator open-type="switchTab"/>?或用戶切換 Tab)

底部導(dǎo)航的設(shè)置路徑是到app.json里面設(shè)置是

{

"tabBar":{

"list":[{

"pagePath":"page/tabBar/index/index",//路徑設(shè)置

"text":"首頁"

},{

"pagePath":"page/cart/cart",

"text":"購物車"

},{

"pagePath":"page/tabBar/userCenter/userCenter",

"text":"我的"

}]

}?

}

wx.switchTab({url:'/index'}) ;//跳轉(zhuǎn)到指定URL地址


2.打開新頁面?wx.navigateTo(Object object)

保留當(dāng)前頁面拯欧,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面详囤。但是不能跳到 tabbar 頁面。使用?wx.navigateBack?可以返回到原頁面镐作。小程序中頁面棧最多十層藏姐。


代碼示例 (調(diào)用 API?wx.navigateTo?或使用組件?<navigator open-type="navigateTo"/>

wx.navigateTo({

? url: 'test?id=1',

? events: {// 為指定事件添加一個監(jiān)聽器隆箩,獲取被打開頁面?zhèn)魉偷疆?dāng)前頁面的數(shù)據(jù)

? ? acceptDataFromOpenedPage: function(data) {

? ? ? console.log(data)

? ? },

? ? someEvent: function(data) {

? ? ? console.log(data)

? ? }

? ? ...

? },

? success: function(res) {

? ? // 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù)

? ? res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })

? }

})

在A頁面跳轉(zhuǎn)到B頁面,路由前頁面A路由為onHide生命周期羔杨,跳轉(zhuǎn)到B頁面路由onLoad, onShow生命周期


3.頁面重定向?wx.redirectTo(Object object)

關(guān)閉當(dāng)前頁面捌臊,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面问畅。

代碼示例 (調(diào)用 API?wx.redirectTo?或使用組件?<navigator open-type="redirectTo"/>)

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

在A頁面跳轉(zhuǎn)到B頁面娃属,路由前頁面A路由為onUnload生命周期,跳轉(zhuǎn)到B頁面路由onLoad, onShow生命周期


4.重啟動?wx.reLaunch(Object object)

關(guān)閉所有頁面护姆,打開到應(yīng)用內(nèi)的某個頁面

代碼示例 (調(diào)用 API?wx.reLaunch?或使用組件?<navigator open-type="reLaunch"/>)

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

在A頁面跳轉(zhuǎn)到B頁面矾端,路由前頁面A路由為onUnload生命周期,跳轉(zhuǎn)到B頁面路由onLoad, onShow生命周期


5.頁面返回?wx.navigateBack(Object object)

關(guān)閉當(dāng)前頁面卵皂,返回上一頁面或多級頁面秩铆。可通過?getCurrentPages?獲取當(dāng)前的頁面棧灯变,決定需要返回幾層殴玛。

// 注意:調(diào)用 navigateTo 跳轉(zhuǎn)時,調(diào)用該方法的頁面會被加入堆棧添祸,而 redirectTo 方法則不會滚粟。

代碼示例 (調(diào)用 API?wx.navigateBack?或使用組件<navigator open-type="navigateBack">或用戶按左上角返回按鈕)

// 此處是A頁面

wx.navigateTo({url:'B?id=1'})

// 此處是B頁面

wx.navigateTo({url:'C?id=1'})

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

在A頁面跳轉(zhuǎn)到B頁面刃泌,路由前頁面A路由為onUnload生命周期凡壤,跳轉(zhuǎn)到B頁面路由onShow生命周期


Tips:

navigateTo,redirectTo只能打開非 tabBar 頁面。

switchTab?只能打開 tabBar 頁面耙替。

reLaunch?可以打開任意頁面亚侠。

頁面底部的 tabBar 由頁面決定,即只要是定義為 tabBar 的頁面俗扇,底部都有 tabBar硝烂。

調(diào)用頁面路由帶的參數(shù)可以在目標(biāo)頁面的onLoad中獲取。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末铜幽,一起剝皮案震驚了整個濱河市滞谢,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌除抛,老刑警劉巖爹凹,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異镶殷,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)微酬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進(jìn)店門绘趋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來颤陶,“玉大人,你說我怎么就攤上這事陷遮∽易撸” “怎么了?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵帽馋,是天一觀的道長搅方。 經(jīng)常有香客問我,道長绽族,這世上最難降的妖魔是什么姨涡? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮吧慢,結(jié)果婚禮上涛漂,老公的妹妹穿的比我還像新娘。我一直安慰自己检诗,他們只是感情好匈仗,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著逢慌,像睡著了一般悠轩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上攻泼,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天火架,我揣著相機(jī)與錄音,去河邊找鬼坠韩。 笑死距潘,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的只搁。 我是一名探鬼主播音比,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼氢惋!你這毒婦竟也來了洞翩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤焰望,失蹤者是張志新(化名)和其女友劉穎骚亿,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體熊赖,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡来屠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片俱笛。...
    茶點(diǎn)故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡捆姜,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出迎膜,到底是詐尸還是另有隱情泥技,我是刑警寧澤,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布磕仅,位于F島的核電站珊豹,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏榕订。R本人自食惡果不足惜店茶,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望卸亮。 院中可真熱鬧忽妒,春花似錦、人聲如沸兼贸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽溶诞。三九已至鸯檬,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間螺垢,已是汗流浹背喧务。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留枉圃,地道東北人功茴。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像孽亲,于是被迫代替她去往敵國和親坎穿。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評論 2 361