使用 Wux Weapp 快速开发一个小程序 - 01

Wux Weapp
Wux Weapp 是一套组件化、可复用、易扩展的微信小程序 UI 组件库。
特性
UI 样式可配置，拓展灵活，轻松适应不同的设计风格
80+ 丰富的组件，能够满足移动端开发的基本需求
文档链接： https://wux-weapp.github.io/wux-weapp-docs/#/introduce

UI 组件库的选择

常见的 UI 组件库少说有10种了吧，如何选择一个适合自己的/团队的组件库呢？

切合项目需求。如果是简单明了的小程序，使用官方组件库就基本能满足基础的界面需求。

扩展性。考虑到业务后期改动，样式界面可能改来改去，一套UI库一般很重，改起来很麻烦。

可复用性。组件就是为了复用的吧，不管自己写组件还是用别人的组件。

文档是否完善，社区是否活跃等等。。。

之前用过官方和 vant ui。之前都是自己写组件，后面开发速度更不上，使用的vant ui，在电商这块vant还是很舒服的。就怕遇到有灵魂的设计师，后期真的是噩梦了，改起来好痛苦。。。

看了各大网站的测评，自己也用了一天体验小程序，最后选择 Wux ，组件很丰富，灵活，也和我即将开始做的需求贴合，开搞

官方文档

官方文档用 docsify 构建，部署在github，访问速度感人，让人有放弃的冲动。

搬梯子看有的不方便，突然想到可以找到文档地址，部署在本地，不知道这样合适不合适，，但是github.io访问速度真的难受，开搞。
wux文档地址： https://github.com/wux-weapp/wux-weapp-docs。
docsify文档地址： https://docsify.js.org/#/zh-cn/quickstart。

//安装 docsify 
npm i docsify-cli -g
// cd 文档目录
docsify serve ./

定制自己的 UI 库

文档：随着组件库越来越丰富，文件的体积也越来越大，某些时候我们可能只需要其中的一个或多个组件，如果直接引入整个组件库的话是不合适的，这时候就需要我们将要使用到组件给单独抽离出来。

demo 下载出来看文件大小还是挺大的 951KB。

根据官方推荐的方式我们进行抽离。官方推荐 使用 定制主题 功能自动抽离组件。千万别尝试手动～～

// 使用方法,早上不知怎么 git clone 一直失败，手动下载3秒搞定。
git clone https://github.com/wux-weapp/wux-weapp.git // 克隆项目到本地，或手动下载也可
cd wux-weapp // 进入项目根目录
touch config.custom.json // 新建一个配置文件，若已创建可忽略此步骤
npm install // 安装依赖包
npm run build -- --config ./config.custom.json --output ./build // 编译文件

自定义后 160多KB，完全可以接受，很舒服。

Wux 使用

• 微信开发者工具创建新项目。
• 将定制编译后的文件拖到项目文件里
• 这里不用使用 npm 构建了，正常组件使用
• 复制个官方demo跑一下，看是否报错

简单的定制后跑的一个demo： https://github.com/Grainfills/Wux-Weapp 有同样使用wux的踩过坑的小伙伴来交流一下哈