鸿蒙HarmonyOS实战开发系列课程---789it.top/13956/
鸿蒙 HarmonyOS 实战开发：从环境搭建到第一个 APP
一、开发环境搭建
1.1 系统要求
- 操作系统：Windows 10 64位 或 macOS 10.14+
- 内存：8GB 以上（推荐16GB）
- 硬盘空间：10GB 以上可用空间
1.2 安装开发工具
-
下载 DevEco Studio（鸿蒙官方IDE）：
Bash
ruby# Windows 下载地址 https://developer.harmonyos.com/cn/develop/deveco-studio#download # macOS 下载地址 https://developer.harmonyos.com/cn/develop/deveco-studio#download-mac -
安装 Node.js（v12+）和 JDK（1.8+）
-
配置 DevEco Studio：
Bash
markdown# 安装完成后首次运行会提示安装 HarmonyOS SDK # 选择以下组件： - JS SDK - Toolchains - Previewer
二、创建第一个鸿蒙项目
2.1 新建项目
-
打开 DevEco Studio → 选择 "Create HarmonyOS Project"
-
选择模板：
- 设备类型：Phone
- 模板：Empty Ability (JS)
-
配置项目：
Javascript
yamlProject Name: MyFirstApp Package Name: com.example.myfirstapp Save Location: (选择你的项目路径)
2.2 项目结构解析
PlainText
csharp
MyFirstApp/
├── entry/ # 主模块
│ ├── src/
│ │ ├── main/
│ │ │ ├── js/
│ │ │ │ ├── default/ # JS代码目录
│ │ │ │ │ ├── pages/
│ │ │ │ │ │ └── index/ # 首页目录
│ │ │ │ │ │ ├── index.js # 页面逻辑
│ │ │ │ │ │ ├── index.hml # 页面布局
│ │ │ │ │ │ └── index.css # 页面样式
│ │ │ ├── resources/ # 资源文件
│ ├── config.json # 应用配置文件三、编写第一个页面
3.1 修改布局文件 (index.hml)
Html
ini
<div class="container">
<text class="title">欢迎来到鸿蒙世界！</text>
<button class="btn" onclick="clickAction">点击我</button>
<text class="content">{{message}}</text>
</div>3.2 添加样式 (index.css)
Css
css
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.title {
font-size: 38px;
color: #000000;
margin-bottom: 30px;
}
.btn {
width: 50%;
height: 50px;
background-color: #007dff;
font-size: 20px;
color: #ffffff;
margin-bottom: 30px;
}
.content {
font-size: 30px;
color: #ff0000;
}3.3 添加交互逻辑 (index.js)
Javascript
javascript
export default {
data: {
message: '等待按钮点击...'
},
clickAction() {
this.message = '你好，鸿蒙！';
// 显示Toast提示
prompt.showToast({
message: '按钮被点击了！',
duration: 2000
});
}
}四、运行和调试应用
4.1 使用预览器
- 点击 DevEco Studio 右上角的 "Previewer" 按钮
- 实时查看界面变化（无需编译安装）
4.2 在模拟器上运行
-
创建模拟器：
- Tools → Device Manager → 选择 Phone → 创建模拟器
-
运行应用：
- 点击 "Run" 按钮 → 选择你的模拟器
4.3 在真机上运行
- 准备鸿蒙手机（开发者模式已开启）
- 连接电脑并授权
- 点击 "Run" 按钮 → 选择你的设备
五、应用配置 (config.json)
Json
bash
{
"app": {
"bundleName": "com.example.myfirstapp",
"vendor": "example",
"version": {
"code": 1,
"name": "1.0"
}
},
"deviceConfig": {},
"module": {
"package": "com.example.myfirstapp",
"name": ".MyApplication",
"mainAbility": "MainAbility",
"deviceType": ["phone"],
"abilities": [
{
"name": "MainAbility",
"type": "page",
"label": "MyFirstApp",
"icon": "$media:icon",
"launchType": "standard",
"backgroundModes": ["dataTransfer"]
}
]
}
}六、构建和打包
6.1 构建 APK
-
菜单栏选择 Build → Build Hap(s)/App(s) → Build Hap(s)
-
生成的 HAP 包路径：
PlainText
bashentry/build/outputs/hap/debug/
6.2 签名应用
-
创建签名密钥：
- Build → Generate Key and CSR
-
配置签名：
- File → Project Structure → Modules → Signing Configs
-
构建签名包：
- Build → Build Hap(s)/App(s) → Build Release Hap(s)
七、进阶功能示例
7.1 页面跳转
Javascript
javascript
// 在第一个页面的js文件中
export default {
jumpToSecond() {
router.push({
uri: "pages/second/second"
});
}
}
// 创建第二个页面：右键pages文件夹 → New → JS Page7.2 获取设备信息
Javascript
javascript
import device from '@system.device';
export default {
getDeviceInfo() {
device.getInfo({
success: function(data) {
console.log('设备信息：' + JSON.stringify(data));
},
fail: function(data, code) {
console.log('获取失败：' + code);
}
});
}
}7.3 网络请求
Javascript
javascript
import http from '@system.http';
export default {
fetchData() {
http.request({
url: 'https://api.example.com/data',
method: 'GET',
success: function(response) {
console.log('响应数据：' + response.data);
},
fail: function(response, code) {
console.log('请求失败：' + code);
}
});
}
}八、常见问题解决
-
预览器无法启动：
- 检查 Node.js 是否安装正确
- 重启 DevEco Studio
- 运行
npm install在项目目录
-
模拟器运行失败：
- 确保 BIOS 中已开启虚拟化支持
- 检查显卡驱动是否最新
-
真机调试问题：
- 确保开发者选项已开启
- 检查 USB 调试权限
-
资源引用错误：
- 确保资源文件放在正确的目录（resources/...）
- 检查 config.json 中的引用路径
通过本教程，您已经完成了鸿蒙应用从环境搭建到第一个APP开发的全过程。接下来可以继续学习鸿蒙的更多高级特性，如分布式能力、原子化服务等。