小程序封装组件模板 --（以封装表格组件为例）

一、组件封装模板及表格组件

1.文件目录结构

个人喜好把项目中的业务文件放在pages中，图片放在与pages同级的images文件中，第三方的sdk存放在最好 放在libs文件中(此处有做修改)，工具类存放在utils文件中，同样把共用的自定义组件存放在同级的components文件中。这样便于管理，查找使用

2、自定义组件

在components文件目录下，创建一个select文件夹，随后select文件夹下手动创建：table.js、table.json、table.wxml、table.wxss 四个文件。(注意： 可以在table文件夹下自动创建上面👆四个文件，自动创建的文件会自动配置好代码。只需在引入组件的时候，在引入组件的页面的json文件中配置组件的名称和组件的位置即可。)

3.配置组件

table.js、table.json、table.wxml、table.wxss上面四个文件是我们手动创建的，那就需要我们手动配置代码。在json文件中写入代码：“component”: true 表示自定义组件声明，代码如下所示。

table.json

{
  "component": true
}

同时，js文件中也需要写成这种格式，其代码如下：

table.js

// pages/components/table/table.js
Component({

  /**
 * 页面的初始数据
   */
  data: {

  },
  /**
 * 组件属性列表
   */
  properties: {
    tabW: {
      // 表格每一列的宽度
      type: Array,
      value: []
    },
    tabHDate: {
      // 标题内容
      type: Array,
      value: []
    },
    rowData: {
      type: Array, // 表格数据
      value: []
    },
    rowKey: { // row属性
      type: Array,
      value: []
    }
  },
  methods:{
    
  }
  
})

备注

• Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。
• properties是组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数。
• data 和普通页面的data一样，是组件的内部数据，和 properties 一同用于组件的模版渲染。
• methods组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用。在这里面获取数据有两种方法：一种是获取data里的数据： this.data.属性名；一种是获取 properties 中的属性值： this.properties.属性名。

注意！！！
如果还需要其他属性、数据、方法等可查看微信小程序官方文档 Component构造器
table.wxml

<!--pages/components/table/table.wxml-->
<view class='container'>
    <view class="tab-header">
      <view class="tab-header-td"
          wx:for="{{tabHDate}}"
          wx:key="index"
          style="width:{{tabW[index]}}rpx"
      >
          {{item}}
      </view>
    </view>
    <view>
      <view class="tab-row"
          wx:for="{{rowData}}"
          wx:key="index"
      >
        <view 
            class="tab-row-td"
            wx:for="{{rowKey}}"
            wx:key="idx"
            wx:for-index="idx"
            wx:for-item="row"
            style="width:{{tabW[idx]}}rpx"
        >
          <view>{{item[row]}}</view>
        </view>
      </view>
      <view wx:if="{{rowData.length===0}}" class="no-text">暂无内容</view>
    </view>
    
</view>

table.wxss

/* pages/components/table/table.wxss */
.container {
  padding: 20rpx;
  background: #fff;
  margin: 20rpx;
  box-sizing: border-box;
} 
.tab-header{color:rgb(144, 147, 153);font-weight: bold;font-size: 30rpx;}
.tab-header,.tab-row{
  width: 100%;
  height: 80rpx;
  display: flex;
  align-items: center;
  background: #fff;
  font-size: 35rpx;
  border-bottom:1rpx solid rgb(235, 238, 245);
}
.tab-header-td,.tab-row-td{
  height: 100%;
  display: flex;
  justify-content:center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  
}
.tab-header-td:last-child,.tab-row-td:last-child{
  border-right: none;
}
.tab-row{
  background: #fff;
  font-size: 26rpx;
  color: rgb(96, 98, 102)
}
/* .tab-row:nth-child(2n){
  background: #EDEDED;
} */
.tab-row-td view{
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
}
.no-text{
  text-align: center;
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

二、使用组件

• 使用自定义组件前，需要在引入组件的页面的json文件中配置，比如我要在 index.wxml 中引入，那么在 index.json 中我就需要配置：

{
  "usingComponents": {"table": "../../components/table/table"}
}

• 在wxml引入组件，代码如下：

	<table
	tabHDate="{{tabHDate}}"
	tabW="{{tabW}}"
	rowData="{{rowData}}"
	rowKey="{{rowKey}}"
	/>

• js中传入数据

 tabHDate: ['费项', '单价', '度数', '金额'], // 标题内容
 tabW: ['210', '150', '210', '140'],
  rowKey: ['feeName', 'price', 'num', 'fee'],
  rowData: [{
    feeName: '垃圾清运费',
    price: '0.11',
    num: '',
    fee: '0.31',
    },
    {
      feeName: '保洁费',
    price: '0.01',
    num: '',
    fee: '0.02',
    },
    {
      feeName: '服务费',
      price: '0.21',
      num: '',
      fee: '0.03',
    }
  ],

• 附带效果图：
  
  组件介绍：举例

  <Select class="section-select" select-array='{{selectArray}}'  current-text="{{current_text}}" bind:getNowData='getCurrentTextAction'></Select>

• select-array 是我在组件中自定义的属性名，这个是和组件所在的 js 中properties中的属性是对应的。在 properties 定义的属性中，属性名采用驼峰写法例如：selectArray。在引入组件的 wxml 中，指定属性值时则对应使用连字符写法例如：select-array=’{{selectArray}}，selectArray为select组件中所需展示的数据源。
• 这里getNowData是自定义的子组件需要触发的事件名，getNowData是引入组件的页面需要获取传过来的数据的自定义的事件名。

 // 内容更新后，需要把更新的数据传输出去
     var nowDate = {
       id: index,
       name: current_text,
       type: current_type
     }
     // 这里的 getNowData 要和外部的 bind:getNowData ，名称一定要对应
     this.triggerEvent('getNowData', nowDate);
     console.log("选择之后的current_text", current_text);

在引入组件的页面的js添加引入组件时，自定义的函数：

  getCurrentTextAction:function(e){
    let item = e.detail;
    this.setData({
      current_text: item.name, 
      current_type: item.type
    });
  }