微信小程序引入原生组件——WeUI组件库，详细步骤

第一步：查看是否可使用npm命令，没有则安装：

我这里已经安装了，如果没有则安装node.js

 node官网下载地址：https://nodejs.org/en/

注意这个windows 64位的：

 其他系统看这里：点击dowloads

先点击LTS，下面可选 32位或者64位的 

下载好安装包，一路next即可。

终端输入 npm -v   ，看见版本号 即安装成功

第二步：微信开发工具，打开微信小程序项目，没有就新建一个：

这里我就新建一个 小程序项目：

打开微信开发工具：选择小程序，点击 + 

修改好自己的项目名，已经项目路径。点击测试号 （已经申请的，可填写自己的appid）

点击新建：

至此简单的微信小程序项目完成：

第三步：步入正题，引入组件——WeUI组件库

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

①终端进入项目的根目录（我这里是lemon_test），输入 npm init 命令

右击pages 选择终端打开， 输入cd ..命令，即可进入根目录

输入 npm init ，一直回车键即可

②继续输入 npm i weui-miniprogram --production 命令

③回到微信开发者工具，开始npm构建：

 点击，详情->本地设置->使用npm模块，勾选npm模块

点击工具，选择构建npm

构建完成，点击确认

第四步：开始使用WeUI组件，验证是否构建成功：

①新建一个自己的页面：

在app.js添加自己的页面 "pages/lemon/lemon",  修改后点击编译,自动生成lemon文件夹及其相关文件

②打开微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/form.html

JSON内容：覆盖到lemon.josn中(注意修改路径 ../miniprogram_npm/weui-miniprogram/)

WXML内容：覆盖到lemon.wxml

JAVASCRIPT内容：覆盖到lemon.js

根据开发文档：

app.wxss添加内容:@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

添加好，点击编译：即可

此时右侧表单样式已经成功出现，组件库构建成功！！！

第五步：试着添加其他样式：以Msg样式为例：

新建自己的Msg页面：

在app.josn中添加"pages/msg/msg", 

点击编译，自动生成我们的页面

 查看开发文档，

将JSON内容覆盖到msg.json中(注意修改路径)

WXML内容覆盖到msg.wxml中

点击编译，大家发现左侧样式已经出现。你学会吗？愉快的开发属于自己的微信小程序吧！

谢谢查看~