上一篇：小程序?qū)W習筆記-3：頁面結(jié)構(gòu)和布局
本篇內(nèi)容
* 頁面與頁面之間的跳轉(zhuǎn)
小程序頁面跳轉(zhuǎn)有以下幾種方法：
*注意，首先要在app.json中添加每個頁面的路由
//app.json
"pages":[
"pages/board/board",
"pages/search/search",
"pages/profile/profile",
"pages/list/list",
"pages/item/item"
],
1. tab跳轉(zhuǎn)
通過切換tab欄實現(xiàn)頁面跳轉(zhuǎn)抬旺，見 小程序?qū)W習筆記-2：NavigationBar和TabBar的使用 中關(guān)于TabBar的使用內(nèi)容
2. 組件跳轉(zhuǎn)
通過導航組件 <navigator> 進行跳轉(zhuǎn)。
可以配置跳轉(zhuǎn)到當前小程序的指定頁面翼岁，或者跳轉(zhuǎn)的其他小程序的指定頁面（未試用過）
如下示例：
從board頁面跳轉(zhuǎn)到當前小程序的list頁面，在url中填入跳轉(zhuǎn)鏈接绳姨，將點擊作用的區(qū)域用navigator組件包裹起來
<!--pages/board/board.wxml-->
...
<navigator url="../list/list">
<text>近期熱映</text>
</navigator>
...
3. 路由API跳轉(zhuǎn)
-
wx.navigateTo(Object object) 和 wx.navigateBack
保留當前頁面登澜，跳轉(zhuǎn)到應用內(nèi)的某個頁面阔挠。但是不能跳到 tabbar 頁面飘庄。使用 wx.navigateBack可以返回到原頁面。小程序中頁面棧最多十層购撼。
wx.navigateTo(Object object)是最常用的頁面跳轉(zhuǎn)接口跪削。參數(shù)中events是頁面間通訊接口，可用于監(jiān)聽被打開頁面發(fā)送到當前頁面的數(shù)據(jù)迂求。當前頁面可以通過路徑后帶參數(shù)或者enentChannel（頁面間事件監(jiān)聽通道）向被打開頁面?zhèn)鬟f數(shù)據(jù)碾盐。
如從A頁面通過wx.navigeteTo跳轉(zhuǎn)到B頁面，即A為上文中當前頁面揩局，B為被打開頁面：
A頁面?zhèn)鲾?shù)據(jù)給B頁面：
//A.js
wx.navigateTo({
url: 'B?id=1',
events: {
...
},
success: function(res) {
// 通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù)
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'A2B' })
}
})
//B.js
Page({
onLoad: function(option){
console.log(option.query)//這里我獲取不到毫玖，存疑
// 監(jiān)聽acceptDataFromOpenerPage事件，獲取上一頁面通過eventChannel傳送到當前頁面的數(shù)據(jù)
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)//此處輸出為 {data:'A2B'}
})
}
})
B頁面向A頁面?zhèn)鲾?shù)據(jù)：
//A.js
wx.navigateTo({
url: 'B?id=1',
events: {
// 為指定事件添加一個監(jiān)聽器凌盯，獲取被打開頁面?zhèn)魉偷疆斍绊撁娴臄?shù)據(jù)
acceptDataFromOpenedPage: function(data) {
console.log(data)//此處輸出為{data:'B2A'}
},
...
},
success: function(res) {
...
}
})
//B.js
Page({
onLoad: function(option){
const eventChannel = this.getOpenerEventChannel()
//觸發(fā)A中的事件
eventChannel.emit('acceptDataFromOpenedPage', {data: 'B2A'});
}
})
-
wx.switchTab(Object object)
跳轉(zhuǎn)到 tabBar 頁面（需在app.json中tabBar字段中定義）付枫，并關(guān)閉其他所有非 tabBar 頁面。
跳轉(zhuǎn)url中不能帶參數(shù)驰怎。
wx.switchTab({
url: '/index'
})
-
wx.redirectTo(Object object)
關(guān)閉當前頁面阐滩，跳轉(zhuǎn)到應用內(nèi)的某個頁面。但是不允許跳轉(zhuǎn)到 tabbar 頁面县忌。
跳轉(zhuǎn)url中可以帶參數(shù)掂榔。
wx.redirectTo({
url: 'test?id=1'
})
總結(jié)：
本篇學習記錄了小程序中頁面間跳轉(zhuǎn)的幾種方法继效。
參考：
微信小程序官方文檔：API-路由
微信小程序官方文檔：組件-導航
