内容导读

环境安装与配置

项目应用实战

一、环境安装与配置

    华为鸿蒙系统是国内目前纯原生热门移动应用开发系统，经过近几年的不断完善与优化，有其特有的开发与应用魅力，诚邀国内外广大编程爱好者使用与推广。

    使用华为开发工具DevEco Studio，按照如下几步，即可轻松开发并上架一个应用/服务到华为应用市场。

说明：当前安装文档参考官网最新2025年3月发布。

1.1 安装华为最新版DevEco Studio

1、 官网下载：DevEco Studio-HarmonyOS Next Beta版-华为开发者联盟

2.、双击下载的安装文件“deveco-studio-xxxx.exe”，打开安装界面

3、在如下界面选择安装路径，默认安装于C:\Program Files路径下，也可以单击Browse...指定其他安装路径，然后单击Next。

4、在如下安装选项界面勾选DevEco Studio后，单击Next，直至安装完成。

5、安装完成后，单击Finish完成安装。

1.2 配置开发环境（重点）

首次使用DevEco Studio，工具的配置向导会引导我们下载SDK及工具链，如下表。

配置向导默认下载 API Version 9的SDK及工具链。

组件包名	说明	参考
Native	C/C++语言SDK包。	Native API参考
ArkTS	ArkTS语言SDK包。	ArkTS API参考
JS	JS语言SDK包。
Java	Java语言SDK包。从API Version 8开始，不再提供Java语言SDK包。	Java API参考
System-image-phone	本地模拟器Phone设备镜像文件。（参考官方站点地址进行安装配置）	使用Local Emulator运行应用/服务
System-image-tv	本地模拟器TV设备镜像文件，仅支持API Version 6。
System-image-wearable	本地模拟器Wearable设备镜像文件，仅支持API Version 6。
Emulator	本地模拟器工具包。
Toolchains	SDK工具链，应用/服务开发必备工具集，包括编译、打包、签名、数据库管理等工具的集合。	-
Previewer	应用/服务预览器，在开发过程中可以动态预览Phone、TV、Wearable、LiteWearable等设备的应用/服务效果，支持JS、ArkTS和Java应用/服务预览。	使用预览器查看应用/服

1、运行已安装的DevEco Studio，首次使用，请选择Do not import settings，单击OK。

2、安装Node.js与ohpm，也可以指定本地已安装的Node.js或ohpm鸿蒙包管理工具(One Hundred Percent Mermaid)路径位置。

说明：

（1）Node.js版本要求为v14.19.1及以上，且低于v17.0.0；对应的npm版本要求为6.14.16及以上。

（2）如果配置向导界面出现的是设置HTTP ProxySetup（家庭网络可忽略此配置），说明网络受限，请根据官方参考信息配置DevEco Studio代理后，再下载Node.js、ohpm和SDK。

3、在SDK Setup界面，单击next按钮，设置HarmonyOS SDK存储路径，单击Next进入下一步。

注意：HarmonyOS SDK路径中不能包含中文字符。

或单独下载并安装nodev16.20.2版

4、在弹出的SDK下载信息页面，单击Next，并在弹出的License Agreement窗口，阅读License协议，需同意License协议后，单击Next。

说明：下载SDK过程中，如果出现下载JS SDK失败，提示“Install Js dependencies failed.”，请根据JS SDK安装失败处理指导进行处理。

5、确认设置项的信息，点击Next开始安装。

6、等待Node.js、ohpm和SDK下载完成后，单击Finish，界面会进入到DevEco Studio欢迎页。

1.3 配置HDC工具环境变量

HDC是为开发者提供HarmonyOS应用/服务的调试工具，为方便使用HDC工具，请为HDC端口号设置环境变量。

1、Windows环境变量设置方法

在此电脑 > 属性 > 高级系统设置 > 高级 > 环境变量>新建系统变量中，添加HDC端口变量名为：HDC_SERVER_PORT，变量值可设置为任意未被占用的端口，如7035。

2、环境变量配置完成后，关闭并重启DevEco Studio。

1.4 环境测试

1、为了开发应用/服务的良好体验，DevEco Studio提供了开发环境诊断的功能，帮助我们识别开发环境是否完备。

2、在欢迎界面单击Help > Diagnose Development Environment进行诊断。如果已经打开了工程开发界面，也可以在菜单栏单击Help > Diagnostic Tools > Diagnose Development Environment进行诊断。

或者在项目中的Help菜单中查看：

3、DevEco Studio开发环境诊断项包括电脑的配置、网络的连通情况、依赖的工具或SDK等。

如果检测结果为未通过，请根据检查项的描述和修复建议进行处理。

1.5 本地模拟器安装

1、新建本地模拟器

2、下载镜像文件

3、创建本地模拟器

4、下载OpenHarmony SDK下载

在File > Settings > OpentHarmony SDK中设置API Version...

特别提示：如果本地模拟器启动不成功，则需要勾掉API Version...，重新勾选再安装。

好啦，接下来就可以通过DevEco Studio来构建我们第一个鸿蒙应用了。

说明：也可以将电脑通过USB连接真机来调试（请参考华为联盟官方网站）

二、App应用项目实战

1、创建第一个鸿蒙应用hw1

2、应用程序结构

（1）关于ohos

OHOS，全称OpenHarmony Operating System(开放鸿蒙操作系统)。

（2）app项目结构

AppScope > app.json5：应用的全局配置信息，详见app.json5配置文件。

entry：HarmonyOS工程模块，编译构建生成一个HAP包。

src > main > ets：用于存放ArkTS源码。

src > main > ets > entryability：应用/服务的入口。

src > main > ets > entrybackupability：应用提供扩展的备份恢复能力。

src > main > ets > pages：应用/服务包含的页面。

src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。

src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。

build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。

hvigorfile.ts：模块级编译构建任务脚本。

obfuscation-rules.txt：混淆规则文件。混淆开启后，在使用Release模式进行编译时，会对代码进行编译、混淆及压缩处理，保护代码资产。详见开启代码混淆。

oh-package.json5：用来描述包名、版本、入口文件（类型声明文件）和依赖项等信息。

oh_modules：用于存放三方库依赖信息。

build-profile.json5：工程级配置信息，包括签名signingConfigs、产品配置products等。其中products中可配置当前运行环境，默认为HarmonyOS。

‌鸿蒙中的混淆‌：是指通过修改代码的结构和名称，使得代码难以被理解和逆向工程，从而保护源代码不被轻易获取和修改。混淆技术主要用于增加软件的安全性，防止被破解和攻击。

配置规则‌：通过编辑obfuscation-rules.txt文件，可以定义哪些类、方法或变量需要被混淆或保留。例如，使用-keep指令可以指定不被混淆的类或方法‌

3、源码文件参考

（1）新建页面组件文件与配置

组件文件如下：

main_pages.json配置文件：

{
  "src": [
    "pages/Index"
  ]
}

app.json5文件：

{
  "app": {
    "bundleName": "com.chaoke.hw1",
    "vendor": "example",
    "versionCode": 1000000,
    "versionName": "1.0.0",
    "icon": "$media:layered_image",
    "label": "$string:app_name"
  }
}

（2）Home.ets主页文件

@Preview
@Component
export default struct Home{
  build() {
    Column() {
      Text('订单管理首页')
        .fontSize(30)
        .width('100%')
        .height(30)
        .textAlign(TextAlign.Center)
        .height(50)
        .lineHeight(50)
        .fontWeight(FontWeight.Bold)
       Text('订单首页').height(60).fontSize(20).fontColor(Color.Green)
    }.height('100%').backgroundColor('#eee')
  }
}

（3）Bill.ets文件

@Preview
@Component
export default struct Bill{
  build() {
    Column() {
      Text('订单列表管理页')
        .fontSize(30)
        .width('100%')
        .height(30)
        .textAlign(TextAlign.Center)
        .height(50)
        .fontColor(Color.Blue)
        .lineHeight(50)
        .fontWeight(FontWeight.Bold)
      Text('订单详情').height(60).fontSize(20).fontColor(Color.Brown)
    }.height('100%').backgroundColor('#ddd')
  }
}

（4）Mine.ets文件：

@Preview
@Component
export default struct Mine {
  build() {
    Column() {
      Text('关于我们')
        .fontSize(30)
        .width('100%')
        .height(30)
        .textAlign(TextAlign.Center)
        .height(50)
        .fontColor(Color.Red)
        .lineHeight(50)
        .fontWeight(FontWeight.Bold)
      Text('订单详情').height(60).fontSize(20).fontColor(Color.Grey)
    }.height('100%').backgroundColor('#eee')
  }
}

（5）Index.ets首页文件：

import Home from './Home';
import Bill from './Bill';
import Mine from './Mine';

@Entry
@Component
struct Index {
  //初始化消息变量
  @State message: string = '订单管理系统'

  ////创建UI////
  build() {
    Column() {
      Tabs({ index: 0 }) {
        //首页
        TabContent() {
          Home();
        }
        .tabBar({ icon: $r('app.media.home'), text: "首页" })
        //订单
        TabContent() {
          Bill();
        }
        .tabBar({ icon: $r('app.media.bill'), text: "订单" })

        //我的
        TabContent() {
          Mine();
        }
        .tabBar({ icon: $r('app.media.me'), text: "我的" })
      }
      .width("100%") //直接设置导航条位置
      .barPosition(BarPosition.End)
      .backgroundColor(Color.White)
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

4、项目部署运行

说明：项目运行所需的模拟器与OpenHarmony SDK的安装请参考1.5本地模拟器安装。

（1）预览器直接运行

（2）本地模拟器运行

先启动手机模拟器：

再安装App项目到模拟器：

启动App项目：

更多精彩内容请关注本站后续分享！