当前位置: 代码迷 >> 综合 >> Apex-UI快应用组件库上线啦!
  详细解决方案

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

热度:73   发布时间:2023-12-12 14:12:53.0

 

640?wx_fmt=png

 

前言

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个常用组件,后续会有更多组件上线,敬请关注!

 

 

640?wx_fmt=png

 

640?wx_fmt=png

 

640?wx_fmt=png

 

 

快应用生态平台

640?wx_fmt=jpeg

 

快来关注我们吧