微信小程序之自定义组件

之前的小程序组件基本都是由template来完成的，但是在基础版本库的1.6.3之后，小程序提供了一个更加人性化的自定义组件（Component）。

下面我们以自定义一个展示列表为例，一步一步自定义一个列表展示组件。

首先创建一个目录components,然后创建一个名为list的组件：（包含list.js、list.json、list.wxml、list.wxss四个文件）

image.png

对于这四个文件的具体介绍可在官方文档查看。

在list.js中建立一个属性movies

image.png

然后在list.wxml页面中加入以下代码：

<view>
  <block wx:for="{{movies}}" wx:key="*this">
    <view class="movie">
      {{item}}
    </view>
  </block>
</view>

在list.wxss页面中加入以下代码：

.movie {
  color: red;
}

这样组件就开发完成了，最后就剩下引用组件。
我在pages下面新建页面dongman

image.png

首先给dongman.json中加入usingComponents

image.png

然后在dongman.js中定义movies数据：

data: {
    movies: [1,2,3,4,5,6]
  }

最后在dongman.wxml中引用组件：

<list movies="{{movies}}"></list>

最终结果：

image.png