微信小程序组件使用接口传值不统一的解决方案

在项目开发中，我们可能封装了一个组件，但这个组件在很多页面都用到的，但是这些页面里面用的的数据并不相同，后台数据所对应的字段也不相同，这个时候就需要前端自己想办法去解决这个问题，最简单的方法就是复制粘贴重新弄个组件，然后更改一下相对应的字段，但是这样下去不就违背了组件的可复用的初衷了么？另一方面，也不利于项目后期的维护，那怎么解决这个问题呢？

一、子组件的配置

1.新建一个js文件用来进行不同数据的转换

export default {
  CALLBACK_DATE:  'callbackDate', // 最近回访日
  CARD_LEAVE_NAME: 'cardLevelName', // 卡级别名称
  CONSUME_DATE: 'consumeDate',  // 最近消费日期
  MEMBER_AGE: 'memberAge', // 年龄
  MEMBER_CARD_NO: 'memberCardNo', // 卡号
  MEMBER_NAME: 'memberName', // 姓名
  MEMBER_PHONE: 'memberPhone', // 电话
  MEMBER_SEX: 'memberSex', // 性别
  SERVICE_WAITER_NAME: 'serviceWaiterName', // 性别
}
export default{}这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件，而在另一个文件 B 里面需要用到它，那么就要用 ES6 的 import/export 语法 ，在文件 A 中定义输出接口 export ，在文件 B 中引入 import ，把引入的组件用起来，这样就可以复用组件 A 去配合文件 B 生成 html 页面了。
export加default直接import  from   引入
export不加default需要import { }  from    引入

2.组件自带js配置

//引入
import constant from "./constant"
//接收父组件参数
properties: {
    props: {
      type: Object,
      value: {
        [constant.MEMBER_NAME]: constant.MEMBER_NAME, // 姓名
        [constant.MEMBER_SEX]: constant.MEMBER_SEX, // 性别
        [constant.MEMBER_AGE]: constant.MEMBER_AGE, // 年龄
        [constant.CARD_LEAVE_NAME]: constant.CARD_LEAVE_NAME, // 普通卡
        [constant.MEMBER_CARD_NO]: constant.MEMBER_CARD_NO, // 卡号
        [constant.CONSUME_DATE]: constant.CONSUME_DATE, // 最后消费日
        [constant.MEMBER_PHONE]: constant.MEMBER_PHONE, // 手机号
        [constant.SERVICE_WAITER_NAME]: constant.SERVICE_WAITER_NAME, // 服务专员
        [constant.CALLBACK_DATE]: constant.CALLBACK_DATE // 最后回访日
      }
    }
}
//页面初始化执行（attached（）在组件实例进入页面节点树时执行，detached（）在组件实例被从页面节点树移除时执行）
lifetimes: {
    attached() {
      this._init()
    }
  },
//默认数据
data: {
    emptyValue: '-',
    user: {},
  },
//方法
_init() {
      const { props, item, emptyValue } = this.data

      const user = {}

      for (const key of Object.keys(props)) {
        const val = props[key]
        user[key] = _everyVal(item[val])
      }


      function _everyVal (val) {
        if (
          val || val === 0
        ) {
          return val
        }

        return emptyValue
      }

      console.log('user =>', user)
      this.setData({
        user
      })
    }

3.父组件配置

//传值
  <h-user-card  item="{{item}}"  bind:click="_clickHandle" props="{{prop}}">
//配置
prop: {
      [constant.MEMBER_NAME]: "name", // 姓名
      [constant.MEMBER_SEX]: constant.MEMBER_SEX, // 性别
      [constant.MEMBER_AGE]: constant.MEMBER_AGE, // 年龄
      [constant.CARD_LEAVE_NAME]: constant.CARD_LEAVE_NAME, // 普通卡
      [constant.MEMBER_CARD_NO]: "cardNum", // 卡号
      [constant.CONSUME_DATE]: constant.CONSUME_DATE, // 最后消费日
      [constant.MEMBER_PHONE]: constant.MEMBER_PHONE, // 手机号
      [constant.SERVICE_WAITER_NAME]: constant.SERVICE_WAITER_NAME, // 服务专员
      [constant.CALLBACK_DATE]: constant.CALLBACK_DATE // 最后回访日
    }
将后面的值改成对应的后台返回值就可以了