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

快应用 Jul 23, 2019

前言

前端发展日新月异,各种框架技术层出不穷,移动端随着微信小程序的发布和上线,各大厂商都推出了各自的小程序 ;从技术形式上来看,主要分为两类,一类是以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

组件库文档地址

vivo developer

快应用引擎、工具开发者、快应用生态拓展达人(vivo)。

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.