微信小程序自定义组件中使用behaviors「终于解决」

大家好，欢迎来到IT知识分享网。

前言

一、behaviors的定义

二、behaviors的使用

总结

前言

一、业务场景

  用户授权用户信息，以及手机号，完成注册会员。授权用户信息以及手机号完毕后得到unionid + mobile字段，注册成为会员~由于授权用户信息以及授权手机号两者都需要用户主动触发，所以我们在用户授权信息后会有一个弹窗~弹窗中有一个授权手机号的按钮让用户主动触发。

二、实现方案

  为了代码的复用，授权手机号以及授权用户信息作为一个组件进行封装，由于不想使用子类传值给父组件达到数据的共享所以看到了behaviors可以实现共享数据，于是采用了这种方式~

behaviors的定义： behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。具体详见文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html

behaviors的使用 ：

由于调用接口等操作不适合直接展示在代码片段中，我简化了上述的业务场景，用户同意授权用户信息，隐藏授权用户信息按钮，并且展示授权手机按钮。具体的代码片段可以参考https://developers.weixin.qq.com/s/EAUZNgmv7SmW

文件夹目录

创建一个user-auth-behavior的js,存放phone-auth（授权手机号）以及userinfo-auth(授权用户信息)的公共data以及方法，具体js如下

// user-auth-behavior.js
module.exports = Behavior({
  /**
   * 组件的初始数据
   */
  data: {
    showUserInfo:true,
    showPhoneAuth:false
  },
  /**
   * 组件的方法列表
   */
  methods: {
     //展示手机授权
     showPhoneFun(){
      this.setData({
        showUserInfo:false,
        showPhoneAuth:true
      })
      console.log('showPhoneAuth',this.data.showPhoneAuth)
    }
  }
})

phone-auth 组件以及 userinfo-auth组件引入user-auth-behavior.js

  userinfo-auth.js代码如下：

const userBehavior = require('../user-auth-behavior.js')
Component({
  behaviors:[userBehavior],
  /**
   * 组件的初始数据
   */
  data: {
  },
  lifetimes: {
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //用户信息授权
    getuserinfo(e){
      console.log('获取用户授权',e)
        if(e.detail.errMsg == "getUserInfo:ok"){
          this.showPhoneFun()
        }else{
          wx.showToast({
            title:'请授权您的信息',
            icon:'none',
            duration:2000
          })
        }
    }
  }
})

  phone-auth.js 代码如下

const userBehavior = require('../user-auth-behavior.js')
Component({
  behaviors:[userBehavior],
  properties: {
  },

  /**
   * 组件的初始数据
   */
  data: {
  },
  lifetimes: {
    attached (){

    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //用户授权手机号
    getUserMobile(e){
      if (e.detail.iv) {
        this.parseUserMobile(e)
      }
    }
  }
})

  当用户授权以后会在userinfo-auth中调用公共的showPhoneFun方法展示手机授权，这个时候你会发现 user-auth-behavior.js 中 showPhoneAuth字段修改为true。但是phone-auth中字段始终为false~但是当phone-auth中绑定了showPhoneFun点击事件以后showPhoneAuth为true，结果并没有于是又是在社区一番查找搜到一篇文章：https://developers.weixin.qq.com/community/develop/doc/000a06e11ac6e8ebc58a5441e56400?highline=behaviors%E5%85%B1%E4%BA%AB 

然后文章中微信官方回复是 你好，可以参考一下  官方文档：小程序的 MobX 绑定辅助库https://developers.weixin.qq.com/miniprogram/dev/extended/utils/mobx.html  

阿西巴，最后的我放弃了 觉得没有必要绕这么大一圈，我把这个两个组件中的内容合成了一个组件，唯一的不好就是高耦合，其实不建议大家这么玩~

总结

  使用behavior可以实现数据和方法的共享，但是事件中改变的值需要在两个组件中都调用，值才会实时变化，或者是借助MobXd的辅助。

  如果时间允许的情况下还是非常建议大家自己去尝试一下~如果开发时间较短就使用老的方法，其实triggerEvent也可行