# lv_ace_quickjs

**Repository Path**: icanpool/lv_ace_quickjs

## Basic Information

- **Project Name**: lv_ace_quickjs
- **Description**: lvgl bindings to quickjs based on openHarmony ace lite framework
- **Primary Language**: C
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2025-12-11
- **Last Updated**: 2026-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: LVGL, quickjs, acelite

## README

# 前言
lv_ace_quickjs 是基于 lvgl + quickjs + ace_lite 开发的一套渲染 openHarmony 类 web 开发的应用的框架。

# 快速开始

## 下载代码
```bash
git clone --recursive https://gitee.com/icanpool/lv_ace_quickjs.git
```

## 创建快应用
### 依赖
- DevEco Studio 6.0.0

### DevEco Studio
- 使用 DevEco Studio 创建 (Lite)Empty Ability 项目

![](./docs/images/lite_empty_ability.png)

![](./docs/images/lite_helloworld_create.png)

- 预览、编译、输出（一气呵成）

![](./docs/images/lite_helloworld_preview_and_build.png)

![](./docs/images/lite_helloworld_output.png)

备注：请记住上面的 entry\build\default\intermediates\lite_source\default\assets\js\MainAbility 输出目录，下面 Qt 模拟器需要加载该目录下的 js bundle 文件。

## Qt 模拟器
### 依赖
- Qt 5.15+ (Windows + MSVC/MINGW)

### 运行
- 用 Qt Creator 打开 targets/simulator/qt/lv_ace_quickjs.pro 工程
- 编译、运行

![](./docs/images/lv_ace_quickjs_simulator.png)

### 加载
- JS bundle 选择上面输出的 MainAbility 目录
- 点击 start 加载

![](./docs/images/lv_render_helloworld.png)

# 开发
## 开发文档
- [JS 应用开发 API](https://device.harmonyos.com/cn/docs/documentation/apiref/js-framework-file-0000000000611396)

## 开发状态
### 标签和组件状态

| 组件类型 | 标签名称 | 标签类型 | 组件名称 | 支持情况 |
|---------|---------|----------|---------|----------|
| 容器组件 | div | | lv_js_div | ⚠️ 部分支持 |
| 容器组件 | list | | lv_js_list | ⚠️ 部分支持 |
| 容器组件 | list-item | | lv_js_list_item | ⚠️ 部分支持 |
| 容器组件 | stack | | lv_js_stack | ⚠️ 部分支持 |
| 容器组件 | swiper | | lv_js_swiper | ⚠️ 部分支持 |
| 基础组件 | chart | | | ❌ 不支持 |
| 基础组件 | image | | lv_js_image | ⚠️ 部分支持 |
| 基础组件 | image-animator | | lv_js_image_animator | ⚠️ 部分支持 |
| 基础组件 | input | button | lv_js_button | ⚠️ 部分支持 |
| 基础组件 | input | checkbox | lv_js_checkbox | ⚠️ 部分支持 |
| 基础组件 | input | radio | | ❌ 不支持 |
| 基础组件 | marquee |  | | ❌ 不支持 |
| 基础组件 | picker-view | text | lv_js_picker_text | ⚠️ 部分支持 |
| 基础组件 | picker-view | time | | ❌ 不支持 |
| 基础组件 | progress | horizontal | lv_js_progress_horizontal | ⚠️ 部分支持 |
| 基础组件 | progress | arc | lv_js_progress_arc | ⚠️ 部分支持 |
| 基础组件 | qrcode | | | ❌ 不支持 |
| 基础组件 | slider | | lv_js_slider | ⚠️ 部分支持 |
| 基础组件 | switch | | lv_js_switch | ⚠️ 部分支持 |
| 基础组件 | text | | lv_js_text | ⚠️ 部分支持 |
| 画布组件 | canvas | | | ❌ 不支持 |
| 扩展组件 | div | spinner | lv_js_spinner | ✅ 完全支持 |

### 属性状态

| 属性类型 | 属性名称 | 支持情况 |
|---------|---------|----------|
| 常规属性 | id | ✅ 完全支持 |
| 常规属性 | style | ✅ 完全支持 |
| 常规属性 | class | ✅ 完全支持 |
| 常规属性 | ref | ✅ 完全支持 |
| 渲染属性 | for | ✅ 完全支持 |
| 渲染属性 | if | ✅ 完全支持 |
| 渲染属性 | show | ✅ 完全支持 |

### 模块状态

| 模块类型 | 模块名称 | 支持情况 |
|---------|---------|----------|
| 日志 | console | ⚠️ 部分支持 |
| 多语言 | localization | ❌ 不支持 |


# 规范
- 代码 git 提交格式：[git 知：提交格式](https://blog.csdn.net/canpool/article/details/126005367)
- 代码 style 规范 [.clang-format](./.clang-format)

# 贡献
- 欢迎提交 issue 对关心的问题发起讨论
- 欢迎 Fork 仓库，pull request 贡献

# 后语
加油，我们！