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