前端开发系列100-小程序篇之UI组件库的使用和封装

本文介绍微信小程序开发中常用的第三方UI组件库的基本使用流程和如何自定义组件。

1.0 第三方UI组件库的基本使用流程

通常，在使用第三方组件库之前首先需要通过代码的托管仓库和组件库文档来了解该组件库都提供哪些自定义的组件这是组件和当前项目是否匹配等信息(很多的第三方组件库都提供了专门的演示小程序可以安装和体验)，确定之后就只需在项目中应用了。

第三方组件库的基本使用流程

>❏ 在github下载完整的仓库代码。
>❏ 把仓库代码中存放自定义组件的文件夹拷贝到项目中(`dist目录`)。
>❏ 在项目中需要使用到的页面的json文件中对第三方组件进行配置。
>❏ 在项目中需要使用到的页面的wxml文件中直接使用，同原生组件一致。
>❏ 参考组件库文档来对自定义的组件传递参数(通常是以属性赋值的方式进行)。

ex:使用iview-weapp组件库中的i-cell组件

001 在github中找到组件库的仓库托管地址并点击clone OR Download下载。

002 下载后将仓库中的dist目录拷贝到自己的项目中，这里可以在根目录下新建components文件夹专门用来存放需要用到的所有组件，因为项目中可能用到多个UI组件库，所以把dist改名为iview目录。

003 因为在项目中的mine/index.wxml文件中需要使用到iview组件库中的i-cell、i-panel以及i-cell-group组件所以需要先在mine/index.json文件中进行配置，配置项如下。

{
  "usingComponents": {
    "i-cell": "../../components/ivew/cell/index",
    "i-panel":"../../components/ivew/panel/index",
    "i-cell-group":"../../components/ivew/cell-group/index"
  }
}

004 在项目中的mine/index.wxml文件中直接使用这些组件来实现特定效果。

<i-panel title=" ">
  <i-cell-group>
    <i-cell  title="心意卡" is-link ></i-cell>
    <i-cell  title="优惠券" is-link ></i-cell>
  </i-cell-group>
</i-panel>

<i-panel title=" ">
 <i-cell-group>
   <i-cell  title="我的地址" is-link url="/pages/address/index"></i-cell>
   <i-cell  title="我的尺寸" is-link ></i-cell>
 </i-cell-group>
</i-panel>

如果需要对UI组件的样式进行调整那么可以选择直接到components/iview中对既定的样式进行修改，更好的方法是给用到的组件添加新的class,并在对应的wxss文件中进行设置。

2.0 自定义组件的封装

在小程序的开发中如果某些代码需要到多个地方用到(往往是视图结构相同而具体填充的数据不同)，那么可以考虑把这些代码抽取成模板或者是封装成自定义的组件，这里重点说明把代码封装成自定义组件的基本流程。

自定义组件和使用的基本流程

>❏ 在微信提供的官方开发工具中代码目录中新建`Component文件`。
>❏ 在自动生成的四个文件中编写组件内容、组件样式、组件逻辑控制相关的代码。
>❏ 在项目中需要使用到自定义组件的页面的.json文件中进行配置，设置组件的名称和路径。
>❏ 在项目中需要使用到自定义组件的页面的.wxml文件中直接像系统组件那样使用和传参即可。

ex:自定义组件i-address的封装和使用

这里先给出自定义组件使用的效果图。

001 在项目的根目录中创建components文件夹，该目录用于存放项目中用到的所有组件。

002 在components目录下创建addressComponent文件夹，新建Component文件命名为addressview，这样会在该目录下面生成四个文件，后缀分别是.wxml(控制内容)、.wxss(控制样式)、.json(控制配置，表明自己是自定义组件)和.js(控制初始化数据、属性列表和添加在组件身上的方法)。

wendingding$ tree
.
└── components
    └── addressComponent
        ├── addressview.js
        ├── addressview.json
        ├── addressview.wxml
        └── addressview.wxss

003 编写addressview.wxml文件，控制组件的结构。

<view class='address'>
<view class='address-top'>
<text class='address-top-name'>{{ name }}</text>
<button bindtap='delClick' class='address-top-del' plain>删除</button>
<button class='address-top-edit'>编辑</button>
</view>
<view class='address-bottom'>
<text class='address-bottom-phone'>电话号码：{{ phoneText }}</text>
<text class='address-bottom-detail'>联系地址：{{ detailText }}</text>
</view>
</view>

004 编写addressview.wxss文件，控制组件的样式。

.address
{
  width: 100%;
  height: 240rpx;
  background: #fff;
  margin-top: 20rpx;
}

.address-top{
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #eee;
  position: relative;
}

.address-bottom
{
  width: 100%;
  height: 140rpx;
  /* background: yellowgreen */
}

.address-top-name
{
  padding-left: 30rpx;
}

.address-top-del,.address-top-edit
{
  width: 130rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  position: absolute;
  border-radius: 20rpx;
  top: 20rpx;
}

.address-top-edit
{
  right: 30rpx;
  background: #333;
  color: #fff
}

.address-top-del
{
  right: 180rpx;
}

.address-bottom-phone,.address-bottom-detail
{
  display: block;
  font-size: 30rpx;
  color: #666;
  padding-left: 30rpx;
  height: 70rpx;
  line-height: 70rpx;
}

005 编写addressview.js文件的代码，控制组件的属性、初始化数据以及方法。

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    name:{
      type:String,
      value:"默认的收件人"
    },
    phoneText: {
      type: String,
      value: "88888888888888"
    },
    detailText: {
      type: String,
      value: "北京市天安门城楼"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    delClick:function(e){
      //....
      //删除按钮的事件处理函数
    }
  }
})

006 在项目的address页面中需要用到这个自定义组件，那么就先在对应的json文件中进行配置，主要是设置自定义组件的名称和对应的路径，这里给出address/index.json文件内容示例。

{
  "usingComponents": {
    "i-address": "../../components/addressComponents/addressview"
  }
}

007 在页面对应的wxml文件中直接使用自定义组件，这里给出address/index.wxml文件内容示例。

<i-address wx:key='index' wx:for='{{ arrayData }}'name='{{ item.name }}' phoneText='{{ item.phoneText }}' detailText='{{ item.detailText }}'></i-address>

008 自定义组件需要接收数据，通过编写对应的js文件设置，这里给出address/index.js文件内容示例。

// pages/address/index.js
Page({
  data: {
    arrayData:[
                    {
                      name: "小猪猪猪",
                      phoneText: "123445455846",
                      detailText: "广州市天河区体育中心南路水电费",
                    },
                    {
                      name: "熊大和赵琳",
                      phoneText: "154546556465466",
                      detailText: "广州市天河区体育中心南路水电费",
                    },
                    {
                      name: "花仙子",
                      phoneText: "154546556465466",
                      detailText: "广州市天河区体育中心西路",
                    }
             ]
  }
})