# 页面间关系

小程序的界面可以由多个页面组成。

页面之间可以相互跳转,如打开一个新页面,关闭一个已有页面等。这些页面切换的时机称为 页面路由

# 页面路径参数

最基本地,一个页面可以用 router.navigateTo 打开一个新页面。打开新页面时,可以携带路径参数。参数采用 URL 编码形式。

// page/index/index.js
Page({
  viewTap: function() {
    var id = 'PRODUCT#1'
    this.router.navigateTo({
      // 传入路径参数时,使用 encodeURIComponent 是个好习惯
      url: '../product/product?id=' + encodeURIComponent(id),
    })
  },
})

在新打开的页面中,通过 this.options 可以获取到页面的路径参数。

// page/product/product.js
Page({
  onLoad: function() {
    // this.options 中的路径参数需要 decodeURIComponent
    var id = decodeURIComponent(this.options.id) // id === 'PRODUCT#1'
  }
})

目前更推荐使用 Component 构造器 来构造页面。这样使用时,可以将路径参数定义在 properties 中。

// page/product/product.js
Component({
  properties: {
    id: String,
  },
  lifetimes: {
    attached() {
      // this.data.id === 'PRODUCT#1'
    },
  },
})

路径参数的本质是页面的启动状态。在实践中,如果页面内容是由某些数据决定的,那这些数据应当是一个路径参数。例如:

  • 对于一个商品的详情页,页面所展示的商品由商品 ID 来决定,那么商品 ID 就应当是一个页面路径参数;
  • 对于一个学生的个人信息页,页面所展示的是哪个学生由学号来决定,那么学号就应当是一个页面路径参数。

使用路径参数可以在新页面启动时,向新页面传递数据。但如果两个页面之间需要持续进行双向的数据通信,或者有些数据不适合写在路径参数中,那就需要用到 EventChannel 页面间通信。

# 页面间通信

基础库 '2.7.3' 开始支持,低版本需做兼容处理

如果一个页面由另一个页面通过 navigateTo 打开,这两个页面间将建立一条数据通道:

  • 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象;
  • navigateTosuccess 回调中也包含一个 EventChannel 对象。

这两个 EventChannel 对象间可以使用 emiton 方法相互发送、监听事件。

在开发者工具中预览效果