使用npm 引入WeUi组件

一、引言

1、WeUI组件：

刚开始学习小程序的开发，经过一段研究下，开发需要用到对话框，于是看到文档的WeUI组件库有现成的，如下图，果断复制到demo项目中，然后发现JSON文件路径配置不明，详细搜索阅读一波，才发现原来WeUI组件库不是自带的（比如像swiper组件不需要引入什么，直接在wxml就可以用了）。WeUI算是第三方组件，需要手动引入。

2、官方说明WeUI引入方式有两种：

果断选择第二种看看，因为之前听过npm，知道这个是用代码就能下载东西的工具，例如yum之类的。

3、了解npm是神马：

百度一下，npm是NodeJS的包管理工具（一脸懵逼，Node.js不是后端服务器吗）。经过一番百度，知道npm是管理项目那些引入的js库的，可以方便下载引用的一个工具就行了（比如你要引用JQuery框架），不用管Node.js是什么东西。（懵逼到底）

二、正文

1、安装npm。到官网https://nodejs.org/en/download/下载安装包

安装时，选中Add to PATH，因为这个安装完成会自动帮你加到系统变量就不用手动加了，然后后面默认就好。

安装完成后，用电脑的的cmd命令：npm -v 会显示npm的版本号，如果出现“npm不是内部或外部命令“，则说明环境变量没有设置对

2、在项目详细中勾选Npm构建按钮

3、点击项目结构栏的空白位置，鼠标右键，选择“在终端打开“

4、输入 npm init 命令（相当于在这个目录初始化本地的代码库）。

然后一直按Enter键，不用改这些配置，最后输入yes，这个命令完成后，根目录会生成一个package.json（npm配置文件）。

5、接下来安装npm的包了（下载WeUi框架），使用 npm install weui-miniprogram --save命令。

根目录会生成一个node_modules文件夹，打开node_modules文件夹，WeUi的框架资源都在weui-miniprogram目录中了，于是得出结论，以后在这个项目使用npm下载的第三方框架、组件都会在这个文件夹中，node_modules正是npm安装的包存放路径。

6、构建npm。在小程序开发工具栏-点构建npm后，根目录生成miniprogram_npm文件夹，于是小程序项目的npm正式构建完成。

7、如果期间出现了这些错误，说明你没有正确使用npm命令（被错误选中的我，百度了很久后欲哭无泪）

解决方案：参照网站的https://developers.weixin.qq.com/community/develop/doc/0000044a2d4478d99658983b156800大佬，安全登陆新领地
（1）先把 package-lock.json，package.json，node_modules，miniprogram_npm都删干净
（2）重新npm init命令步骤
（3）重新npm install weui-miniprogram --save 命令步骤
（4）重新在工具栏构建npm

8、使用npm都能构建正常的话，参考小程序教程，在app.wxss 样式文件头部需要引入：

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

然后在用到组件的页面的json配置文件中：
{"usingComponents": { "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog" } }
mp-dialog的路径正是 /miniprogram_npm/weui-miniprogram/下的目录

所以官网WeUi文档中，如下图的路径，…/components/换成/miniprogram_npm/weui-miniprogram/就好了。

大功告成：

9、扩展：百度一下期间，发现国内一个Vant Weapp的UI组件库，对比一下官方的WeUI，这个组件库的UI还是比较美观，组件挺多，比较适合快速开发，有这种需要的可以用Vant Weapp组件开发。

Vant Weapp连接：https://youzan.github.io/vant-weapp/#/intro

参考：
1、https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html
2、https://jingyan.baidu.com/article/bea41d4328b364f4c41be674.html
3、https://developers.weixin.qq.com/community/develop/doc/0000044a2d4478d99658983b156800