引入引用WeUI組件方法
- 通過(guò)npm方式释漆，（此方法比較復(fù)雜些）绒尊。可以通過(guò)npm方式下載構(gòu)建甫菠，npm包名為weui-miniprogram挠铲。
- 按需求下載，地址：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html
本篇文章采用第一種方法寂诱，實(shí)現(xiàn)方式：
1拂苹、進(jìn)入node.js（https://nodejs.org/en/）官網(wǎng)，下載官網(wǎng)推薦的版本痰洒。
nodejs下載
2瓢棒、下載完成后，我們雙擊安裝包带迟，直接下一步音羞。所有配置按默認(rèn)安裝推薦的來(lái)進(jìn)行。不需要改任何設(shè)置仓犬。
3嗅绰、安裝完成后，我們打開(kāi)微信小程序的開(kāi)發(fā)工具搀继，進(jìn)入項(xiàng)目窘面，找到如下圖中的終端。
終端
npm init
package.json
package-lock.json
構(gòu)建npm
設(shè)置使用npm模塊
9椎侠、在小程序頁(yè)面對(duì)應(yīng)的app.wxss文件中引入weui.wxss，添加代碼：
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
10措拇、在小程序頁(yè)面對(duì)應(yīng)的.json文件中引入組件我纪，添加代碼：
"usingComponents": {
"mp-cells": "/miniprogram_npm/weui-miniprogram/cells/cells",
"mp-cell": "/miniprogram_npm/weui-miniprogram/cell/cell",
"mp-badge": "/miniprogram_npm/weui-miniprogram/badge/badge"
}
11、在小程序頁(yè)面對(duì)應(yīng)的.wxml文件中丐吓，添加代碼：
<view class="container">
<view class="page__bd">
<mp-cells title="新消息提示跟摘要信息后浅悉，統(tǒng)一在列表右側(cè)">
<mp-cell title="單行列表" link>
<view slot="footer">
<view style="display: inline-block;vertical-align:middle; font-size: 17px;">詳細(xì)信息</view>
<mp-badge style="margin-left: 5px;margin-right: 5px;" content="9" ext-class="blue"/>
</view>
</mp-cell>
</mp-cells>
</view>
</view>
