Apex-UI快应用组件库上线啦！

 

 

前言

Apex-UI是为提高快应用的开发效率，适配快应用的开发规则，由官方推出的一套快应用UI组件库。

 

Apex-UI组件库项目分成了三个仓库：

1. 组件库源码 apex-ui

2. 组件库文档 apex-ui-docs

3. 组件库示例快应用 apex-ui-sample

 

Apex-UI为你封装好了通用的交互逻辑，覆盖了主要的用户操作场景，具有以下特性：

一致性

组件样式规范，接口调用方法统一，代码清晰简洁。

定制性

根据不同的使用场景，可定制组件库适配不同场景，渐进增强可扩展。

易用性

组件类型丰富，下载即用，依照文档简单的配置，就能快速上手使用。

 

 

如果你想要开发一个快应用，又不想重复编写常用的组件，你可以使用Apex-UI组件库。或基于Apex-UI定制专属于你自己的快应用组件库。

 

搭建项目

1. 新建一个文件夹作为项目根目录mkdir my-quickapp-lib；

2. 初始化项目npm init;

3. 如果用到less、Sass等CSS预处理库，需要安装依赖；

 

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

 

组件开发

组件库的每一个组件实际就是一个快应用自定义组件，可按照个人需求增减。如果对自定义组件不太熟悉，可以查看官方文档中的自定义组件相关说明：

https://doc.quickapp.cn/tutorial/framework/parent-child-component-communication.html

 

项目结构

当组件添加完成，项目的结构基本是这样的：

./my-quickapp-lib

├── components  // 存放组件的目录

   ├── tag // 标签组件

   ├── toast // 提示框组件

├── node_modules

├── .npmignore  // 需要忽略的文件

├── package-lock.json

├── package.json

 

使用组件库

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

 

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

这种方法适合自己定制的组件库，不需要发布给其他人使用的情况；

 

2、使用npm link命令

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

https://medium.com/dailyjs/how-to-use-npm-link-7375b6219557

 

如果你想要快速开发一个快应用，又不想重复编写常用的组件，使用Apex-UI组件库可以让你轻松搞定！

 

当前版本的Apex-UI组件库包含了22个常用组件，后续会有更多组件上线，敬请关注！

 

 

 

 

 

 

快应用生态平台

 

快来关注我们吧