微信小程序 自定义组件的使用

微信小程序 自定义组件的使用

发布时间：2018-05-18 15:07:57
官方文档：微信小程序–自定义组件

以table组件为例：

一、创建自定义组件

1.新建一个components文件夹（用来存放组件），在其中创建一个table文件夹，如图所示：

2.在table.json文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）

{
  "component":true,
  "usingComponents":{}//用来引用其他组件
}

3.在table.wxml中写自定义组件的内部WXML结构

<!--components/table/table.wxml-->
<view class='table'>
  <view class="thead">
    <view class='tr'>
      <view class="th" wx:for="{{tableThemes}}" wx:key="{{index}}">{{item}}</view>
    </view>
  </view>
  <view class="tbody">
    <view class="tr" wx:for="{{tableItems}}" wx:key="{{index}}">
      <view class="td" wx:for="{{item}}" wx:key="{{index}}">{{item}}</view>
    </view>
  </view>
</view>

4.在table.wss中写自定义组件的样式（样式只应用于这个自定义组件）

PS:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器

/* components/table/table.wxss */
.table{
  display: table;
  border-collapse: collapse;
  color: grey;
  font-size: 32rpx;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}
.table .tr{
  display: table-row;
  height: 60rpx;
  vertical-align: middle;
  line-height: 60rpx;
}
.table .thead{
  display: table-header-group;
}
.table .thead .tr{
  background: #eee;
}
.table .tbody{
  display: table-row-group;
}
.table .tr .th,.table .tr .td{
  display: table-cell;
  border: 1px solid #ddd;
}

5.在table.js文件中使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

PS:组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。

Component({
  properties: {
    // 这里定义了属性，属性值可以在组件使用时指定
    tableThemes: {
      type: Object, // 因此处的thead是json格式，故将数据类型设置为object
    },
    tableItems: {
      type: Array,
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

二、使用自定义组件

1.使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。

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

这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

2.在页面的wxml文件中引用组件。

<table tableThemes="{{themeArr}}" tableItems="{{itemArr}}"></table>

3.在页面的js文件中提供属性的数据。

data:{
	themeArr: { nickName: '昵称', age: '年龄', tell: '电话', address: '住址' },
    itemArr: [
      { nickName: 'Anna', age: 25, tell: 121243423424, address: 'tianfuStreet' },
      { nickName: 'Tina', age: 25, tell: 121243423424, address: 'tianfuStreet' },
      { nickName: 'Tom', age: 25, tell: 121243423424, address: 'tianfuStreet' },
      { nickName: 'Alex', age: 25, tell: 121243423424, address: 'tianfuStreet' },
      { nickName: 'Hallen', age: 25, tell: 121243423424, address: 'tianfuStreet' },
      { nickName: 'Lucy', age: 25, tell: 121243423424, address: 'tianfuStreet' },
    ]
}

4.自定义组件的 wxml 节点结构在与数据结合之后，将被插入到引用位置内,结果如图所示：