美文网首页
页面间通信

页面间通信

作者: IT_IOS_MAN | 来源:发表于2022-02-18 11:30 被阅读0次

    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.navigateTosuccess 回调中也包含一个 EventChannel 对象。

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

    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' });
      }
    })
    

    相关文章

      网友评论

          本文标题:页面间通信

          本文链接:https://www.haomeiwen.com/subject/qwdqkrtx.html