微信开发工具npm安装weui组件

windows安装node.js

下载安装包

下载地址如下
https://nodejs.org/en/download/
打开官网以后 点击LTS中的msi的64位或者32位

下载后常规下一步下一步安装

检测是否安装成功

然后右击鼠标 点击运行 输入cmd运行

再在黑窗口中输入 node -v 检测是否能显示安装的版本 如下图能提示版本号 表示安装成功

安装weui

打开小程序项目的根目录 按住shift再点击鼠标右键 选择powershell窗口

然后在弹出的窗口中输入
npm init -y
此时 根目录就会多出下面的这个文件

然后再输入npm i weui-miniprogram
全过程如下图

然后又会多出下面的文件

再点击构建npm

就会提示构建完成

生成的miniprogram 文件就是weui组件库 其实相当于微信自定义的控件被你添加到了自己的项目而已

测试 使用weui

首先在app.wxss中顶部添加下方代码 引用 weui控件库的样式文件 不然不行
@import ‘/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss’;
这一步的话 其实是根据实际情况来定的 有些组件库不需要引用样式 安装即可使用

（下面为官网解析）
（下面以dialog 弹窗组件为例子）
然后再需要用到控件的页面 json 文件加入 usingComponents 配置字段 “mp-dialog”: “weui-miniprogram/dialog/dialog”

然后就可以直接在这个页面中使用控件了

值得注意的是 如果使用其他组件库的时候 按照上面的方式添加组件显示的时候出现异常
那么可以尝试在app.json中删除下面这行
“style”: “v2”,