【鸿睿创智志鸿PAD】零代码手写，创建 OpenHarmony 星星辐射动画

原创于 2026-08-07 21:52:38 发布 · 313 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

OpenHarmony

智能体

鸿睿创智开发板

话题

#编程达人挑战赛·第12期

本文记录了使用华为 AI 辅助开发工具 DevEco Code，仅通过自然语言对话从零创建一个 OpenHarmony 6.1 应用全过程。演示视频已发布至 B 站：BV1mWub6QExY。

在这里插入图片描述

一、引言

DevEco Code 是华为推出的 AI 辅助开发 CLI 工具，能根据自然语言描述自动完成项目创建、代码生成、编译构建和设备部署。本文的目标很明确：不手写一行代码，仅通过自然语言对话完成一个完整的 OpenHarmony 应用。

二、项目需求描述

初始需求

请创建一个 OpenHarmony 6.1 的测试工程 Stars，显示一个以屏幕中心为原点，不断向外辐射五颜六色的星星符号的应用。

迭代需求

中间显示一个锚点，手拖动锚点则星星的中心跟着变化。

两句自然语言，DevEco Code 完成了从工程创建到动画实现到交互迭代的全部工作。

在这里插入图片描述

三、项目创建过程

3.1 环境识别

DevEco Code 启动后自动扫描本地环境，识别出：

DevEco Studio 安装路径：C:\Program Files\Huawei\DevEco Studio
OpenHarmony SDK 路径：C:\Users\haili\AppData\Local\OpenHarmony\Sdk\23
已有工程列表（作为模板参考）

3.2 模板复用与目录创建

以已有的 OHTest 工程为模板，AI 逐层创建项目结构：

Stars/
├── AppScope/
│   ├── app.json5
│   └── resources/base/element/string.json
│   └── resources/base/media/          # 图标资源
├── entry/
│   ├── build-profile.json5
│   ├── hvigorfile.ts
│   ├── oh-package.json5
│   └── src/main/
│       ├── module.json5
│       ├── ets/
│       │   ├── entryability/EntryAbility.ets
│       │   ├── entrybackupability/EntryBackupAbility.ets
│       │   └── pages/Index.ets        # 核心动画页面
│       └── resources/
├── build-profile.json5
├── oh-package.json5
├── hvigorfile.ts
└── hvigor/hvigor-config.json5

3.3 关键配置要点

compileSdkVersion: 23 — 对应 OpenHarmony 6.1
runtimeOS: “OpenHarmony” — 区分 HarmonyOS 与 OpenHarmony 构建
deviceTypes: [“default”, “tablet”] — OpenHarmony SDK 23 无 phone 设备定义，需使用 default（后文详述踩坑过程）
bundleName: “com.example.stars” — 包名

四、核心动画实现解析

4.1 技术选型

为什么选择 Canvas + setInterval，而不是 @State 驱动 UI 刷新？

方案	优点	缺点
@State + Text 组件数组	声明式，框架自动刷新	80 颗星星逐帧触发 UI 树重建，性能差
Canvas + setInterval	直接像素绘制，帧率稳定	需手动管理动画循环

对于 80 颗星星持续运动的高频动画场景，Canvas 是更合理的选择。

4.2 StarInfo 数据类

每颗星星持有独立的运动参数：

class StarInfo {
  angle: number = 0;      // 辐射方向（弧度）
  distance: number = 0;   // 距中心距离
  speed: number = 0;      // 径向速度 (px/s)
  size: number = 0;       // 字号大小
  color: string = '';     // 颜色
  opacity: number = 1;    // 透明度
}

初始化时随机分配角度和速度，使星星向四面八方辐射。

4.3 动画循环

this.spawnTimer = setInterval(() => {
  let now = Date.now();
  let dt = (now - this.lastTime) / 1000;  // 帧间隔
  this.lastTime = now;
  if (dt > 0.1) { dt = 0.1; }            // 防止跳帧
  this.renderFrame(dt);
}, 50);  // 50ms ≈ 20fps

每帧执行：

清除画布 → 黑色填充
更新每颗星星 → distance += speed * dt
计算透明度 → opacity = 1 - distance/maxDist，越远越淡
绘制星星 → 用 fillText('★', x, y) 渲染，字号随距离缩小
重置越界星星 → 回到中心重新发射

4.4 中心锚点绘制

锚点由两层圆形组成：

// 外圈：半透明大圆 + 白色描边
ctx.beginPath();
ctx.arc(cx, cy, ANCHOR_RADIUS, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';
ctx.fill();
ctx.strokeStyle = '#FFFFFF';
ctx.lineWidth = 2;
ctx.stroke();

// 内圈：实心小圆点
ctx.beginPath();
ctx.arc(cx, cy, 3, 0, Math.PI * 2);
ctx.fillStyle = '#FFFFFF';
ctx.fill();

4.5 拖动交互

通过 Canvas 的 onTouch 事件实现：

.onTouch((event: TouchEvent) => {
  let touch = event.touches[0];
  if (event.type === TouchType.Down) {
    // 判定是否点击锚点区域（3倍半径容差）
    let dx = touch.x - this.centerX;
    let dy = touch.y - this.centerY;
    if (dx * dx + dy * dy <= (ANCHOR_RADIUS * 3) ** 2) {
      this.isDragging = true;
    }
  } else if (event.type === TouchType.Move && this.isDragging) {
    this.centerX = touch.x;
    this.centerY = touch.y;
  } else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
    this.isDragging = false;
  }
})

锚点的触摸判定范围设为可视半径的 3 倍，方便手指点中。拖动时 centerX/centerY 实时更新，下一帧星星即从新位置辐射。

五、构建踩坑与解决

5.1 deviceTypes 报错

现象： The intersection of the system capability sets configured for multiple devices is empty

原因： OpenHarmony SDK 23 的 device-define 目录下没有 phone.json，只有 default.json、tablet.json、tv.json 等。

解法： 将 module.json5 中的 deviceTypes 从 ["phone", "tablet"] 改为 ["default", "tablet"]。

5.2 媒体资源未定义

现象： The resource reference '$media:layered_image' is not defined

原因： 项目创建时从模板工程拷贝媒体文件失败（Copy-Item 静默失败），缺少 layered_image.json、background.png、foreground.png。

解法： 手动重新执行 Copy-Item，将模板工程的 media 目录完整拷贝。

5.3 Java 运行时缺失

现象： spawn java ENOENT，ArkTS 编译成功但 HAP 打包失败。

原因： HAP 打包依赖 Java 运行时，系统 PATH 中无 java 命令。

解法： 设置 JAVA_HOME 指向 DevEco Studio 自带的 JBR（JetBrains Runtime）：

$env:JAVA_HOME = 'C:\Program Files\Huawei\DevEco Studio\jbr'
$env:PATH = "$env:JAVA_HOME\bin;$env:PATH"

5.4 签名缺失无法安装真机

现象： error: failed to install bundle. code:9568320 error: no signature file

原因： HAP 未签名，真机拒绝安装。

解法： 需在 DevEco Studio 中手动配置签名：File → Project Structure → Signing Configs → Automatically generate signature。

六、ArkTS 静态检查

DevEco Code 内置 arkts_check 工具，可在全量构建之前快速检测 ArkTS 严格模式违规，比 build_project 更快：

arkts_check files=["entry/src/main/ets/pages/Index.ets"]
# → No errors found in 1 file(s).

本项目 Index.ets 一次性通过，零错误。常见的检测规则包括：

arkts-no-standalone-this — 禁止在 struct 外使用 this
arkts-no-obj-literals-as-types — 禁止用对象字面量做类型注解
arkts-no-any-unknown — 禁止使用 any/unknown

七、效果与总结

AI 辅助开发流程回顾

自然语言需求 → 环境感知与模板识别 → 代码生成 → 静态检查 → 构建 → 踩坑排错 → 迭代需求 → 重新构建

整个过程中开发者只说了两句话：

“创建 OpenHarmony 6.1 测试工程 Stars，显示星星辐射动画”
“中间显示锚点，拖动锚点则星星中心跟着变化”

其余全部由 DevEco Code 自主完成，包括目录结构创建、配置文件编写、动画算法实现、构建错误诊断与修复。

DevEco Code 的价值

环境感知：自动发现 SDK 路径、DevEco Studio 安装位置、已有工程
模板复用：基于已有工程结构生成新项目，减少遗漏
即时排错：构建失败后自动分析错误原因并修复（deviceTypes、媒体资源、Java 路径）
增量迭代：需求变更时精准修改，而非重新生成

局限

签名配置仍需人工在 DevEco Studio 中完成
build_project / start_app 工具依赖 DEVECO_HOME 环境变量，需预先配置
部分文件拷贝操作可能静默失败，需人工验证

B 站视频演示：BV1mWub6QExY

标签

#鸿蒙系统 #开源鸿蒙