我们上一篇讲解了TDesign模板的基本用法，如何开始阅读模板。本篇我们讲解一下自定义组件的用法。
1 显示文本
官方模板在顶部除了显示图片外，还显示了一段文字介绍。文字是嵌套在容器组件里，先按照他的写法复制代码到我们自己创建的index.wxml文件里
<view class="main"> <view class="title-wrap"> <image class="title-icon" mode="aspectFit" src="/assets/TDesignLogo@2x.png" aria-label="TDesign Logo" /> </view> <view> TDesign 适配微信小程序的组件库 </view> </view>
因为我们的布局是从上到下，默认状态下view组件是块级布局，所谓的块级布局就是占满一行，为了看到具体的效果，我们给新添加的布局组件添加一个样式
.desc{ border:1px red solid }
然后在布局容器组件使用class属性引用我们的样式
<view class="desc"> TDesign 适配微信小程序的组件库 </view>
样式是增加了一个边框，可以看到新添加的这个容器组件是占满一行的
知道布局的原理后，给文本组件添加一些新的样式
.desc { color: rgba(0, 0, 0, 0.4); margin-top: 32rpx; font-size: 28rpx; font-weight: 400; line-height: 44rpx; margin-bottom: 48rpx; padding-left: 16rpx; padding-right: 16rpx; }
首先是设置了文章的颜色，颜色模式我们使用了rgb来设置，每个位置的取值范围是0~255，最后一位是不透明度，取值是0 ~ 1，这样通过不透明度的设置我们就得到了一个灰色
其余的给了文本一定的内边距和外边距，同时设置了字体大小、字重和行高
2 自定义组件
接着官方模板引入了一个自定义组件
<pull-down-list wx:for="{{list}}" name="{{item.name}}" icon="{{item.icon}}" wx:key="name" childArr="{{item.childArr}}" bind:click="clickHandle" />
这里的pull-down-list就是自定义组件，首先是要在我们的index.json文件里引入
{ "usingComponents": { "pull-down-list": "../../components/pull-down-list/index" } }
使用usingCompnents属性来标注我们使用了哪些组件，然后属性名表示我们组件的名称，属性值配置了自定义组件具体的路径
…/表示相对路径，这样就找到了根目录下的组件
一个自定义组件包含index.js、index.json、index.wxml、index.wxss
在index.json中声明这是一个自定义组件
{ "component": true }
在index.js里声明了组件有哪些属性，有哪些方法
