开发准备

在这里插入图片描述

本文适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转功能的应用（如下图预览器运行效果所示），熟悉HarmonyOS应用开发流程。

HarmonyOS提供了两种FA（Feature Ability）的UI开发框架：Java UI框架和JS UI框架。

Java UI框架提供了细粒度的UI编程接口，UI元素更丰富，使应用开发更加灵活。
JS UI框架提供了相对高层的UI描述，使应用开发更加简单。

官网文档详细介绍

但其实有过Java基础的，上手肯定是容易一些的，

配置开发环境

下载&更新HarmonyOS SDK

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

SDK Manager提供多种编程语言的SDK包和工具链，具体说明请参考下表。

下载HarmonyOS SDK

第一次使用DevEco Studio，需要下载HarmonyOS SDK及对应工具链。
说明

HarmonyOS SDK与OpenHarmony SDK不兼容，下载的HarmonyOS SDK并不适用于OpenHarmony工程。加载OpenHarmony SDK和开发OpenHarmony应用，请参考OpenHarmony使用指南。

1.运行已安装的DevEco Studio，首次使用，请选择Do not import settings，点击OK。
2.进入配置向导页面，设置npm registry，DevEco Studio已预置对应的仓，直接点击Start using DevEco Studio进入下一步。
说明

如果配置向导界面出现的是设置Set up HTTP Proxy界面，说明网络受限，请根据参考信息配置DevEco Studio代理、NPM代理和Gradle代理后，再下载HarmonyOS SDK。

在这里插入图片描述

3.通过DevEco Studio向导指引开发者下载HarmonyOS SDK，默认情况下，SDK会下载到user目录下，也可以指定对应的存储路径，SDK存储路径不支持中文字符，然后点击Next。

在这里插入图片描述

4.默认会下载最新版本的Java SDK、JS SDK、Previewer和Toolchains。在弹出的License Agreement窗口，点击Accept开始下载SDK。
说明

下载SDK过程中，如果出现下载JS SDK失败，提示“Install js dependencies failed.”，请根据JS SDK安装失败处理指导进行处理。
5.等待HarmonyOS SDK及工具下载完成，点击Finish，界面会进入到DevEco Studio欢迎页。

在这里插入图片描述

SDK默认只会下载最新版本的Java SDK、JS SDK、Previewer和Toolchains，点击上图欢迎页中的Configure（或图标） > Settings，进入HarmonyOS SDK页面，可以下载其它组件，只需要勾选对应的组件包，然后点击Apply即可。
更新HarmonyOS SDK

如果已经下载过HarmonyOS SDK，当存在新版本的SDK时，可以通过SDK Manager来更新对应的SDK。进入SDK Manager的方法：

在DevEco Studio欢迎页，点击Configure（或图标） > Settings > HarmonyOS SDK进入SDK Manager界面（macOS系统为Configure > Preferences > HarmonyOS SDK）。
在DevEco Studio打开工程的情况下，点击Tools > SDK Manager界面进入；或者点击Files > Settings > HarmonyOS SDK进入（macOS系统为DevEco Studio > Preferences > HarmonyOS SDK）。

在SDK Manager中，勾选需要更新的SDK，然后点击Apply，然后在弹出的确认更新窗口，点击OK即可开始更新。

在这里插入图片描述

配置HDC工具环境变量

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

Windows环境变量设置方法：

在此电脑 > 属性 > 高级系统设置 > 高级 > 环境变量中，添加HDC端口变量。变量名为：HDC_SERVER_PORT，变量值设置为7035。

[图片上传失败...(image-f7a5aa-1625060806574)]

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

macOS环境变量设置方法：

打开终端工具，执行以下命令，打开.bash_profile文件。

    vi ./.bash_profile

点击字母“i”，进入Insert模式。
输入以下内容，添加HDC_SERVER_PORT环境变量信息。

    HDC_SERVER_PORT=7035
    launchctl setenv HDC_SERVER_PORT $HDC_SERVER_PORT
    export HDC_SERVER_PORT

编辑完成后，点击“Esc”键，退出编辑模式，然后输入:wq，点击Enter按钮保存。
执行以下命令，使配置的环境变量生效。

    source .bash_profile

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

参考信息

DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用。

一般来说，如果使用的是个人或家庭网络，是不需要设置代理信息的；只有部分企业网络受限的情况下，才需要设置代理信息。

如果是第一次打开DevEco Studio，配置向导界面出现设置Set up HTTP Proxy界面，说明网络受限，可以通过配置代理的方式来解决，需要配置DevEco Studio代理、NPM代理和Gradle代理。

在这里插入图片描述

设置Gradle代理

打开“此电脑”，在文件夹地址栏中输入%userprofile%（Mac系统请点击前往 > 个人），进入个人用户界面。

在这里插入图片描述

创建一个文件夹，命名为.gradle。如果已有.gradle文件夹，请跳过此操作。
说明

macOS系统创建.gradle文件夹前，请将系统设置为“显示隐藏文件”。
进入.gradle文件夹，新建一个文本文档，命名为gradle，并修改后缀为.properties。
打开gradle.properties文件中，添加如下脚本，然后保存。
其中代理服务器、端口、用户名、密码和不使用代理的域名，请根据实际代理情况进行修改。其中不使用代理的“nonProxyHosts”的配置间隔符是 “|”。

    systemProp.http.proxyHost=proxy.server.com
    systemProp.http.proxyPort=8080
    systemProp.http.nonProxyHosts=*.company.com|10.*|100.*
    systemProp.http.proxyUser=userId
    systemProp.http.proxyPassword=password
    systemProp.https.proxyHost=proxy.server.com
    systemProp.https.proxyPort=8080
    systemProp.https.nonProxyHosts=*.company.com|10.*|100.*
    systemProp.https.proxyUser=userId
    systemProp.https.proxyPassword=password

编写第一个页面

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

在“Project”窗口，点击“entry > src > main > resources > base > layout”，打开“ability_main.xml”文件。

在这里插入图片描述

第一个页面内有一个文本和一个按钮，使用DependentLayout布局，通过Text和Button组件来实现，其中vp和fp分别表示虚拟像素和字体像素。“ability_main.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">
        <Text
            ohos:id="$+id:text"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="Hello World"
            ohos:text_color="#000000"
            ohos:text_size="32fp"
            ohos:center_in_parent="true"/>
        <Button
            ohos:id="$+id:button"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="Next"
            ohos:text_size="19fp"
            ohos:text_color="#FFFFFF"
            ohos:top_padding="8vp"
            ohos:bottom_padding="8vp"
            ohos:right_padding="70vp"
            ohos:left_padding="70vp"
            ohos:center_in_parent="true"
            ohos:below="$id:text"
            ohos:margin="10vp"/>
    </DependentLayout>

按钮的背景是蓝色胶囊样式，可以通过graphic目录下的XML文件来设置。

右键点击“graphic”文件夹，选择“New > File”，命名为“background_button.xml”，单击回车键。

在这里插入图片描述

“background_button.xml”的示例代码如下：

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

在layout目录下的“ability_main.xml”文件中，使用background_element="$graphic:background_button"的方式引用“background_button.xml”文件：

    <?xml version="1.0" encoding="utf-8"?>
    <DependentLayout
        ...
        <Button
            ohos:id="$+id:button"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="Next"
            ohos:text_size="19fp"
            ohos:text_color="#FFFFFF"
            ohos:top_padding="8vp"
            ohos:bottom_padding="8vp"
            ohos:right_padding="70vp"
            ohos:left_padding="70vp"
            ohos:center_in_parent="true"
            ohos:below="$id:text"
            ohos:margin="10vp"
            ohos:background_element="$graphic:background_button"/>
    </DependentLayout>

在XML文件中添加组件后，需要在Java代码中加载XML布局。
在“Project”窗口，选择“entry > src > main > java > com.example.myapplication > slice” ，打开“MainAbilitySlice.java”文件，使用setUIContent方法加载“ability_main.xml”布局。此外，运行代码前需采用import（可使用Alt+Enter快捷键）引入对应类，否则会产生报错提示。
说明

HarmonyOS提供了Ability和AbilitySlice两个基础类，一个有界面的Ability可以由一个或多个AbilitySlice构成，AbilitySlice主要用于承载单个页面的具体逻辑实现和界面UI，是应用显示、运行和跳转的最小单元。

本文档以同一个Ability内的两个AbilitySlice之间的跳转为例，如果开发者希望实现两个Ability之间的跳转，请参考不同Page间导航。
“MainAbilitySlice.java”的示例代码如下：

    package com.example.myapplication.slice;

    import com.example.myapplication.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_ability_main); // 加载XML布局
        }
    }

使用预览器或模拟器运行项目，效果如下图所示：

在这里插入图片描述

创建另一个页面

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

在“Project”窗口，打开“entry > src > main > java > com.example.myapplication”，右键点击“slice”文件夹，选择“New > Java Class”，命名为“SecondAbilitySlice”，单击回车键。
第二个页面上有一个文本。打开“SecondAbilitySlice”文件，添加一个Text，示例代码如下：

    package com.example.myapplication.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.Text;
    import ohos.agp.components.element.ShapeElement;
    import ohos.agp.utils.Color;
    import ohos.agp.components.DependentLayout.LayoutConfig;

    public class SecondAbilitySlice extends AbilitySlice {
        @Override
        public void onStart(Intent intent) {
            super.onStart(intent);

            // 声明布局
            DependentLayout myLayout = new DependentLayout(this);

            // 设置布局宽高
            myLayout.setWidth(LayoutConfig.MATCH_PARENT);
            myLayout.setHeight(LayoutConfig.MATCH_PARENT);

            // 设置布局背景为白色
            ShapeElement background = new ShapeElement();
            background.setRgbColor(new RgbColor(255, 255, 255));
            myLayout.setBackground(background);
            
            // 创建一个文本
            Text text = new Text(this);
            text.setText("Hi there");
            text.setWidth(LayoutConfig.MATCH_PARENT);
            text.setTextSize(100);
            text.setTextColor(Color.BLACK);

            // 设置文本的布局
            DependentLayout.LayoutConfig textConfig = new DependentLayout.LayoutConfig(LayoutConfig.MATCH_CONTENT, LayoutConfig.MATCH_CONTENT);
            textConfig.addRule(LayoutConfig.CENTER_IN_PARENT);
            text.setLayoutConfig(textConfig);
            myLayout.addComponent(text);
            super.setUIContent(myLayout);
        }
    }

实现页面跳转

打开第一个页面的“MainAbilitySlice.java”文件，添加按钮的响应逻辑，实现点击按钮跳转到下一页，示例代码如下：

    package com.example.myapplication.slice;

    import com.example.myapplication.ResourceTable;

    import ohos.aafwk.ability.AbilitySlice;
    import ohos.aafwk.content.Intent;
    import ohos.agp.components.Button;

    public class MainAbilitySlice extends AbilitySlice {
        @Override
        public void onStart(Intent intent) {
            super.onStart(intent);
            super.setUIContent(ResourceTable.Layout_ability_main);
            Button button = (Button) findComponentById(ResourceTable.Id_button);

            // 点击按钮跳转至第二个页面
            button.setClickedListener(listener -> present(new SecondAbilitySlice(), new Intent()));
        }
    }

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

在这里插入图片描述