小程序页面、组件间的通信

149 阅读1分钟

1、跳转时带参数

使用wx.navigateTo。 如果使用wx.redirectTo,要注意两者的差别

// 前页面
wx.navigateTo({
      url: '../index/index?title=helloworld',  // 这里的参数会在跳过去的页面onload方法的options参数里
      // events: events,
      success: (result) => {},
      fail: (res) => {},
      complete: (res) => {},
    })
// 跳转后的页面
onload(options){
    wx.setNavgationBarTitle({
        title: options.title,
    })
}

2、全局数据

使用起来简单,但是最好及时清理一下,以免污染全局数据

const app = getApp()  // 获取全局对象
Page({
    app.globalData.isUpdate = true  // 往全局的对象里添加属性,其他任何页面都能访问到
})

3、利用缓存传值wx.setStorageSync()

wx.setStorageSync('key', 'value')  // value如果不是字符串最好转成json再存储   
wx.getStorageSync(string key)   // 通过key取值

4、父子组件的通讯方式(重点)

一两句话说不清楚,参考官方文档吧: developers.weixin.qq.com/miniprogram…

5、pubsub消息订阅发布

这是一种模式,使用很广泛,参考响应的库来实现即可。 需要引入pubsub.js库,通过发布信息,订阅信息实现通信。

6、eventChannel:和被打开页面进行通信

通过eventChannel触发事件和监听事件的方式实现通信。可以结合导航跳转# wx.navigateTo()使用,

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

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

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