前言
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个常用组件,后续会有更多组件上线,敬请关注!
快应用生态平台
快来关注我们吧