WeUI组件库是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致。

在全局配置中引入WeUI

在小程序全局配置文件app.json中以扩展库的形式引入WeUI，相当于引入了对应扩展库最新版本的npm包，同时不占用小程序的包体积。

"useExtendedLib": {
    "weui": true
  },

在页面配置中指定使用的组件

在需要使用WeUI组件的页面配置文件中，指定需要使用的具体组件名称。

"usingComponents": {
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell",
    "mp-form": "weui-miniprogram/form/form"
  }

在页面中使用WeUI组件

在页面中使用WeUI，及可以使用WeUI组件（通过wxml标签），也可以使用在WeUI中预定义的样式（通过class名称）。

<view class="page">
    <mp-form>
        <mp-cells title="用户信息" footer="如信息有误，请联系管理员修改">
            <mp-cell title="姓名" ext-class="">
                <text>{{user.realName}}</text>
            </mp-cell>
            <mp-cell title="身份证号" ext-class="">
                <text>{{user.idCard}}</text>
            </mp-cell>
            <mp-cell title="手机号" ext-class="">
                <text>{{user.phoneNumber}}</text>
            </mp-cell>
        </mp-cells>
    </mp-form>

	<!--  直接使用WeUI中预定义的样式 -->
    <view class="weui-btn-area">
        <button class="weui-btn" type="default" bindtap="goBack">返回</button>
    </view>
</view>

实际效果

---

更多使用方法，可参考：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html