请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 【apex-ui】快应用组件库构建指南

0
回复
1263
查看
[复制链接]

8

主题

82

帖子

755

积分

 楼主| 2019-7-19 21:11:38 显示全部楼层 |阅读模式
本帖最后由 dadong 于 2019-7-19 16:07 编辑

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

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

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

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

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

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

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

  • 接口和代码规范

视觉和交互规范主要有:色彩,布局,字体,图标,动效的时长、缓动,移动路径,点击状态等。
接口和代码规范主要包括:变量命名,代码缩进,文档注释等。
一般来说,自用的组件库设计规范不用太过于执着,主要是根据在具体业务开发过程中的需求来定,目的是调用方便,至于样式不同业务多有各自的规范。我们要做到的是封装好通用的交互逻辑,尽量包含更多的通用场景,这样才能在使用的时候减少我们开发的工作量。

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

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

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

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

项目结构
当组件添加完成,项目的结构可能是这样的:
  1. ./my-quickapp-lib
  2. ├── components  // 存放组件的目录
  3. |   ├── tag // 组件
  4. |   └── toast
  5. ├── node_modules
  6. ├── .npmignore  // 声明上传到npm时需要忽略的文件
  7. ├── package-lock.json
  8. └── package.json
复制代码

使用组件库
组件库有了,本地开发调试需要查看效果,这里提供两种方法:
1、简单粗暴,拷贝整个文件到快应用项目中去,按照自定义组件的方式来调用
这种方法适合自用组件库,不需要发布给其他人使用的情况;
2、使用npm link命令
npm link命令将本地指定目录链接到项目依赖中去。使用方式可见Understanding npm-link

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

尾声
以上就是一个快应用组件库的快速搭建和使用方法,没有涉及到具体的组件开发,会在后续的文章中详细分析组件的编写和设计。下面是已经开发完成的组件库,如果觉得自己开发太累,不妨一试














回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册