本篇内容
* 页面与页面之间的跳转
小程序页面跳转有以下几种方法：
*注意，首先要在app.json中添加每个页面的路由
//app.json
"pages":[
"pages/board/board",
"pages/search/search",
"pages/profile/profile",
"pages/list/list",
"pages/item/item"
],
1. tab跳转
通过切换tab栏实现页面跳转，见 小程序学习笔记-2：NavigationBar和TabBar的使用 中关于TabBar的使用内容
2. 组件跳转
通过导航组件 <navigator> 进行跳转。
可以配置跳转到当前小程序的指定页面，或者跳转的其他小程序的指定页面（未试用过）
如下示例：
从board页面跳转到当前小程序的list页面，在url中填入跳转链接，将点击作用的区域用navigator组件包裹起来
<!--pages/board/board.wxml-->
...
<navigator url="../list/list">
<text>近期热映</text>
</navigator>
...
3. 路由API跳转
-
wx.navigateTo(Object object) 和 wx.navigateBack
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。
wx.navigateTo(Object object)是最常用的页面跳转接口。参数中events是页面间通讯接口，可用于监听被打开页面发送到当前页面的数据。当前页面可以通过路径后带参数或者enentChannel（页面间事件监听通道）向被打开页面传递数据。
如从A页面通过wx.navigeteTo跳转到B页面，即A为上文中当前页面，B为被打开页面：
A页面传数据给B页面：
//A.js
wx.navigateTo({
url: 'B?id=1',
events: {
...
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'A2B' })
}
})
//B.js
Page({
onLoad: function(option){
console.log(option.query)//这里我获取不到，存疑
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)//此处输出为 {data:'A2B'}
})
}
})
B页面向A页面传数据：
//A.js
wx.navigateTo({
url: 'B?id=1',
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)//此处输出为{data:'B2A'}
},
...
},
success: function(res) {
...
}
})
//B.js
Page({
onLoad: function(option){
const eventChannel = this.getOpenerEventChannel()
//触发A中的事件
eventChannel.emit('acceptDataFromOpenedPage', {data: 'B2A'});
}
})
-
wx.switchTab(Object object)
跳转到 tabBar 页面（需在app.json中tabBar字段中定义），并关闭其他所有非 tabBar 页面。
跳转url中不能带参数。
wx.switchTab({
url: '/index'
})
-
wx.redirectTo(Object object)
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
跳转url中可以带参数。
wx.redirectTo({
url: 'test?id=1'
})
总结：
本篇学习记录了小程序中页面间跳转的几种方法。
参考：
微信小程序官方文档：API-路由
微信小程序官方文档：组件-导航
