1.2 鸿蒙应用开发流程

鸿蒙应用开发可分为四步（见图1-9）：第一步是开发准备，即注册华为开发者联盟账号，并进行实名认证，然后下载开发工具DevEco Studio，并使用注册的账号登录，注册账号的网址如下：

第二步是开发应用，即创建应用工程进行项目开发，需要注意的是创建项目使用的开发语言及项目的运行环境，一般首次是创建并运行Hello World工程。第三步是运行、调试和测试应用，即在项目开发完成后，运行到真机中进行调试，需要在开发者账号中配置应用的信息，以申请证书。第四步是发布应用。

1.2.1 下载与安装DevEco Studio并配置开发环境

HUAWEI DevEco Studio简称DevEco Studio是基于IntelliJ IDEA Community开源版本打造的面向华为终端全场景多设备的一站式集成开发环境（IDE），为开发者提供工程模板创建、开发、编译、调试、发布等E2E的HarmonyOS应用/服务开发，支持Windows与macOS环境。

●对于Windows环境，建议计算机配置满足Windows10 64 位、8GB及以上运行内存、100GB及以上存储硬盘、1280*800像素及以上分辨率。

●对于macOS环境，建议计算机配置满足macOS 10.14/10.15/11.2.2 以上、8GB及以上运行内存、100GB及以上存储硬盘、1280*800像素及以上分辨率。

DevEco Studio安装分以下两步。

1）进入HUAWEI DevEco Studio产品页面，单击下载列表后的按钮，下载DevEco Studio，页面地址如下。

2）下载完成后，在Windows环境中，双击下载的deveco-studio-xxxx.exe，进入DevEco Studio安装向导（见图1-10），在如下安装选项界面勾选DevEco Studio后，单击Next按钮直至安装完成；在macOS环境中，双击下载的deveco-studio-xxxx.dmg软件包，在安装界面中，将DevEco-Studio拖拽到Applications中，等待安装完成，如图1-11所示。

开发工具安装完成后，接下来就是配置开发环境。运行已安装的DevEco Studio，若首次使用请选择Do not import settings，单击OK按钮，然后进入配置向导界面，设置npm registry，DevEco Studio已预置对应的仓，直接单击Start using DevEco Studio按钮进入下一步，默认情况会下载OpenHarmony SDK到user目录下，也可以自定义存储路径，SDK存储路径不支持中文字符，然后单击Next按钮等待OpenHarmony SDK及工具下载完成，单击Finish按钮，会进入DevEco Studio欢迎界面，如图1-12所示。

在Windows系统中，选择左侧底部工具栏中的Configure菜单→Settings选项，弹出Settings窗口；在macOS系统中，选择DevEco Studio窗口顶部的DevEco Studio菜单（或者单击左侧底部工具栏中的设置小图标）→Preferences选项，弹出Preferences窗口。在Settings窗口（Preference窗口中）依次选择SDK Manager选项→HarmonyOS Legacy SDK选项，然后单击Edit按钮设置HarmonyOS SDK的存储路径，如图1-13所示，该路径不能与OpenHarmony SDK存储路径相同，否则会导致OpenHarmony SDK的文件被删除。

1.2.2 鸿蒙应用Java方式创建项目开发

HarmonyOS提供了Java UI框架和方舟开发框架。

●Java UI框架提供了一部分Component和ComponentContainer的子类，即创建用户界面（UI）的各类组件，包括一些常用的组件（如文本、按钮、图片、列表等）和常用的布局（如DirectionalLayout和DependentLayout）。用户可通过组件进行交互操作，并获得响应。

●方舟开发框架是基于JS扩展的类Web开发范式，是一种跨设备的高性能UI开发框架，支持声明式编程和跨设备多态UI。

DevEco Studio开发环境配置完成后，可以通过运行HelloWorld工程来验证环境设置是否正确。创建一个新的工程，步骤如下。

1）打开DevEco Studio，在欢迎界面选择Create Project选项创建一个新工程，选择Empty Ability工程模板（见图1-14），创建项目，设备类型选择“Phone”，模板选择Empty Ability，Language选择Java。

2）单击Next按钮，进入工程配置界面配置工程的基本信息（见图1-15），详细配置说明如表1-1所示。

3）单击Finish按钮完成工程创建，DevEco Studio会自动进行工程的同步，DevEco Studio提供远程模拟器和本地模拟器，在DevEco Studio菜单栏，选择Tools菜单→Device Manager选项可以打开设备调试窗口，Remote Emulator用来调试远程模拟器，需要登录开发者的华为开发者账号进行使用。

在Java UI框架中，提供了在XML中声明UI布局和在代码中创建布局两种编写方式，这两种方式创建出的布局没有本质差别。首先创建工程项目，支持的开发语言为Java，在Project窗口中，选择entry→src→main→resources→base→layout选项，打开ability_main.xml文件，如图1-16所示是创建工程默认生成的视图。

DirectionalLayout是Java UI中的一种重要组件布局，用于将一组子组件（Component）按照水平或者垂直方向排布；Text是一个基本组件，用来显示字符串，在界面上显示为一块文本区域。

Text文本可以采用直接设置文本字串或引用string资源的方式，图1-18 中采用的是引用string资源的方式，在Project窗口中，选择entry→src→main→resources→base→element选项，打开string.json文件，可在此文件内声明所需引用的资源内容，如图1-17所示。

在XML文件中添加编辑组件后，需要在Java代码中加载XML布局，在Project窗口中，选择entry→src→main→java→com.example.helloworld→slice选项，打开MainAbilitySlice.java文件如图1-18所示。

使用setUIContent方法加载ability_main.xml布局。在HarmonyOS中，Ability用来显示页面功能，一个Ability可以由一个或多个AbilitySlice构成。AbilitySlice主要用于承载单个页面的具体逻辑实现和界面UI，是应用显示、运行和跳转的最小单元。

MainAbility就是应用默认显示的页面，在MainAbility中通过setMainRoute方法加载上述配置的MainAbilitySlice，在config.json中可配置默认加载的首页面。

1.2.3 JS语言开发

使用JS语言开发是基于JS扩展的类Web开发范式，支持低代码方式与传统代码方式，创建项目，设备类型选择“Phone”，模板选择 Empty Ability，Language选择JS，首先使用传统代码方式在页面中显示一行文本与一个按钮，如图1-19所示。

创建的工程项目默认的显示页面为 entry→src→main→js→default→pages→index→index.html，对应代码如下。

程序清单：HelloWorld_js_01/entry/src/main/js/default/pages/index/index.hml

其中，index.css用来编写页面的样式，对应代码如下。

程序清单：HelloWorld_js_01/entry/src/main/js/default/pages/index/index.css

index.js用来编写业务处理逻辑代码，对应代码如下。

程序清单：HelloWorld_js_01/entry/src/main/js/default/pages/index/index.js

JS低代码的开发方式通过可视化界面开发方式快速构建布局、编辑UI界面，如图1-20所示，是使用低代码方式开发的项目目录视图。

使用JS低代码方式开发项目的基本过程如下。

1）删除工程运行默认的入口文件夹，即entry→src→main→js→default→pages→index文件夹。

2）在Project窗口，选择工程中的entry→src→main→js→default→pages选项，右击鼠标，在弹出的快捷菜单中选择New→JS Visual选项，输入创建页面的名称（如page）。

3）创建完成后，在工程目录src/main/supervisual/default/pages/page/page.visual中进行可视化编程。

本书也配套了eTS项目入门实例，实现的效果是单击一个按钮跳转到第二个页面。