本文介绍如何搭建 HarmonyOS 应用的开发环境,介绍下载安装 DevEco Studio 开发工具和 SDK 的详细流程。华为鸿蒙 DevEco Studio 是面向全场景的一站式集成开发环境,面向全场景多设备,提供一站式的分布式应用开发平台,支持分布式多端开发、分布式多端调测、多端模拟仿真,提供全方位的质量与安全保障。
一、下载安装 DevEco Studio
1、官网下载 DevEco Studio
官网:HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者
下载 DevEco Studio 3.1.1 Release 最新版本。
![](https://file.jishuzhan.net/article/1742120113781346305/4b56d03ac78aac2ca1045f5b496676f6.webp)
下载完成后我们解压压缩包,点击启动exe安装程序。
2、安装 DevEco Studio
启动安装exe程序,进入安装界面欢迎页。
我们点击Next下一步。
![](https://file.jishuzhan.net/article/1742120113781346305/185f307cff992d0b1998b4e52d16b968.webp)
选择安装路径,这里根据大家自己的喜好选择路径安装即可,需要2GB的存储空间。
![](https://file.jishuzhan.net/article/1742120113781346305/860b4b1a0f9d01b4d98a9cb5e6183c6b.webp)
下一步,我们勾选 "生成快捷方式" 和 "添加到path环境变量" 。
![](https://file.jishuzhan.net/article/1742120113781346305/1702b9bd25218fcd0c1fc53fcc0faa94.webp)
这里默认文件夹名,点击安装。
![](https://file.jishuzhan.net/article/1742120113781346305/1383f3544a291df5811d2c383047a9f7.webp)
完成安装,需要对电脑重启。
![](https://file.jishuzhan.net/article/1742120113781346305/c96450004eaf8f859b71fa599cf53f4f.webp)
二、启动 DevEco Studio
1、安装 Node.js 和 ohpm
首次运行 DevEco Studio 会来到这个页面。
HarmonyOS应用开发需要我们的电脑上安装 Node.js 和 ohpm (鸿蒙生态三方库的包管理工具)
这里华为官方提供了镜像,如果本机上之前没有装过,直接勾选 install 然后下一步即可。
![](https://file.jishuzhan.net/article/1742120113781346305/8cb5a742b59d9ae1f2395c592368cbad.webp)
2、安装HarmonyOS SDK
基础组件安装后,我们需要安装HarmonyOS的SDK。HarmonyOS SDK提供应用及服务开发所需的一系列系统开放能力,包括框架、Ability、分布式服务、安全、方舟编译器、HMS Core、基础软件服务、硬件服务等。
这里选择安装路径即可,我直接默认路径,点击下一步。
![](https://file.jishuzhan.net/article/1742120113781346305/76bd0b740cac0301ec53b1601c0a702f.webp)
这个页面展示了所有需要安装的包,点击下一步安装。
![](https://file.jishuzhan.net/article/1742120113781346305/7961f9d8ba8fb2c96a6f5a641f7db10d.webp)
几分钟后安装完成。
![](https://file.jishuzhan.net/article/1742120113781346305/48462a47b10cb34dc26e05c68f4cdda9.webp)
三、新建测试项目
1、通过模板创建项目
我们选择 Empty Ability 模板新建一个测试项目。
Empty Ability 模板是一个空白模板,它支持手机、平板、手表等多种鸿蒙终端运行。
![](https://file.jishuzhan.net/article/1742120113781346305/4e7089abf6f0d3591abcb5ea6a8a23b7.webp)
2、勾选Stage模式
勾选Stage模式。Satge模式已经是 API 9 之后的默认勾选模式。
![](https://file.jishuzhan.net/article/1742120113781346305/01fb4cf49644a82d9a1b22bdf37666aa.webp)
这里科普一下FA模型和Stage模型的区别:
API 8及以前的接口基于FA模型提供;从API 9开始,OpenHarmony主推Stage模型。 FA模型与Stage模型是两套不同的应用模型,他们拥有各自的组件。
- FA模型:OpenHarmony API 7开始支持的模型,提供三种应用组件,分别是PageAbility、ServiceAbility和DataAbility。
- Stage模型:OpenHarmony API 9开始新增的模型,是目前主推且会长期演进的模型。在该模型中,由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的"舞台",因此称这种应用模型为Stage模型。提供了两种应用组件,分别是UIAbility和ExtensionAbility。
3、勾选低代码开发选项
开启Super Visual低代码模式,这可以帮助我们快速建立起一个应用。
![](https://file.jishuzhan.net/article/1742120113781346305/01fb4cf49644a82d9a1b22bdf37666aa.webp)
低代码开发是DevEco Studio为HarmonyOS开发者提供的可视化页面的开发方式,具备丰富的UI页面编辑能力,开发者可以在图形化的用户界面上自由拖拽组件、完成数据的参数化配置,还能实时预览开发页面的效果,所见即所得。
低代码开发效果示例:
![](https://file.jishuzhan.net/article/1742120113781346305/c9aa76af8a365dc3409bc3296f0f7edc.webp)
低代码开发为我们开发者提供了UI界面开箱即用的组件,通过简单拖、拉、拽和可视化数据绑定的操作方式,快速开发用户界面。不仅可以减少键入的代码量,降低开发成本,还提升了页面开发效率,助力高效开发。
四、运行测试项目
1、创建测试页面
这里我通过低代码组件随便做了一个登录页。我们低代码组件的改动体现在index.visual上。
![](https://file.jishuzhan.net/article/1742120113781346305/c9aa76af8a365dc3409bc3296f0f7edc.webp)
index.visual代码我提供出来给大家参考:
javascript
{
"document": {
"VisualVersion": "12",
"type": "ETS",
"custom": false,
"path": "/entry/src/main/supervisual/pages/Index"
},
"visualModel": {
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"width": "100%",
"height": "100%"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"width": "100%",
"height": "100%",
"justify-content-rc": "center",
"position": "absolute",
"top": "0vp",
"left": "0vp",
"border-bottom-color": "#4a4a4a",
"border-bottom-width": "1vp"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"position": "absolute",
"top": "95vp",
"width": "100%",
"height": "100vp",
"display-priority": "0",
"align-items-row": "center",
"justify-content-rc": "center"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"width": "100vp",
"height": "100vp",
"align": "center",
"top": "0vp",
"background-image-size": "auto",
"position": "relative",
"src": "$r('app.media.icon')",
"left": "0%"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [],
"id": "image1",
"type": "image"
}
}
],
"id": "row3",
"type": "row"
}
},
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"height": "50vp",
"width": "100%",
"left": "0vp",
"top": "200vp",
"border-top-right-radius": "0vp",
"content": "登录界面",
"font-size": "26fp",
"font-weight": "medium",
"font-family": "sans-serif",
"text-align": "center",
"text-overflow": "clip",
"position": "absolute"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [],
"id": "text1",
"type": "text"
}
},
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"height": "30vp",
"width": "100%",
"left": "0vp",
"top": "250vp",
"content": "登录帐号以使用更多服务",
"font-size": "14fp",
"text-align": "center",
"font-color": "#8c8c8c",
"position": "absolute"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [],
"id": "text2",
"type": "text"
}
},
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"height": "50vp",
"width": "100%",
"left": "0vp",
"top": "328vp",
"position": "absolute",
"placeholder": "邮箱/手机号/用户名",
"margin-bottom": "0vp",
"padding-top": "0vp",
"border-bottom-width": "1vp",
"border-bottom-color": "#4a4a4a",
"background-color": "#ffffff"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [],
"id": "text-input1",
"type": "text-input"
}
},
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"height": "50vp",
"width": "100%",
"left": "0vp",
"top": "380vp",
"position": "absolute",
"placeholder": "密码",
"textInput-type": "Password",
"background-color": "#ffffff",
"border-bottom-width": "1vp",
"border-bottom-color": "#4a4a4a"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [],
"id": "text-input2",
"type": "text-input"
}
},
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"position": "absolute",
"top": "430vp",
"left": "5%",
"width": "90%",
"height": "30vp"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"height": "30vp",
"width": "50%",
"position": "absolute",
"top": "0px",
"left": "50%",
"text-align": "end",
"content": "忘记密码",
"font-size": "14fp"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [],
"id": "text3",
"type": "text"
}
},
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"height": "30vp",
"width": "50%",
"text-align": "start",
"position": "absolute",
"content": "短信验证码登录",
"font-size": "14fp",
"top": "0vp",
"left": "0%"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [],
"id": "text4",
"type": "text"
}
}
],
"id": "row1",
"type": "row"
}
},
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"position": "absolute",
"top": "92%",
"left": "5%",
"height": "8%",
"width": "90%"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"height": "100%",
"width": "33.3%",
"position": "absolute"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [],
"id": "text7",
"type": "text"
}
},
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"height": "100%",
"width": "33.4%",
"position": "absolute"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [],
"id": "text9",
"type": "text"
}
},
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"height": "100%",
"width": "33.3%",
"text-align": "end",
"position": "absolute"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [],
"id": "text8",
"type": "text"
}
}
],
"id": "row2",
"type": "row"
}
},
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"width": "90%",
"height": "40vp",
"label": "登录",
"font-size": "20fp",
"position": "absolute",
"top": "530vp",
"left": "5%"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [],
"id": "button1",
"type": "button"
}
},
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"height": "30vp",
"width": "100%",
"content": "注册账号",
"text-align": "center",
"font-size": "14fp",
"position": "absolute",
"top": "570vp",
"left": "0vp"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [],
"id": "text5",
"type": "text"
}
},
{
"dataType": "VisualModel",
"value": {
"propertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicPropertyStorage": {
"dataType": "Map",
"value": {}
},
"mediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"dynamicMediaPropertyStorage": {
"dataType": "Map",
"value": {}
},
"property": {
"dataType": "Map",
"value": {
"height": "4%",
"width": "100%",
"text-align": "center",
"font-size": "14fp",
"position": "absolute",
"top": "88%",
"left": "0vp",
"content": "其他方式登录",
"align": "center"
}
},
"dynamicProperty": {
"dataType": "Map",
"value": {}
},
"children": [],
"id": "text6",
"type": "text"
}
}
],
"id": "column1",
"type": "column"
}
}
],
"id": "wrapper",
"type": "column"
}
},
"formData": {
"data": {
"dataType": "Map",
"value": {}
},
"actions": {
"dataType": "Map",
"value": {}
}
},
"customData": {
"property": {
"dataType": "Map",
"value": {}
},
"event": {
"dataType": "Map",
"value": {}
}
}
}
我们点击运行按钮,会让我们选择运行设备,这里的设备都是模拟器,需要安装,我们先进入设备管理器安装设备。
![](https://file.jishuzhan.net/article/1742120113781346305/1fba2ac5383da40cb4d0084f7ea2fd1e.webp)
以上是纯前端,业务逻辑写在在index.ets文件中,这里我们只是测试开发环境可以运行简单应用,所以业务逻辑我们就不写了,具体的应用实战我会在后面的章节给出。
2、安装设备仿真器
这个模板支持手机、电视、手表三种终端模拟,我们先安装emulator(仿真器)。
![](https://file.jishuzhan.net/article/1742120113781346305/1c8be30fb777df2a3b45d71ef887b80b.webp)
![](https://file.jishuzhan.net/article/1742120113781346305/47bb774b49ceb473e0760db0d1d2af3a.webp)
安装好之后,我们再点击每一个硬件设备单独安装。这里我选择的手机。
![](https://file.jishuzhan.net/article/1742120113781346305/50380b0897a0ae8ac6cf32c9fb197cb8.webp)
我选择的API9版本。
![](https://file.jishuzhan.net/article/1742120113781346305/c38971304671e633571146cb1241cbb9.webp)
要安装个几分钟。
![](https://file.jishuzhan.net/article/1742120113781346305/80b8836b455ab21ba1827e330dd10fd9.webp)
安装完成。
![](https://file.jishuzhan.net/article/1742120113781346305/2a21c24c1646ffc651fe70ba51e76c75.webp)
3、开启设备仿真器
点击我们刚刚新建的设备,启动它。
![](https://file.jishuzhan.net/article/1742120113781346305/455b1542f50fa2bc136f602d8191daf8.webp)
仿真终端被立刻启动。
![](https://file.jishuzhan.net/article/1742120113781346305/a1d873d8ee295365d68db9ebd0618a37.webp)
完全启动大概需要个一分钟,开机后如下:
![](https://file.jishuzhan.net/article/1742120113781346305/2e870fd51933c1c7853bf934af3a76db.webp)
4、运行项目
我们运行项目。
![](https://file.jishuzhan.net/article/1742120113781346305/d34b43b604377425af0d0bc0a860c842.webp)
我们制作的应用会在仿真设备里打开。
![](https://file.jishuzhan.net/article/1742120113781346305/2230b3776af13a3c72ccfcf64b923c5f.webp)
测试我们登录界面是否可以正常输入和点击。
![](https://file.jishuzhan.net/article/1742120113781346305/b6d149d19af50aaac75c785d26b687e2.webp)
测试没有问题,标志着我们新建的HarmonyOS应用运行成功。