鸿蒙开发初体验从注册开始带你跑第一个页面

---

1. HUAWEI DevEco Studio

1.1 运行环境要求

当前DevEco Studio只支持Windows版本，为保证DevEco Studio正常运行，建议您的电脑配置满足如下要求：

• 操作系统：Windows10 64位
• 内存：8GB及以上
• 硬盘：100GB及以上
• 分辨率：1280*800像素及以上

1.2 华为账号与实名认证

1.2.1 注册华为账号

1. 登录HarmonysOS应用开发门户，点击右上角注册按钮，注册开发者帐号

2. 注册指导参考注册华为帐号。如果已有华为开发者帐号，请直接点击登录按钮。

3. 注册完成以后可以进行登录

1.2.2 实名认证

使用DevEco Studio远程模拟器需要华为帐号进行实名认证，详情请参考实名认证。

1. 首先登录，再点击“管理中心” 跳转到开发者实名认证页面。

2. 在开发者实名认证页面，点击“个人开发者”图标或“下一步”，进入个人认证方式选择页面。
   

3. 个人实名认证有2种认证方式：分为个人银行卡认证和身份证人工审核认证。请根据上架应用的敏感性，选择认证方式。

（1）如您需上架的是敏感应用，请选择“是”，点击“下一步”进入个人银行卡实名认证页面。（如需上架的应用是敏感应用，只能通过个人银行卡认证方式进行实名认证。）

（2）如您需上架的是非敏感应用，请选择“否”，点击“下一步”进入实名认证方式选择页面。（如需上架的应用是非敏感应用，可选择个人银行卡认证或身份证人工审核认证的其中一种认证方式进行认证。）

1.2.3 个人银行卡认证

1. 完善银行卡信息，如您填写的信息正确，点击“下一步”跳转到完善信息页面。

2. 完善个人信息，签署《华为开发者联盟与隐私的声明》和《华为开发者服务协议》，点击“提交”，完成认证。（标有红色星号（*）的项目是必填项）

1.3 下载和安装DevEco Studio

DevEco Studio的编译构建依赖JDK，DevEco Studio预置了Open JDK，版本为1.8，安装过程中会自动安装JDK。

1. 进入HUAWEI DevEco Studio产品页，下载DevEco Studio安装包。

2. 双击下载的“deveco-studio-xxxx.exe”，进入DevEco Studio安装向导，在如下安装选项界面勾选DevEco Studio launcher后，点击Next，直至安装完成。

3. 安装完成以后桌面会出现以下图标

1.4 下载HarmonyOS SDK

Devco Studio提供SDK Manager统一管理SDK及工具链，下载各种编程语言的SDK包时，SDK Manager会自动下载该SDK包依赖的工具链。

1. 运行DevEco Studio会出现以下窗口
   

2. 首次会自动下载Java的SDK和Toolchains

3. 下载需要一定的时间

4. 下载完成后显示的信息

5. 下载完毕以后，可在这里查看和选择

2. 运行Hello World

2.1 创建HarmonyOS项目

DevEco Studio开发环境配置完成后，可以通过运行HelloWorld工程来验证环境设置是否正确。以Wearable工程为例，在Wearable远程模拟器中运行该工程。

1. 打开DevEco Studio，在欢迎页点击Create HarmonyOS Project，创建一个新工程。

2. 选择设备类型和模板，以Wearable为例，选择Empty Feature Ability(Java)，点击Next。

3. 填写项目相关信息，填写相应的参数，点击Finish。

4. 工程创建完成后，DevEco Studio会自动进行工程的同步，同步成功如下图所示。

5. 首次创建工程时，会自动下载Gradle工具，时间较长，请耐心等待。

从事过Android开发的同学应该比较熟悉这个开发工具：Android Studio

Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化建构工具。抛弃了基于XML的各种繁琐配置，面向Java应用为主。

2.2 Gradle插件下载失败的处理方法

1. 点击链接下载Gradle插件，建议使用下载工具进行下载。下载地址：https://services.gradle.org/distributions/gradle-5.4.1-all.zip

2. 打开“此电脑”，在文件夹地址栏中输入%userprofile%，进入个人数据界面。

3. 进入**.gradle > wrapper > dists > gradle-5.4.1-all**目录，将下载的“gradle-5.4.1-all.zip”拷贝到该目录下临时文件夹中。如果存在多个临时文件夹，建议每个文件夹都拷贝一份。

4. 重启DevEco Studio，等待工程同步完成。

2.3 模拟器运行

1. 在DevEco Studio菜单栏，点击Tools > HVD Manager。

2. 首次使用模拟器，需下载模拟器相关资源，请点击OK

3. 等待资源下载完成后

4. 点击模拟器界面左下角的Refresh按钮。
   

5. 在浏览器中弹出华为帐号登录界面，请输入已实名认证的华为帐号的用户名和密码进行登录。推荐使用Chrome浏览器。

   

6. 登录成功以后看到以下界面

7. 在设备列表中，选择Wearable设备，并点击运行按钮，运行模拟器。

8. 可以看到右边出现模拟器

9. 点击DevEco Studio工具栏中运行按钮运行工程，或使用默认快捷键Shift+F10运行工程。

10. 在弹出的Select Deployment Target界面选择Connected Devices，点击OK按钮。

11. DevEco Studio会启动应用的编译构建，完成后应用即可运行在Remote Device上。

2.4 鸿蒙 APP 的基础认识

HarmonyOS的应用软件包以APP Pack（Application Package）形式发布，它是由一个或多个HAP（HarmonyOS Ability Package）组成。

• Entry：应用的主模块。一个APP中，对于同一设备类型必须有且只有一个Entry类型的HAP，可独立安装运行。
• Feature：应用的动态特性模块。一个APP可以包含一个或多个Feature类型的HAP，也可以不含。只有包含Ability的HAP才能够独立运行。

2.4.1 MainAbility

Ability 是应用所具备能力的抽象，也是应用程序的重要组成部分。一个应用可以具备多种能力（即可以包含一个或者多个Ability），HarmonyOS支持应用以Ability为单位进行部署。

Ability分为两种类型：FA（Feature Ability 主要能力）和PA（Particle Ability 次要能力）。

1. FA/PA是应用的基本组成单元，能够实现特定的业务功能。

2. FA有UI界面，而PA无UI界面。

每种类型为开发者提供了不同的模板，以便实现不同的业务功能。

2.4.2 MainAbilitySlice

AbilitySlice主要用于承载Ability的具体逻辑实现和界面UI，是应用显示、运行和跳转的最小单元。

2.4.3 Android的对比

类	理解	功能
MainAbility	MainActivity	容器
MainAbilitySlice	LayoutInflater	填充器
HelloApp	Application	贯穿生命周期管理类

2.4.4 代码

/**
  实现特定的业务功能
*/
public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //设置一个路由，对应的找到MainAbilitySlice看到是一个填充布局类
        super.setMainRoute(MainAbilitySlice.class.getName());
    }
}

/**
  用于承载Ability的具体逻辑实现和界面UI，是应用显示、运行和跳转的最小单元
*/
package com.itheima.helloapp.slice;

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;

import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.DirectionalLayout.LayoutConfig;
import ohos.agp.components.Text;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import ohos.agp.utils.TextAlignment;

public class MainAbilitySlice extends AbilitySlice {

    private DirectionalLayout myLayout = new DirectionalLayout(this);

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        LayoutConfig config = new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT);
        myLayout.setLayoutConfig(config);
        ShapeElement element = new ShapeElement();
        element.setRgbColor(new RgbColor(255, 255, 255));
        myLayout.setBackground(element);

        Text text = new Text(this);
        text.setLayoutConfig(config);
        text.setText("你好，传智播客");
        text.setTextColor(Color.BLUE);
        text.setTextSize(45);
        text.setTextAlignment(TextAlignment.CENTER);
        myLayout.addComponent(text);
        super.setUIContent(myLayout);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

3. 快速入门

3.1 需求

本案例在上一个案例的基础上再次开发

编写两个简单的页面，实现在第一个页面点击按钮跳转到第二个页面。

3.2 编写第一个页面

在Java UI框架中，提供了两种编写布局的方式：在XML中声明UI布局和在代码中创建布局。这两种方式创建出的布局没有本质差别，为了熟悉两种方式，我们将通过XML的方式编写第一个页面，通过代码的方式编写第二个页面。

3.2.1 XML编写页面

1. 在“Project”窗口，打开“entry > src > main > resources > base”，右键点击“base”文件夹，选择“New > Directory”，命名为“layout”。

2. 右键点击“layout”文件夹，选择“New > File”，命名为“main_layout.xml”。

3. 在“layout”文件夹下可以看到新增了“main_layout.xml”文件。

4. 打开“main_layout.xml”文件，添加一个文本和一个按钮，示例代码如下：

   <?xml version="1.0" encoding="utf-8"?>
   <DependentLayout
           xmlns:ohos="http://schemas.huawei.com/res/ohos"
           ohos:width="match_parent"
           ohos:height="match_parent"
           ohos:background_element="#000000">
   
       <Text
               ohos:id="$+id:text"
               ohos:width="match_content"
               ohos:height="match_content"
               ohos:center_in_parent="true"
               ohos:text="Hello World"
               ohos:text_color="white"
               ohos:text_size="32fp"/>
   
       <Button
               ohos:id="$+id:button"
               ohos:width="match_content"
               ohos:height="match_content"
               ohos:text_size="19fp"
               ohos:text="Next"
               ohos:top_padding="8vp"
               ohos:bottom_padding="8vp"
               ohos:right_padding="80vp"
               ohos:left_padding="80vp"
               ohos:text_color="white"
               ohos:background_element="$graphic:button_element"
               ohos:center_in_parent="true"
               ohos:align_parent_bottom="true"/>
   </DependentLayout>
   

5. 上述按钮的背景是通过“button_element”来显示的，需要在“base”目录下创建“graphic”文件夹，在“graphic”文件夹中新建一个“button_element.xml”文件。

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R5kpegH5-1638253620170)(assets/image-20201016163826212.png)]

6. “button_element.xml”的示例代码如下（如果DevEco Studio提示xmlns字段错误，请忽略，不影响后续操作）：

   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="oval">
       <solid ohos:color="#007DFF"/>
   </shape>
   

3.2.2 加载XML布局

1. 在“Project”窗口，选择“entry > src > main > java > com.itheima.helloapp > slice” ，打开“MainAbilitySlice.java”文件。

2. 重写onStart()方法加载XML布局，示例代码如下（如果DevEco Studio提示Layout_main_layout错误，不影响后续操作，运行应用后即可消除）：

   package com.itheima.helloapp.slice;
   
   import com.itheima.helloapp.ResourceTable;
   import ohos.aafwk.ability.AbilitySlice;
   import ohos.aafwk.content.Intent;
   
   public class MainAbilitySlice extends AbilitySlice {
   
       @Override
       public void onStart(Intent intent) {
           super.onStart(intent);
           super.setUIContent(ResourceTable.Layout_main_layout); // 加载XML布局
       }
   
       @Override
       public void onActive() {
           super.onActive();
       }
   
       @Override
       public void onForeground(Intent intent) {
           super.onForeground(intent);
       }
   }
   

3. 请参考应用运行，效果如图所示：

   

3.3 创建另一个页面

3.3.1 创建Feature Ability

1. 在“Project”窗口，打开“entry > src > main > java”，右键点击“com.itheima.helloapp”文件夹，选择“New > Ability > Empty Feature Ability(Java)”。

2. 配置Ability时，将“Page Name”设置为“SecondAbility”，点击“Finish”。

3. 创建完成后，可以看到新增了“SecondAbility”和“SecondAbilitySlice”文件。

3.3.2 代码编写界面

1. 在上一节中，我们用XML的方式编写了一个包含文本和按钮的页面。为了帮助开发者熟悉在代码中创建布局的方式，接下来我们使用此方式编写第二个页面。

2. 打开 “SecondAbilitySlice.java”文件

3. 添加一个文本，示例代码如下：

   package com.itheima.helloapp.slice;
   
   import ohos.aafwk.ability.AbilitySlice;
   import ohos.aafwk.content.Intent;
   import ohos.agp.colors.RgbColor;
   import ohos.agp.components.DependentLayout;
   import ohos.agp.components.DependentLayout.LayoutConfig;
   import ohos.agp.components.Text;
   import ohos.agp.components.element.ShapeElement;
   import ohos.agp.utils.Color;
   
   import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_PARENT;
   import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_CONTENT;
   
   public class SecondAbilitySlice extends AbilitySlice {
   
       @Override
       public void onStart(Intent intent) {
           super.onStart(intent);
           // 声明布局
           DependentLayout myLayout = new DependentLayout(this);
         
           // 设置布局大小
           myLayout.setWidth(MATCH_PARENT);
           myLayout.setHeight(MATCH_PARENT);
           ShapeElement element = new ShapeElement();
           element.setRgbColor(new RgbColor(0, 0, 0));
           myLayout.setBackground(element);
   
           // 创建一个文本
           Text text = new Text(this);
           text.setText("Nice to meet you.");
           text.setWidth(MATCH_PARENT);
           text.setTextSize(55);
           text.setTextColor(Color.WHITE);
         
           // 设置文本的布局
           DependentLayout.LayoutConfig textConfig = new DependentLayout.LayoutConfig(MATCH_CONTENT,MATCH_CONTENT);
           textConfig.addRule(DependentLayout.LayoutConfig.CENTER_IN_PARENT);
           text.setLayoutConfig(textConfig);
           myLayout.addComponent(text);
   
           super.setUIContent(myLayout);
       }
   
       @Override
       public void onActive() {
           super.onActive();
       }
   
       @Override
       public void onForeground(Intent intent) {
           super.onForeground(intent);
       }
   }
   

3.3.3 实现页面跳转

1. 打开第一个页面的“MainAbilitySlice.java”文件，重写onStart()方法添加按钮的响应逻辑，实现点击按钮跳转到下一页

2. 示例代码如下：

   package com.itheima.helloapp.slice;
   
   import com.itheima.helloapp.ResourceTable;
   import ohos.aafwk.ability.AbilitySlice;
   import ohos.aafwk.content.Intent;
   import ohos.aafwk.content.Operation;
   import ohos.agp.components.*;
   
   public class MainAbilitySlice extends AbilitySlice {
   
      @Override
      public void onStart(Intent intent) {
   	   super.onStart(intent);
   	   super.setUIContent(ResourceTable.Layout_main_layout);
   	   Button button = (Button) findComponentById(ResourceTable.Id_button);
   
   	   if (button != null) {
   		   // 为按钮设置点击回调
   		   button.setClickedListener(new Component.ClickedListener() {
   			   @Override
   			   public void onClick(Component component) {
   				   Intent secondIntent = new Intent();
   				   // 指定待启动FA的bundleName和abilityName
   				   Operation operation = new Intent.OperationBuilder()
   						   .withDeviceId("")
   						   .withBundleName("com.itheima.helloapp")
   						   .withAbilityName("com.itheima.helloapp.SecondAbility")
   						   .build();
   				   secondIntent.setOperation(operation);
   				   startAbility(secondIntent); // 通过AbilitySlice的startAbility接口实现启动另一个页面
   			   }
   		   });
   	   }
      }
   
      @Override
      public void onActive() {
   	   super.onActive();
      }
   
      @Override
      public void onForeground(Intent intent) {
   	   super.onForeground(intent);
      }
   }
   

3. 再次运行项目，效果如图所示：

3.4 开发文档

• 华为开发者联盟论坛

  https://developer.huawei.com/consumer/

• 鸿蒙os开发官网

  https://developer.harmonyos.com/cn/develop

• Gitee

  https://openharmony.gitee.com/openharmony

• 鸿蒙OS开发文档

  https://www.w3cschool.cn/harmonyos/