夜雨聆风嗨，同学们！👋 又到我们《零基础萌新养虾》实践课了。自从我们一起来养虾活动发布以来，我们上了八次课。
在复现我们的鸿蒙开发教程时，遇到任何问题，你都可以把问题丢给码道，并相信码道的能力，它会告诉你如何搞定眼前的难题。
码道下载地址：https://codearts.huaweicloud.com/?utm_source=dmzntsq&utm_adplace=wz
我会手把手带你开发一个摇骰子游戏——别小看它，麻雀虽小五脏俱全。学完这个项目，你就掌握了鸿蒙开发的核心秘籍！
而且，这个项目真的能跑在手机上哦！✨
🎯 学完这篇教程，你能收获什么？
✅ 搭懂鸿蒙开发的"声明式UI"是什么 ✅ 掌握状态管理、布局、动画、事件处理 ✅ 成功运行自己的第一个鸿蒙APP ✅ 获得"我也能做开发"的成就感！
准备好了吗？我们开始吧！
第一步：安装开发工具
1.1 下载DevEco Studio
去哪里下载？华为官网：https://developer.huawei.com/consumer/cn/download/
下载哪个版本？截止于本教程写作日期2026年5月6日，推荐下载最新的 DevEco Studio 6.1.0 release版本
小贴士：
文件有点大（约2.8GB），建议用高速网络 安装过程就像装QQ一样简单，一路"下一步"即可 安装完成后，首次启动会下载一些SDK，耐心等待
1.2 首次启动，配置环境
打开DevEco Studio后，它会自动引导你配置开发环境：
你需要安装的SDK：
点击菜单栏 工具 → SDK Manager 点击左侧 "OpenHarmony SDK" 勾选 API Version 13 或更高版本 点击 Apply，等待下载完成
为什么要安装SDK？SDK就像做菜的食材和厨具，没有它，我们就没法"炒菜"（开发APP）了。
注意：如果你看到多个API版本，不知道选哪个，别纠结！选最新的就对了。
第二步：创建项目
2.1 新建项目
好，环境有了，现在开始"做菜"！
操作步骤：
点击 文件 → 新建 → 新建项目 选择 "Empty Ability" 模板（空白模板，最干净） 点击 下一步
2.2 填写项目信息
这里要填几个关键信息：
| Project name | DiceGame | |
| Bundle name | com.example.dicegame | |
| Save location | ||
| Compile SDK | ||
| Compatible SDK | ||
| Device Type |
点击 完成，项目就创建好了！
2.3 等待项目初始化
创建完成后，IDE会自动做一些初始化工作：
下载依赖包 同步项目配置 构建索引
耐心等待，底部的进度条跑完就OK了。
第三步：理解项目结构
项目创建好了，先别急着写代码，我们先看看"房子"的结构。
3.1 核心文件都在哪？
打开左侧项目面板，你会看到一堆文件夹和文件。别慌，我们只需要关注几个核心文件：
DiceGame/└── entry/ ← 入口模块（主模块） └── src/main/ ├── ets/ ← 代码文件夹 │ ├── entryability/ │ │ └── EntryAbility.ets ← 应用入口（类似main函数） │ └── pages/ │ └── Index.ets ← 主页面（我们写代码的地方！） └── resources/ ← 资源文件夹 └── base/ ├── element/ │ └── string.json ← 字符串资源 └── profile/ └── main_pages.json ← 页面路由配置重点记住：Index.ets 就是我们写代码的地方，相当于我们前面制作游戏时，HTML+CSS+JavaScript的集合体！
3.2 什么是.ets文件？
你可能会好奇：**".ets是什么鬼？不是JavaScript吗？"**
简单理解：
.ets= ArkTS语言文件ArkTS = TypeScript的增强版 TypeScript = JavaScript的超集
一句话： 用.ets写代码，就像用JavaScript写代码，但更强大！
第四步：开发摇骰子游戏
好了，现在开始"炒菜"！我们会分几个小步骤，循序渐进。
4.1 第一个小目标：显示一个骰子
打开 Index.ets 文件，你会看到一些默认代码。别管它，全部删掉，我们从零开始！
第一步：搭建基本框架
@Entry@Componentstruct Index { build() { Column() {// 这里写界面内容 } .width('100%') .height('100%') }}这段代码是什么意思？
@Entry：告诉系统"这是入口页面"@Component：告诉系统"这是一个组件"struct Index：定义一个名为Index的结构体（类似class）build()：构建界面的函数，所有UI都写在这里Column()：纵向布局容器，就像一个竖着的盒子
第二步：显示骰子符号
@Entry@Componentstruct Index { build() { Column() { Text('🎲 摇骰子游戏') // 标题 .fontSize(32) .fontWeight(FontWeight.Bold) Text('⚀') // 骰子符号 .fontSize(120) } .width('100%') .height('100%') }}小知识：骰子符号从哪来的？
Unicode提供了骰子符号：
⚀ = 点数1 ⚁ = 点数2 ⚂ = 点数3 ⚃ = 点数4 ⚄ = 点数5 ⚅ = 点数6
试试看：保存代码，点击右侧的 Previewer（预览器），看看效果！
4.2 第二个小目标：让骰子动起来
现在骰子是死的，点它没反应。我们要让它"活"起来！
核心概念：@State 状态管理
在鸿蒙开发中，@State 是最重要的装饰器。
它有什么用？当被 @State 装饰的变量改变时，界面会自动刷新！
举个例子：
@State count: number = 0// 定义一个状态变量Button('点击我') .onClick(() => {this.count++ // 改变变量，界面自动刷新！ })Text(`点击次数: ${this.count}`) // 显示变量值现在，让我们给骰子添加状态：
@Entry@Componentstruct Index {@State diceNumber: number = 1// 当前骰子点数（1-6）// 根据点数获取对应的骰子符号 getDiceSymbol(): string {const symbols = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅']return symbols[this.diceNumber - 1] } build() { Column() { Text('🎲 摇骰子游戏') .fontSize(32) .fontWeight(FontWeight.Bold) Text(this.getDiceSymbol()) // 显示骰子符号 .fontSize(120) } .width('100%') .height('100%') }}添加摇骰子按钮：
@Entry@Componentstruct Index {@State diceNumber: number = 1 getDiceSymbol(): string {const symbols = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅']return symbols[this.diceNumber - 1] }// 摇骰子的方法 rollDice() {// 生成1-6的随机数this.diceNumber = Math.floor(Math.random() * 6) + 1 } build() { Column() { Text('🎲 摇骰子游戏') .fontSize(32) .fontWeight(FontWeight.Bold) .margin({ bottom: 30 }) Text(this.getDiceSymbol()) .fontSize(120) .margin({ bottom: 30 }) Button('🎲 摇一摇') .width(200) .height(60) .fontSize(24) .backgroundColor('#FF6B6B') .borderRadius(30) .onClick(() => {this.rollDice() // 点击时调用摇骰子方法 }) } .width('100%') .height('100%') }}试试看：现在点击"摇一摇"按钮，骰子会随机变化了！
4.3 第三个小目标：添加旋转动画
骰子虽然能动了，但太生硬。我们给它加个旋转动画！
鸿蒙动画：animateTo
// 动画基本用法animateTo({ duration: 500, // 动画时长（毫秒） curve: Curve.EaseInOut, // 动画曲线 onFinish: () => { // 动画结束后的回调// 做些什么... }}, () => {// 动画过程中的状态变化})完整代码（带动画）：
@Entry@Componentstruct Index {@State diceNumber: number = 1@State rotationAngle: number = 0// 旋转角度@State isRolling: boolean = false// 是否正在摇动 getDiceSymbol(): string {const symbols = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅']return symbols[this.diceNumber - 1] } rollDice() {// 防止连续点击if (this.isRolling) {return }this.isRolling = true// 播放旋转动画 animateTo({ duration: 500, curve: Curve.EaseInOut, onFinish: () => {// 动画结束后生成随机数this.diceNumber = Math.floor(Math.random() * 6) + 1this.isRolling = falsethis.rotationAngle = 0// 重置角度 } }, () => {// 动画过程：旋转360度this.rotationAngle = 360 }) } build() { Column() { Text('🎲 摇骰子游戏') .fontSize(32) .fontWeight(FontWeight.Bold) .margin({ top: 40, bottom: 20 })// 骰子显示区域 Column() { Text(this.getDiceSymbol()) .fontSize(120) .rotate({ angle: this.rotationAngle }) // 添加旋转 .animation({ duration: 500, curve: Curve.EaseInOut }) } .width(200) .height(200) .justifyContent(FlexAlign.Center) .backgroundColor('#FFFFFF') .borderRadius(20) .shadow({ radius: 20, color: '#CCCCCC', offsetX: 0, offsetY: 5 }) .margin({ top: 30, bottom: 20 })// 点数显示 Text(`点数: ${this.diceNumber}`) .fontSize(28) .fontColor('#666666') .margin({ bottom: 30 })// 摇一摇按钮 Button(this.isRolling ? '摇动中...' : '🎲 摇一摇') .width(200) .height(60) .fontSize(24) .backgroundColor(this.isRolling ? '#CCCCCC' : '#FF6B6B') .borderRadius(30) .enabled(!this.isRolling) .onClick(() => {this.rollDice() }) } .width('100%') .height('100%') .backgroundColor('#F5F5F5') }}试试看：现在点击按钮，骰子会旋转一圈，然后显示新的点数！
第五步：运行到模拟器
代码写完了，现在让它跑在"手机"上！
5.1 创建模拟器
为什么叫模拟器？它就像一个虚拟的手机，能在电脑上运行鸿蒙系统。
创建步骤：
点击顶部工具栏的设备下拉菜单（显示"无设备"） 选择 "设备管理器" 点击左侧 "手机" 选择一个可用的版本（建议选择API 13或更高） 如果显示"下载"，先点击下载 下载完成后，点击启动按钮
等待模拟器启动完成，你会看到一个虚拟的手机屏幕！
5.2 运行项目
确保模拟器已启动 顶部设备下拉菜单选择已启动的模拟器 点击运行按钮 ▶（绿色三角形） 等待构建完成
第一次运行可能需要等待较长时间，耐心等待！
5.3 看到成果！
如果一切顺利，你会看到：
模拟器上显示了摇骰子游戏界面 点击"摇一摇"按钮，骰子会旋转并显示随机点数
🎉 恭喜！你的第一个鸿蒙APP成功运行了！
常见问题排查
Q1: 项目同步失败，提示"找不到SDK"？
解决方法：
打开 工具 → SDK Manager 点击左侧 "OpenHarmony SDK" 确保已勾选并安装了对应版本的SDK 重新同步项目
Q2: 运行时报错"系统能力不匹配"？
原因：项目配置的SDK版本与模拟器版本不匹配。
解决方法：
确保项目的 Compile SDK与模拟器版本一致或者重新创建项目，选择与模拟器匹配的SDK版本
Q3: 预览器能用，模拟器用不了？
说明：这是DevEco Studio的已知问题，部分模拟器可能不完全支持某些新特性。
建议：
使用预览器进行开发和调试（功能完整） 教学演示时优先使用预览器
知识点总结
学完这个项目，你掌握了：
| @State | @State count: number = 0 | |
| Column/Row | Column() { ... } | |
| Text | Text('Hello').fontSize(20) | |
| Button | Button('点击').onClick(() => {}) | |
| animateTo | animateTo({ duration: 500 }, () => {}) | |
| onClick | .onClick(() => { ... }) |
下一步学习建议
如果你想继续深入，可以：
给游戏添加新功能：
双骰子模式（同时摇两个骰子） 点数统计（记录历史点数） 美化界面（渐变背景、自定义骰子图片） 学习更多组件：
Image（图片） List（列表） TextInput（输入框） 学习更多概念：
页面路由（跳转页面） 组件通信（父子组件传值） 网络请求（调用API）
写在最后
从安装工具到成功运行，你完成了一个完整的开发流程。这看似简单的摇骰子游戏，其实包含了鸿蒙开发的核心思想：
声明式UI：你描述界面"长什么样"，系统自动帮你渲染。
这与传统的命令式开发（告诉计算机"怎么做"）完全不同，更简洁、更高效。
希望这篇文章能帮助你打开鸿蒙开发的大门。记住：所有大牛，都是从Hello World开始的！
有问题欢迎留言交流，我们一起成长！💪
分享个幕后故事，这个骰子APP灵感来自于养虾社——我和小伙伴展恒、庸津、金辉、鹏飞淼校区夜宵时，边吃烧烤边玩的游戏。
鸿蒙生态正在快速发展，学习鸿蒙开发，就是拥抱未来。希望你能坚持下去，成为一名优秀的鸿蒙开发者！
我们在2026华为开发者大会 HarmonyOS学生公开课等你哦！
📌 重要提示： 本教程基于DevEco Studio 6.1.0编写，不同版本界面可能略有差异，但核心概念相同。
相关阅读：
