微信小程序第二篇：七种主流通信方法详解

通信方法

组件通信

properties

父组件向子组件通信，与 Vue 的 props 作用相同。

父组件向子组件传数据：

<my-component list="{{list}}">my-component>
1

子组件接收数据：

Component({
  properties:{
    list:{
      type: Array,
      value: []
    }
  },
  attached(){
    console.log(this.list)
  }
})
1
2
3
4
5
6
7
8
9
10
11

triggerEvent

子组件向父组件通信，与 Vue 的 $emit 作用相同

子组件触发自定义事件：

Component({
  attached(){
    this.triggerEvent('customEvent',{ id: 10 })
  }
})
1
2
3
4
5

父组件接收自定义事件：

<my-component list="{{list}}" bind:customEvent="customEvent">my-component>
1

Page({
  customEvent(e){
    console.log(e.detail.id)
  }
})
1
2
3
4
5

selectComponent

使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象，类似 Vue 的 ref
注意：获取节点实例应该放在 onReady 生命周期函数中

<my-component id="mycomponent" list="{{list}}">my-component>
1

Page({
  onLoad(){
    let mycomponent = this.selectComponent('#mycomponent')
    mycomponent.setData({
      list: []
    })
  }
})
1
2
3
4
5
6
7
8

页面通信

getCurrentPages

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

跨页面赋值：

 let pages = getCurrentPages();//当前页面栈
 let prevPage = pages[pages.length - 2];//上一页面
  prevPage.setData({
     //直接给上一页面赋值，例如：上一页面的地址等于本页面地址的赋值
     address:this.data.userAddress
  });

1
2
3
4
5
6
7

跨页面调用方法：

 let pages = getCurrentPages();//当前页面栈
 let prevPage = pages[pages.length - 2];//上一页面
 prePage.computeFreight();
1
2
3

页面跳转后自动刷新：

wx.switchTab({
    url: '../index/index',
    success: function (e) {
    var page = getCurrentPages().pop(); //当前页面
    if (page == undefined || page == null) return;
    page.onLoad(); //或者其它操作
    }
})
1
2
3
4
5
6
7
8

获取当前页面相关信息：

 let pages = getCurrentPages(); //当前页面栈
 //当前页面为页面栈的最后一个元素(如下两方法等同)
 let prevPage = pages[pages.length - 1];//当前页面
  // or
 // pop() 方法用于删除并返回数组的最后一个元素
 let prevPage = pages.pop();//当前页面
 console.log( prevPage.route ) //举例：输出为‘pages/index/index’
1
2
3
4
5
6
7

wx.navigateTo

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' })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//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)
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

全局通信

globalData

将数据挂载到 app.js，这种方式在开发中很常用。通过getApp()，我们能够在任何一个页面内访问到app实例。

App({
  globalData:{
    list:[]
  }
})
1
2
3
4
5

const app = getApp()
Page({
  onLoad(){
    app.globalData.list.push({
      id: 10
    })
  }
})
1
2
3
4
5
6
7
8

storage

storage并不是作为通信的主要方式。storage 主要是为了缓存数据，并且最多只能存储10M的数据。

wx.setStorageSync('timestamp', Date.now())
wx.getStorageSync('timestamp')
wx.removeStorageSync('timestamp')
1
2
3