通過npm方式下載構建,npm包名爲weui-miniprogram
步驟一:初始化
npm init -y
步驟二:
在小程序項目目錄中執行命令安裝 npm 包
npm install weui-miniprogram --production
// --production 目的在於可以減少安裝一些業務無關的 npm 包,從而減少整個小程序包的大小
步驟三:
勾選“使用 npm 模塊”選項
步驟四:
點擊開發者工具中的菜單欄:工具 --> 構建 npm
如下圖所示構建完成啦
文件目錄中即多了個“miniprogram_npm”的文件夾
文件夾下面即有了我們需要的WeUI件庫
步驟五:在 app.wxss 裏面引入 weui.wxss
/**app.wxss**/
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
步驟六:
頁面中引入 dialog 彈窗組件,
比如在一個初始化的index的page裏面引用
(1)、先在index頁面的 json 文件加入 usingComponents 配置字段
{
"navigationBarTitleText": "首頁",
"usingComponents": {
"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
}
}
(2)、然後在index頁面的 wxml 中直接使用該組件
<!--index.wxml-->
<view class="container">
<text>我是首頁</text>
<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '確認'}]}}">
<view>test content</view>
</mp-dialog>
</view>
結果如下圖所示:
在微信開發工具模擬器的顯示結果有問題,如下圖所示:
不要糾結,不要難過 ^ - ^
可以選擇“預覽”、“真機調試”用手機來看效果,手機上的效果是正常的!!!
正常的顯示效果如下:
公司電腦上微信開發工具模擬器的顯示是正常的呢