微信小程序——引入WeUI组件库（一）

通过npm方式下载构建，npm包名为weui-miniprogram

步骤一：初始化

在小程序项目根目录执行init

npm init -y	
1

步骤二：

在小程序项目目录中执行命令安装 npm 包

npm install weui-miniprogram --production
// --production 目的在于可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小
1
2

步骤三：

勾选“使用 npm 模块”选项

步骤四：

点击开发者工具中的菜单栏：工具 --> 构建 npm

如下图所示构建完成啦

文件目录中即多了个“miniprogram_npm”的文件夹
文件夹下面即有了我们需要的WeUI件库

步骤五：在 app.wxss 里面引入 weui.wxss

/**app.wxss**/
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
1
2

步骤六：

页面中引入 dialog 弹窗组件，
比如在一个初始化的index的page里面引用

（1）、先在index页面的 json 文件加入 usingComponents 配置字段

{
  "navigationBarTitleText": "首页",
  "usingComponents": {
    "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
  }
}
1
2
3
4
5
6

（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>
1
2
3
4
5
6
7

结果如下图所示：

可以选择“预览”、“真机调试”用手机来看效果

微信小程序 提示没有找到可以构建的npm包？

可能会会出现下面这种情况

怎么解决呢？
初始化 微信小程序项目就行啦，进入小程序根目录，打开cmd，输入：npm init -y