构建自己的快应用组件库，加速快应用开发！
前言
前端发展日新月异，各种框架技术层出不穷，移动端随着微信小程序的发布和上线，各大厂商都推出了各自的小程序 ；从技术形式上来看，主要分为两类，一类是以webview渲染技术为主的微信小程序，一类是以原生渲染为主导的快应用。目前已经有不少适配了微信小程序的UI组件库和框架，由于开发差异和市场的进展，快应用目前的生态较为薄弱。这既是快应用开发中的一个弱势也同样是一个机遇，我们可以做吃螃蟹的人，为适配快应用开发的规则和语法开发一套属于自己组件库。
目标
我们的目标已经比较清晰的了，作为一个快应用的开发者，开发一个适用于快应用的组件库，加速我们的开发。从前端角度看，一个组件库需要满足三方面的要求：
一致性
一致性主要指的是什么呢？对于设计师而言，组件的一致性主要是要保证样式的规范和统一。作为前端开发人员，主要是指组件的接口规范，调用方法统一，代码清晰规整。
定制性
根据不同的使用场景，同一种类型的组件需要表现不同的行为和样式。根据定制的粒度大小，可以分为组件层面的定制和整套组件库的主题定制。可定制性的大小决定了组件库适配不同场景的能力大小。
易用性
组件库的使用最好是渐进式的，针对不同的需求的开发者有由浅入深的配置方法。具体含义就是对于不需要太多定制开发的开发者，简单的配置和阅读文档就能很快上手使用，而对于有更多定制需求的场景，查阅对应的详细文档也能很快解决。
设计规范
对于一个组件库，很重要的一点就是统一，这里不仅是UI风格上的统一，也指代编码风格API等的统一。统一对于组件库的开发者来说即意味着需要抽取出不同维度的变量。这些通用变量决定我们组件库每一个组件的骨架，至于不同组件要达到的不同交互，就是每个组件内部需要实现的细节了。
规范的内容主要分为两个方面：
-
视觉和交互规范
-
接口和代码规范
视觉和交互规范主要有：色彩，布局，字体，图标，动效的时长、缓动，移动路径，点击状态等。
接口和代码规范主要包括：变量命名，代码缩进，文档注释等。
一般来说，自用的组件库设计规范不用太过于执着，主要是根据在具体业务开发过程中的需求来定，目的是调用方便，至于样式不同业务多有各自的规范。我们要做到的是封装好通用的交互逻辑，尽量包含更多的通用场景，这样才能在使用的时候减少我们开发的工作量。
快应用组件库
快应用中使用自定义组件的方式比较简单，因此快应用组件库的开发不必准备过多复杂的开发环境。
搭建项目
- 新建一个文件夹作为项目根目录
mkdir my-quickapp-lib； - 初始化项目
npm init; - 如果用到less等css预处理库，还需要安装依赖；
到此，一个快应用组件库的项目实际就准备好了；下一步就是开发组件了。
组件开发
组件库的每一个组件实际就是一个快应用自定义组件，按照个人需求增加。如果对自定义组件不太熟悉，可以看下官方文档中的自定义组件相关说明，这里就不再重复说明。
项目结构
当组件添加完成，项目的结构可能是这样的：
./my-quickapp-lib
├── components // 存放组件的目录
| ├── tag // 组件
| └── toast
├── node_modules
├── .npmignore // 声明上传到npm时需要忽略的文件
├── package-lock.json
└── package.json
使用组件库
组件库有了，本地开发调试需要查看效果，这里提供两种方法：
1、简单粗暴，拷贝整个文件到快应用项目中去，按照自定义组件的方式来调用
这种方法适合自用组件库，不需要发布给其他人使用的情况；
2、使用npm link命令
npm link命令将本地指定目录链接到项目依赖中去。使用方式可见Understanding npm-link
文档
组件库开发完成了，要推给其他人使用，最好有一份比较清晰易懂的文档，这样方便他人使用，同时自己在写文档过程中也能发现一些组件设计不合理的地方。
尾声
以上就是一个快应用组件库的快速搭建和使用方法，没有涉及到具体的组件开发，会在后续的文章中详细分析组件的编写和设计。下面有已经开发完成的组件库，你也可以先使用一下。