小白如何上手几款微信小程序UI组件库

文章目录

1. 环境信息
2. GO
- 2.1 新建项目
- 2.2 使用WeUI微信官方组件
- - 2.21. 命令行进入该项目文件夹
  - 2.22. npm初始化
  - 2.23. npm安装该组件包
  - 2.24.npm包构建
  - 2.25. 使用WeUI其中的组件示例
- 2.3 使用VantUI
- 2.4 使用WuxUI
- 2.5 使用WussUI
- 2.6 使用ColorUI

1. 环境信息

环境名	版本信息
电脑系统	win10专业版
微信开发者工具	v1.02.1911180
node.js	v12.16.0
npm	6.13.4

在往下阅读之前，建议先阅读熟悉以下知识内容：

node.js
node.js介绍和使用
node.js的安装和配置(记得换成自己的路径)
node.js安装配置
微信小程序如何使用npm包
微信小程序如何使用npm教程
微信小程序如何使用npm教程
微信小程序自定义组件的使用
官方文档介绍

2. GO

2.1 新建项目

2.2 使用WeUI微信官方组件

官方文档：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html

2.21. 命令行进入该项目文件夹

2.22. npm初始化

npm init

然后填入信息
这个步骤的具体操作解释：
解释npm初始化

2.23. npm安装该组件包

npm install weui-miniprogram -S --production

2.24.npm包构建

接着设置使用npm模块

点击微信开发者工具菜单栏的工具，选择构建npm

成功

2.25. 使用WeUI其中的组件示例

首先要在app.wxss里面引入weui.wxss

去组件文档找一个它的组件，分别复制它提供的各个文件代码，这里以一个搜索框为举例

index.json文件中引入该组件

index.wxml文件复制官方的组件代码

按照官方文档中在index.js中添加相应的代码，然后保存运行
最后参数样式怎么改看文档组件改好就行了

2.3 使用VantUI

官方文档：
https://youzan.github.io/vant-weapp/#/quickstart
步骤与WeUI一样
安装命令

npm install @vant/weapp -S --production

这个npm构建不知道为什么那么久，可能电脑老了

接下来看文档用组件吧，很清楚。

2.4 使用WuxUI

官方文档：
https://wux-weapp.github.io/wux-weapp-docs/#/introduce

使用跟前面都是一样的，文档也很清楚

2.5 使用WussUI

官方文档：https://phonycode.github.io/wuss-weapp/quickstart.html

使用跟前面都是一样的，文档也很清楚

2.6 使用ColorUI

官网：https://www.color-ui.com/
写得非常棒，可惜文档还没写出来！，使用只能下载源码复制使用。

如何上手看它的github：
https://github.com/weilanwl/ColorUI
从“使用原生小程序开发”开始看