微信小程序页面路由之navigateTo

wx.navigateTo(Object object)

• 保留当前页面，跳转到应用内的某个页面，除了 tabbar 页面。
• 使用 wx.navigateBack 可以返回到原页面。
• 小程序中页面栈最多十层。

传递参数

• 使用object的属性url(string)，即要跳转的页面路径，路径后可以带参数。
• 如 'path?key=value&key2=value2'。
  • 参数与路径之间使用 ? 分隔；
  • 参数键与参数值用 = 相连；
  • 不同参数用 & 分隔；
• 传递的参数在目标页的onLoad函数中使用参数options即可通过.属性的方式获取。

接收数据

• 使用object的属性events(Object)，即页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
• 方式是为在目标页自定义的事件（譬如acceptDataFromOpenedPage）添加一个在出发页里同名的监听器（acceptDataFromOpenedPage）：

# 目标页.js
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});

# 出发页.js
wx.navigateTo({
  ...
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    ...
  },
  ...
})

发送数据

• 这需要在成功路由后，借助object的接口成功调用的回调函数success，这个函数拥有eventChannel(EventChannel)属性，可用来与被打开页面进行数据发送。

#出发页.js
wx.navigateTo({
  ...
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
    ...
  }
  ...
})

# 目标页.js
onLoad: function(option){
  const eventChannel = this.getOpenerEventChannel()
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}