「星辰启明时 代码绘鸿图」Harmony OS Next

#鸿蒙系统##DevEco Studio——ArkTS工程初构建指南

装

▼ 两种电脑都能装 无论是Windows电脑还是苹果Mac，都能安装鸿蒙专属开发工具DevEco Studio，具体配置要求看这里：

▎Windows电脑

• 系统：Win10/Win11（64位）
• 内存：16G以上更流畅
• 硬盘：至少预留100G空间
• 屏幕：1280x800分辨率以上

▎苹果Mac电脑

• 系统：Intel芯片用macOS 11-14 / M系列芯片用macOS 12-14
• 内存：8G起（建议16G更顺畅）
• 硬盘：同样需要100G空间
• 屏幕：同上分辨率要求

▼ 安装就像装QQ一样简单

→ Windows用户：

1. 双击下载的.exe安装包
2. 选安装位置（默认C盘，可改其他盘）
3. 勾选主程序一路点"下一步"
4. 完成安装后点"结束"

→ Mac用户： 直接把软件图标拖进"应用程序"文件夹，等进度条走完就行

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

▼ 装完记得做两件事

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

② 切换中文界面： Windows：点击 文件 > 设置 > 插件，搜"Chinese"启用简体中文插件 Mac：在顶部菜单栏 选择 DevEco Studio > 偏好设置，后续操作同上 启用后重启软件就能用中文界面啦！

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

用

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

▼ 第一步：新建你的第一个项目

1️⃣ 打开DevEco Studio：

• 第一次用：直接点"Create Project"
• 已有项目：顶部菜单选 File > New > Create Project

2️⃣ 选模板就像选美： → 普通APP开发：选"Application"下的"Empty Ability" → 想玩C++：选"Native C++" → 元服务开发：选"Atomic Service" （新手建议先选空模板练手）

3️⃣ 简单配置： 保持默认设置就行，重点看"最低兼容版本"，选5.0.0(12)最稳

▼ 第二步：认识你的工程文件

📂 核心文件夹看这里：

• AppScope：全局设置都在app.json5里
• entry：你的主战场！生成的安装包都在这
• ets：代码存放区（就像Java的src） └ pages：所有页面都住这里
• resources：图片/文字/布局等资源仓库

▼ 第三步：打造你的第一个页面

✨ 基础页面三步走：

1. 打开entry > ets > pages > Index.ets
2. 复制这段魔法代码：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {  // 横向布局
      Column() {  // 纵向布局
        Text(this.message)  // 文字组件
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

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

▼ 第四步：给页面加个跳转按钮

🔄 在Text组件下方添加：

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

▼ 第五步：创建第二个页面

🆕 两种姿势任选： 👉 懒人版：右键pages文件夹 > New > Page > Empty Page （自动配置路由，推荐！） 👉 手动版：

1. 新建Second.ets文件
2. 打开resources > base > profile > main_pages.json
3. 添加"pages/Second"到src数组

▼ 第六步：实现页面互相跳转

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

import { router } from '@kit.ArkUI';

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

🔄 在Second页加返回按钮：

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

▼ 第七步：真机实战测试

📱 华为手机这样玩：

1. 数据线连接电脑
2. 顶部菜单选File > Project Structure > Signing
3. 勾选"自动生成签名"并用华为账号登录
4. 点右上角▶️按钮直接运行到手机！

💡 小贴士：

• 随时点击Previewer实时预览效果
• 代码修改后点同步按钮立即生效
• 想更炫的页面切换？试试Navigation组件
• 遇到报错先检查路由配置和拼写

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

• 修改文字颜色和按钮样式
• 添加图片和输入框

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