构建自己的快应用组件库,加速快应用开发!

前言

前端发展日新月异,各种框架技术层出不穷,移动端随着微信小程序的发布和上线,各大厂商都推出了各自的小程序 ;从技术形式上来看,主要分为两类,一类是以webview渲染技术为主的微信小程序,一类是以原生渲染为主导的快应用。目前已经有不少适配了微信小程序的UI组件库和框架,由于开发差异和市场的进展,快应用目前的生态较为薄弱。这既是快应用开发中的一个弱势也同样是一个机遇,我们可以做吃螃蟹的人,为适配快应用开发的规则和语法开发一套属于自己组件库。

目标

我们的目标已经比较清晰的了,作为一个快应用的开发者,开发一个适用于快应用的组件库,加速我们的开发。从前端角度看,一个组件库需要满足三方面的要求:

一致性

一致性主要指的是什么呢?对于设计师而言,组件的一致性主要是要保证样式的规范和统一。作为前端开发人员,主要是指组件的接口规范,调用方法统一,代码清晰规整。

定制性

根据不同的使用场景,同一种类型的组件需要表现不同的行为和样式。根据定制的粒度大小,可以分为组件层面的定制和整套组件库的主题定制。可定制性的大小决定了组件库适配不同场景的能力大小。

易用性

组件库的使用最好是渐进式的,针对不同的需求的开发者有由浅入深的配置方法。具体含义就是对于不需要太多定制开发的开发者,简单的配置和阅读文档就能很快上手使用,而对于有更多定制需求的场景,查阅对应的详细文档也能很快解决。

设计规范

对于一个组件库,很重要的一点就是统一,这里不仅是UI风格上的统一,也指代编码风格API等的统一。统一对于组件库的开发者来说即意味着需要抽取出不同维度的变量。这些通用变量决定我们组件库每一个组件的骨架,至于不同组件要达到的不同交互,就是每个组件内部需要实现的细节了。

规范的内容主要分为两个方面:

  • 视觉和交互规范

  • 接口和代码规范

视觉和交互规范主要有:色彩,布局,字体,图标,动效的时长、缓动,移动路径,点击状态等。

接口和代码规范主要包括:变量命名,代码缩进,文档注释等。

一般来说,自用的组件库设计规范不用太过于执着,主要是根据在具体业务开发过程中的需求来定,目的是调用方便,至于样式不同业务多有各自的规范。我们要做到的是封装好通用的交互逻辑,尽量包含更多的通用场景,这样才能在使用的时候减少我们开发的工作量。

快应用组件库

快应用中使用自定义组件的方式比较简单,因此快应用组件库的开发不必准备过多复杂的开发环境。

搭建项目

  1. 新建一个文件夹作为项目根目录mkdir my-quickapp-lib
  2. 初始化项目npm init;
  3. 如果用到less等css预处理库,还需要安装依赖;

到此,一个快应用组件库的项目实际就准备好了;下一步就是开发组件了。

组件开发

组件库的每一个组件实际就是一个快应用自定义组件,按照个人需求增加。如果对自定义组件不太熟悉,可以看下官方文档中的自定义组件相关说明,这里就不再重复说明。

项目结构

当组件添加完成,项目的结构可能是这样的:

./my-quickapp-lib
├── components  // 存放组件的目录
|   ├── tag // 组件
|   └── toast
├── node_modules
├── .npmignore  // 声明上传到npm时需要忽略的文件
├── package-lock.json
└── package.json

使用组件库

组件库有了,本地开发调试需要查看效果,这里提供两种方法:

1、简单粗暴,拷贝整个文件到快应用项目中去,按照自定义组件的方式来调用

这种方法适合自用组件库,不需要发布给其他人使用的情况;

npm link命令将本地指定目录链接到项目依赖中去。使用方式可见Understanding npm-link

文档

组件库开发完成了,要推给其他人使用,最好有一份比较清晰易懂的文档,这样方便他人使用,同时自己在写文档过程中也能发现一些组件设计不合理的地方。

尾声

以上就是一个快应用组件库的快速搭建和使用方法,没有涉及到具体的组件开发,会在后续的文章中详细分析组件的编写和设计。下面有已经开发完成的组件库,你也可以先使用一下。

组件库源码apex-ui

组件库文档地址