小程序组件通信

小程序页面数据传递

修改页面栈

场景

在确认订单页面,用户需要选择已有的收货人,而已有收货人列表在另一个页面,那么用户点击选择收货人之后,使用wx.navigateTo跳转到收货人列表,点击某个收货人,将数据带回确认订单页,并返回.
思路:在确认订单页面使用navigateTo跳转到收货人列表,然后在收货人列表里click事件中获取页面栈,直接往上一个页面setData,然后退回上一个页面:

const page = getCurrentPages()
if (page.length > 1) {
  page[page.length - 2].setData({
    收货人: 选中的某个收货人详情   //[object]
  })
  wx.navigateBack({
    delta: 1
  })
}

虽然这种方法简单,但是官方也给出提醒,页面栈数据可以自行修改,但是一定要慎重,否则会导致页面状态错误.

路由带参数

通过路由跳转携带参数到下一个页面,在新页面中的onLoad函数中可以获取,例如:

// 跳转页面
wx.navigateTo({ url: `pages/usercenter/index?id=${addressId}&key=${value2}` })
// 新页面
onLoad (options) {
    this.setData({ addressId: options.id, key: options.key })
}

注意:navigateTo、redirectTo、reLaunch跳转的时候都可以携带参数,switchTab、navigateBack跳转不可以带参数

events和eventChannel

events只存在于navigateTo方法中,eventChannel还不清楚,待验证.
events:页面间通信接口,用于监听被打开页面发送到当前页面的数据.

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    someEvent (data) {
       console.log(data)
    }
  },
   success (res) {
       // 通过eventChannel向被打开页面传送数据
       res.eventChannel.emit('acceptDataFormOpenerPage', { data: 'test' })
    }
})

// test.js
Page({
  onLoad (option) {
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('someEvent', { data: 'test' })
    // 监听acceptDataFormOpenerPage事件,获取上一页面通过eventChannel传 
    // 送到当前页面的数据
    eventChannel.on('acceptDataFormOpenerPage', function (data) {
       console.log(data)
    })
  }
})

使用场景:需要从当前页面传递数据给被打开页面,当进入被打开页面之后,改变里面的数据之后重新刷新当前页面,这样子就不用在返回当前页面的时候刷新页面导致的体验不好.