手把手教你安装HarmonyOS 5开发工具 (DevEco Studio) 并创建第一个应用

一、安装DevEco Studio开发工具

下载DevEco Studio
首先访问华为开发者联盟官网（https://developer.harmonyos.com/cn/develop/deveco-studio）下载最新版的DevEco Studio。鸿蒙5对应的DevEco Studio版本应为3.1或更高版本。
安装步骤
双击下载的安装包
选择安装路径（建议使用默认路径）
勾选"Add launchers dir to the PATH"（将启动器目录添加到PATH环境变量）
点击"Install"开始安装
安装完成后运行DevEco Studio
配置开发环境
首次运行时，DevEco Studio会引导你完成初始配置：

选择是否导入设置（首次安装选择不导入）
接受用户协议
配置Node.js和Ohpm路径（工具会自动下载所需组件）
设置HarmonyOS SDK存储路径
等待SDK和相关工具下载完成
二、创建第一个HarmonyOS 5应用

新建项目
点击"Create Project"
选择"Application" -> "Empty Ability"
配置项目信息：
Project name: MyFirstApp
Project type: Application
Bundle name: com.example.myfirstapp
Save location: 选择项目存储路径
Compile SDK: HarmonyOS 5.0
Language: ArkTS（推荐）或Java
Device type: Phone
Enable Super Visual: 可选
点击"Finish"创建项目
项目结构解析
创建完成后，项目结构如下：

MyFirstApp/
├── entry/
│ ├── src/
│ │ ├── main/
│ │ │ ├── ets/
│ │ │ │ ├── pages/
│ │ │ │ │ └── index.ets // 主页面代码
│ │ │ │ └── Application.ets // 应用入口
│ │ │ ├── resources/ // 资源文件
│ │ │ └── module.json5 // 模块配置文件
├── build.gradle // 项目构建配置
三、编写第一个页面代码
打开entry/src/main/ets/pages/index.ets文件，替换为以下代码：

@Entry
@Component
struct Index {
@State message: string = 'Hello HarmonyOS 5'
@State count: number = 0

build() {
Column({ space: 20 }) {
Text(this.message)
.fontSize(30)
.fontWeight(FontWeight.Bold)
.fontColor(Color.Blue)

  Button('点击增加计数')
    .width(200)
    .height(50)
    .backgroundColor(Color.Orange)
    .onClick(() => {
      this.count++
    })

  Text(`当前计数: ${this.count}`)
    .fontSize(20)

  // 添加一个图片组件
  Image($r('app.media.icon'))
    .width(100)
    .height(100)
    .margin({ top: 20 })
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)

}
}
四、配置AppGallery Connect

注册华为开发者账号
访问华为开发者网站（https://developer.huawei.com/consumer/cn/）注册账号并完成实名认证。
在AppGallery Connect创建项目
登录AppGallery Connect（https://developer.huawei.com/consumer/cn/service/josp/agc/index.html）
点击"我的项目" -> "添加项目"
填写项目名称和时区
在项目设置中启用HarmonyOS应用
配置应用信息
在项目中点击"添加应用"
选择"HarmonyOS应用"
填写应用信息（包名需与DevEco Studio中配置的一致）
获取agconnect-services.json配置文件并放入项目的entry目录下
五、构建和运行应用
连接设备
可以通过以下方式运行应用：

使用真机：开启USB调试模式并通过USB连接电脑
使用模拟器：DevEco Studio提供本地模拟器
2. 运行应用
点击工具栏中的"Run"按钮
选择目标设备
等待构建完成，应用将自动安装并运行
六、添加更多功能示例

添加网络请求功能
在entry/src/main/ets/pages/index.ets中添加：

import http from '@ohos.net.http';

// 在struct Index中添加
@State responseData: string = ''

// 在build()方法中的Column里添加
Button('获取网络数据')
.width(200)
.height(50)
.backgroundColor(Color.Green)
.onClick(() => {
this.fetchData()
})

Text(this.responseData)
.fontSize(16)
.margin({ top: 10 })

// 添加方法
private fetchData() {
let httpRequest = http.createHttp();
httpRequest.request(
"https://jsonplaceholder.typicode.com/posts/1",
{
method: http.RequestMethod.GET,
connectTimeout: 60000,
readTimeout: 60000,
}, (err, data) => {
if (err) {
this.responseData = "请求失败: " + JSON.stringify(err);
return;
}
this.responseData = "响应数据: " + data.result;
}
);
}
2. 添加页面跳转功能
创建第二个页面detail.ets：

// entry/src/main/ets/pages/detail.ets
@Entry
@Component
struct DetailPage {
@State message: string = '详情页'

build() {
Column({ space: 20 }) {
Text(this.message)
.fontSize(30)
.fontWeight(FontWeight.Bold)

  Button('返回首页')
    .width(200)
    .height(50)
    .backgroundColor(Color.Red)
    .onClick(() => {
      router.back()
    })
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)

}
}
修改index.ets添加跳转逻辑：

// 在import部分添加
import router from '@ohos.router';

// 在build()方法中的Column里添加
Button('跳转到详情页')
.width(200)
.height(50)
.backgroundColor(Color.Purple)
.onClick(() => {
router.pushUrl({
url: 'pages/detail'
})
})
七、构建发布版本
点击菜单"Build" -> "Generate Key and CSR"创建签名密钥
配置签名信息并保存
点击"Build" -> "Build Hap(s)/App(s)" -> "Build Release Hap"
生成的HAP文件位于entry/build/default/outputs/default/目录下
八、上传到AppGallery Connect
登录AppGallery Connect
进入你的应用
点击"我的应用" -> "应用发布"
上传HAP文件并填写版本信息
提交审核
总结
通过以上步骤，你已经完成了从开发环境搭建到第一个HarmonyOS 5应用创建、运行和发布的全过程。鸿蒙5带来了许多新特性，如更高效的ArkTS语言、增强的分布式能力等，值得开发者深入探索。

posted @ 2025-06-28 19:36 暗雨YA 阅读(732) 评论(0) 收藏举报

刷新页面返回顶部

W299

手把手教你安装HarmonyOS 5开发工具 (DevEco Studio) 并创建第一个应用

公告