小程序随笔14:引用WeUI组件方法(一)

引入引用WeUI组件方法

1. 通过npm方式，（此方法比较复杂些）。可以通过npm方式下载构建，npm包名为weui-miniprogram。
2. 通过页面按需下载地址：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html

本篇文章采用第二种方法，实现方式：
1、将下载的weui-miniprogram放到项目的根目录下。

2、在小程序页面对应的.wxss文件中引入weui.wxss，添加代码：

@import '/weui-miniprogram/weui-wxss/dist/style/weui.wxss'

3、在小程序页面对应的.json文件中引入组件，添加代码：

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

4、在小程序页面对应的.wxml文件中，添加代码：

<view class="container">
    <view class="page__hd">
        <view class="page__title">Badge</view>
        <view class="page__desc">徽章</view>
    </view>

    <view class="page__bd">
        <mp-cells title="新消息提示跟摘要信息后，统一在列表右侧">
            <mp-cell title="单行列表" link>
                <view slot="footer">
                    <view style="display: inline-block;vertical-align:middle; font-size: 17px;">详细信息</view>
                    <mp-badge style="margin-left: 5px;margin-right: 5px;" ext-class="color:blue"/>
                </view>
            </mp-cell>
        </mp-cells>
    </view>
</view>

效果图来了： 效果图