小程序学习笔记-4：页面之间跳转

上一篇：小程序学习笔记-3：页面结构和布局

---

本篇内容
* 页面与页面之间的跳转

小程序页面跳转有以下几种方法：

*注意，首先要在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. 组件跳转

通过导航组件 进行跳转。
可以配置跳转到当前小程序的指定页面，或者跳转的其他小程序的指定页面（未试用过）
如下示例：
从board页面跳转到当前小程序的list页面，在url中填入跳转链接，将点击作用的区域用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-路由
微信小程序官方文档：组件-导航

---

下一篇：小程序学习笔记-5：数据绑定（假数据）