页面间通信

url 传参

index.js

路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'

wx.navigateTo({
url: './test/?id=' + id
})
test.js
Page({
    onLoad: function (options) {
        console.log(options);
    }
})

log 结果

{id: "IT_IOS_MAN"}

EventChannel 传参

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

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

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

index.js 发送
wx.navigateTo({
      url: './test',
      success: function (res) {
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'send from opener page' })
      }
    })
test.js 接收
Page({
  onLoad: function (option) {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('acceptDataFromOpenerPage', function (data) {
      console.log(data)
    })
  }
})

log 结果

{ data: 'send from opener page' }

EventChannel 返回结果

index.js 接收
wx.navigateTo({
      url: './test',
      events: {
        acceptDataFromOpenedPage: function (data) {
          console.log(data)
        },
      },
    })

log 结果

 { data: 'send from opened page' }
test.js 发送
Page({
  onLoad: function (option) {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', { data: 'send from opened page' });
  }
})
posted @ 2022-11-15 12:01  IT_IOS_MAN  阅读(28)  评论(0编辑  收藏  举报