HarmonyOS NEXT「星辰启明时 代码绘鸿图」

——ArkTS 工程初构建指南

两种电脑都能装

无论是 Windows 电脑还是苹果 Mac，都能安装鸿蒙专属开发工具 DevEco Studio，具体配置要求看这里：</h3><h4 id="yKiV7">▎Windows 电脑</h4>

• 系统：Win10/Win11（64 位）

• 内存：16G 以上更流畅

• 硬盘：至少预留 100G 空间

• 屏幕：1280x800 分辨率以上

<h4 id="v8Txf">▎苹果 Mac 电脑</h4>

• 系统：Intel 芯片用 macOS 11-14 / M 系列芯片用 macOS 12-14

• 内存：8G 起（建议 16G 更顺畅）

• 硬盘：同样需要 100G 空间

• 屏幕：同上分辨率要求

<h3 id="IaKLG">▼ 安装就像装 QQ 一样简单</h3><h4 id="IxFKB">

→ Windows 用户：</h4>

1. 双击下载的.exe 安装包

2. 选安装位置（默认 C 盘，可改其他盘）

3. 勾选主程序一路点"下一步"

4. 完成安装后点"结束"

<h4 id="XkxuT">→ Mac 用户：

直接把软件图标拖进"应用程序"文件夹，等进度条走完就行</h4>

★ 小贴士：安装包已包含所有必备工具（Node.js/模拟器等），无需单独下载配置鸿蒙 SDK。后续如果需要开发 OpenHarmony 应用，在设置里就能直接下载扩展包。

<h3 id="Rduub">▼ 装完记得做两件事</h3>

① 健康检查：

打开软件后点击"Diagnose"（或帮助菜单里的诊断工具），会自动检查电脑配置、网络环境等，有问题会教你怎么修复。

② 切换中文界面：

Windows：点击 文件 > 设置 > 插件，搜"Chinese"启用简体中文插件

Mac：在顶部菜单栏 选择 DevEco Studio > 偏好设置，后续操作同上

启用后重启软件就能用中文界面啦！

整个过程就像安装普通软件一样简单，跟着提示点点按钮就能完成。遇到问题记得用诊断工具自查，中文界面让操作更顺手哦~

<h2 id="Y1n2b">用</h2>

【零基础玩转鸿蒙开发】10 分钟搞定第一个 APP！

<h3 id="Loiaa">▼ 第一步：新建你的第一个项目</h3>

1️⃣ 打开 DevEco Studio：

• 第一次用：直接点"Create Project"

• 已有项目：顶部菜单选 File > New > Create Project

2️⃣ 选模板就像选美：

→ 普通 APP 开发：选"Application"下的"Empty Ability"

→ 想玩 C++：选"Native C++"

→ 元服务开发：选"Atomic Service"

（新手建议先选空模板练手）

3️⃣ 简单配置：

保持默认设置就行，重点看"最低兼容版本"，选 5.0.0(12)最稳

<h3 id="wvmFW">▼ 第二步：认识你的工程文件</h3>

📂 核心文件夹看这里：

• AppScope：全局设置都在 app.json5 里

• entry：你的主战场！生成的安装包都在这

• ets：代码存放区（就像 Java 的 src）

• └ pages：所有页面都住这里

• resources：图片/文字/布局等资源仓库

<h3 id="SXosH">▼ 第三步：打造你的第一个页面</h3><h4 id="SFfst">

✨ 基础页面三步走：</h4>

1. 打开 entry > ets > pages > Index.ets

2. 复制这段魔法代码：

@Entry@Componentstruct Index {  @State message: string = 'Hello World'
  build() {    Row() {  // 横向布局      Column() {  // 纵向布局        Text(this.message)  // 文字组件          .fontSize(50)          .fontWeight(FontWeight.Bold)      }      .width('100%')    }    .height('100%')  }}

1. 点击右上角"Previewer"实时预览

<h3 id="PfHWx">▼ 第四步：给页面加个跳转按钮</h3>

🔄 在 Text 组件下方添加：

Button() {  Text('去第二页')    .fontSize(30)}.type(ButtonType.Capsule).backgroundColor('#0D9FFB').onClick(() => {  // 跳转魔法！下一章揭晓})

<h3 id="wA3nr">▼ 第五步：创建第二个页面</h3>

🆕 两种姿势任选：

👉 懒人版：右键 pages 文件夹 > New > Page > Empty Page

（自动配置路由，推荐！）

👉 手动版：

1. 新建 Second.ets 文件

2. 打开 resources > base > profile > main_pages.json

3. 添加"pages/Second"到 src 数组

<h3 id="ZFBen">▼ 第六步：实现页面互相跳转</h3>

🔗 在 Index 页按钮加入跳转代码：

import { router } from '@kit.ArkUI';
// 在按钮的onClick事件里添加：router.pushUrl({ url: 'pages/Second' })

🔄 在 Second 页加返回按钮：

Button('返回首页').onClick(() => {  router.back()})

<h3 id="jBSim">▼ 第七步：真机实战测试</h3>

📱 华为手机这样玩：

1. 数据线连接电脑

2. 顶部菜单选 File > Project Structure > Signing

3. 勾选"自动生成签名"并用华为账号登录

4. 点右上角▶️按钮直接运行到手机！

💡 小贴士：

• 随时点击 Previewer 实时预览效果

• 代码修改后点同步按钮立即生效

• 想更炫的页面切换？试试 Navigation 组件

• 遇到报错先检查路由配置和拼写

跟着这七步走，你的第一个鸿蒙 APP 就诞生啦！接下来可以尝试：

• 修改文字颜色和按钮样式

• 添加图片和输入框

开启你的鸿蒙开发之旅吧！ 🚀

<h1 id="F0VQq">三</h1>