微信小程序之页面之间四种通讯方式

类似于vue中的组件传值，可以应用于很多场景，用的最多的则是路由跳转传值和获取上一页面的数据

一. 页面跳转传参：直接在url后拼接

  wx.navigateTo({
      //可以使用反引号，用${}的形式，里面可以写入js表达式
      url: `/pages/index/index?id=${id}`,
    })

接收：

  onLoad: function (options) {
    //接收参数
    console.log(options.id); //打印上一页面传递的id值
  },

二、eventChannel：和被打开页面进行通信

jumpChannel() {
    let that = this
    console.log('jumpChannel','111111111111111111111');
    wx.navigateTo({
      url: '../eventB/eventB',
      events:{
        someEvent:function(data) { //从其他页面返回的参数
          console.log('jumpChannel',data)
          that.setData({
            channelTxt:data.data
          })
        }
      },
      success:function(res) {  //向下一个页面传参
        res.eventChannel.emit('channelA',{data: 'content from first page'})
      }
    })
  },

第二个页面eventB.js

从第一个页面过来时，onLoad里接收参数key=channelA，点击页面按钮，返回上级页面时，传参key=someEvent

tap() {
    event.pub('home','this is new content')
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('someEvent',{data:'back from second page '})
    wx.navigateBack({
      delta: -1,
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    const eventChannel = this.getOpenerEventChannel()
    // eventChannel.emit('someEvent',{data:'back from second page '})
    eventChannel.on('channelA',function(data) {
      console.log('eventB',data)
      that.setData({
        content:data.data
      })

    })
  },

三、使用全局变量传值

app.js中定义一个全局的空属性，到当前页面获取全局属性，并且赋需要传递的值给这个全局属性，再到跳转之后的页面获取这个全局属性，用其进行相应的操作，之后再赋值为空

App({
  
  globalData:{
    data:'',
  }
})

const app = getApp()
Page({
  onLoad: function (options) {
    //将全局变量进行赋值
    app.globalData.data = '二级页面'
    console.log(app.globalData.value);  //打印 二级页面
  }
})

触发回调后，任意页面都可以使用，使用完之后赋值为空即可

四、利用缓存传值：

wx.setStorageSync('goods', '新页面') 
let value = wx.getStorageSync('goods')
console.log(value); //打印 新页面

五、父子组件的通讯方式：

1、属性绑定：

属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件

<tabDemo activeIdx="{{0}}"></tabDemo>

Component({
  properties: {
    activeIdx: {
      type: Number,
      value: 0
    }
  },
}

2、事件绑定：

事件绑定用于实现子向父传值，可以传递任何类型的数据

使用步骤：

（1）在父组件的.js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

//和data平齐
syscCount(){
},

（2）在父组件的.wxml中，通过自定义事件的形式，将步骤一定义的函数引用传递给子组件

<mydemo4 count="{{count}}" bind:sysc="syscCount"></mydemo4>

（3）在子组件的.js中，通过调用this.triggerEvent('自定义事件名称',{/*参数对象*/})，将数据发送到父组件

methods: {
  addCount(){
    this.setData({
      count:this.properties.count + 1
    })
    // 触发自定义事件，将数值同步给父组件
    this.triggerEvent('sysc',{value:this.properties.count})
  }
}

（4）在父组件的.js中，通过e.detail获取到子组件传递过来的数据

//和data平齐
syscCount(e){
  console.log('sysCount!!!');
  // console.log(e.detail.value);
  this.setData({
    count:e.detail.value
  })
},

3. 获取组件实例：

可在父组件里调用 this.selectComponent( id 或 class选择器)，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器。

//.wxml
<mydemo4 count="{{count}}" bind:sysc="syscCount" class="child" id="childId"></mydemo4>
<view>-------</view>
<view>父组件中，count的值是：{{count}}</view>
<button bindtap="getChild">获取子组件的实例对象</button>

//.js
getChild(){ //按钮的 tap 处理函数
  // 切记下面参数不能传递标签选择器，只能的id或者class，否则会返回 null
  const child = this.selectComponent('.child')
  // console.log(child);
  // child.setData({
  //   count:child.properties.count + 1
  // })
  child.addCount()
}

4、behaviors

behaviors是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins”。

每个 behaviors 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，每个组件可以引用多个behaviors，behavior也可以引用其它behavior。

（1）创建behaviors

//调用 Behavior() 方法，创建实例对象并使用 module.exports 把 behavior 实例对象共享出去
module.exports = Behavior({
  // 属性节点
  properties:{},
  // 私有数据节点
  data:{
    username:'zs'
  },
  // 事件处理函数和自定义方法
  methods:{},
  // 其他节点。。。
})

（2）导入并使用 behavior

在组件中，使用 require() 方法导入需要的 behavior，挂载后即可访问 behavior 中的数据和方法。

// 使用 require() 导入需要的自定义 behavior 模块
const myBehavior = require('../../behaviors/my-behaviors')

Component({
  // 将导入的 behavior 实例对象挂载到 behavior 数组节点中，即可生效
  behaviors:[myBehavior],
})

（3）behavior中所有可用的节点

可用的节点	类型	可选项是否必须	描述
properties	Object Map	否	同组件的属性
data	Object	否	同组件的数据
methods	Object	否	同自定义组件的方法
behaviors	String Array	否	引入其它的 behavior
created	Function	否	生命周期函数
attached	Function	否	生命周期函数
ready	Function	否	生命周期函数
moved	Function	否	生命周期函数
detached	Function	否	生命周期函数

（4）同名字段的覆盖和组合规则

组件和它引用的 behavior 中可以包含同名字段，对这些处理的字段有如下三种同名处理规则：

同名的数据字段（data）:

• 若同名的数据字段都是对象类型，会进行对象合并;
• 其余情况会进行数据覆盖，覆盖规则为： 引用者 behavior > 被引用的 behavior 、 靠后的 behavior > 靠前的 behavior。（优先级高的覆盖优先级低的，最大的为优先级最高）;

同名的属性（properties）或方法（methods）：

• 若组件本身有这个属性或方法，则组件的属性或方法会覆盖 behavior 中的同名属性或方法；
• 若组件本身无这个属性或方法，则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法；

同名的生命周期函数：

• 对于不同的生命周期函数之间，遵循组件生命周期函数的执行顺序；
• 对于同种生命周期函数和同字段 observers ，遵循如下规则： 

1. behavior 优先于组件执行；
2. 被引用的 behavior 优先于 引用者 behavior 执行；
3. 靠前的 behavior 优先于 靠后的 behavior 执行；
4. 如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数和 observers 不会重复执行。