小程序引入WeUI组件库

通过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>

结果如下图所示：

在微信开发工具模拟器的显示结果有问题，如下图所示：

不要纠结，不要难过 ^ - ^

可以选择“预览”、“真机调试”用手机来看效果，手机上的效果是正常的！！！

正常的显示效果如下：

公司电脑上微信开发工具模拟器的显示是正常的呢

微信小程序 没有找到可以构建的npm包？按上面过程来一遍