一、通過npm方式下載構(gòu)建，npm包名為 weui-miniprogram

1、進(jìn)入小程序項(xiàng)目根目錄，執(zhí)行命令 npm init 創(chuàng)建 package.json 文件

注意：一開始是沒有的 package.json 文件的，就是在這里踩的坑...

2、在小程序 package.json 所在的目錄中執(zhí)行命令安裝 npm 包，安裝命令：

npm install weui-miniprogram

注意：此處要求參與構(gòu)建 npm 的 package.json 需要在 project.config.js 定義的 miniprogramRoot 之內(nèi)。

3、點(diǎn)擊開發(fā)者工具中的菜單欄：工具 --> 構(gòu)建 npm

4、勾選“使用 npm 模塊”選項(xiàng)

二、WeUI組件的使用

1、首先要在 app.wxss 里面引入 weui.wxss

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

2、在使用組件的頁面的 json 文件加入 usingComponents 配置字段，例如彈窗組件

{
  "usingComponents": {
    "mp-dialog": "../../miniprogram_npm/weui-miniprogram/dialog/dialog"
    // 注意：路徑與組件包在項(xiàng)目的位置有關(guān)
  }
}

3、在對(duì)應(yīng)頁面的 wxml 中直接使用該組件

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '確認(rèn)'}]}}">
    <view>test content</view>
</mp-dialog>

操作完畢。