開發(fā)準備

在這里插入圖片描述

本文適用于HarmonyOS應(yīng)用開發(fā)的初學(xué)者鱼的。通過構(gòu)建一個簡單的具有頁面跳轉(zhuǎn)功能的應(yīng)用（如下圖預(yù)覽器運行效果所示），熟悉HarmonyOS應(yīng)用開發(fā)流程。

HarmonyOS提供了兩種FA（Feature Ability）的UI開發(fā)框架：Java UI框架和JS UI框架。

Java UI框架提供了細粒度的UI編程接口香罐，UI元素更豐富，使應(yīng)用開發(fā)更加靈活时肿。
JS UI框架提供了相對高層的UI描述庇茫，使應(yīng)用開發(fā)更加簡單。

官網(wǎng)文檔詳細介紹

但其實有過Java基礎(chǔ)的螃成，上手肯定是容易一些的旦签，

配置開發(fā)環(huán)境

下載&更新HarmonyOS SDK

DevEco Studio提供SDK Manager統(tǒng)一管理SDK及工具鏈，下載各種編程語言的SDK包時寸宏，SDK Manager會自動下載該SDK包依賴的工具鏈宁炫。

SDK Manager提供多種編程語言的SDK包和工具鏈，具體說明請參考下表氮凝。

下載HarmonyOS SDK

第一次使用DevEco Studio羔巢，需要下載HarmonyOS SDK及對應(yīng)工具鏈。
說明

HarmonyOS SDK與OpenHarmony SDK不兼容罩阵，下載的HarmonyOS SDK并不適用于OpenHarmony工程竿秆。加載OpenHarmony SDK和開發(fā)OpenHarmony應(yīng)用，請參考OpenHarmony使用指南稿壁。

1.運行已安裝的DevEco Studio袍辞，首次使用，請選擇Do not import settings常摧，點擊OK。
2.進入配置向?qū)ы撁嫱矗O(shè)置npm registry落午，DevEco Studio已預(yù)置對應(yīng)的倉，直接點擊Start using DevEco Studio進入下一步肚豺。
說明

如果配置向?qū)Ы缑娉霈F(xiàn)的是設(shè)置Set up HTTP Proxy界面溃斋，說明網(wǎng)絡(luò)受限，請根據(jù)參考信息配置DevEco Studio代理吸申、NPM代理和Gradle代理后梗劫，再下載HarmonyOS SDK享甸。

在這里插入圖片描述

3.通過DevEco Studio向?qū)е敢_發(fā)者下載HarmonyOS SDK，默認情況下梳侨，SDK會下載到user目錄下蛉威，也可以指定對應(yīng)的存儲路徑，SDK存儲路徑不支持中文字符走哺，然后點擊Next蚯嫌。

在這里插入圖片描述

4.默認會下載最新版本的Java SDK、JS SDK丙躏、Previewer和Toolchains择示。在彈出的License Agreement窗口，點擊Accept開始下載SDK晒旅。
說明

下載SDK過程中栅盲，如果出現(xiàn)下載JS SDK失敗，提示“Install js dependencies failed.”废恋，請根據(jù)JS SDK安裝失敗處理指導(dǎo)進行處理谈秫。
5.等待HarmonyOS SDK及工具下載完成，點擊Finish拴签，界面會進入到DevEco Studio歡迎頁孝常。

在這里插入圖片描述

SDK默認只會下載最新版本的Java SDK、JS SDK蚓哩、Previewer和Toolchains构灸，點擊上圖歡迎頁中的Configure（或圖標） > Settings，進入HarmonyOS SDK頁面岸梨，可以下載其它組件喜颁，只需要勾選對應(yīng)的組件包，然后點擊Apply即可。
更新HarmonyOS SDK

如果已經(jīng)下載過HarmonyOS SDK秩仆，當存在新版本的SDK時舶吗，可以通過SDK Manager來更新對應(yīng)的SDK。進入SDK Manager的方法：

在DevEco Studio歡迎頁寂拆，點擊Configure（或圖標） > Settings > HarmonyOS SDK進入SDK Manager界面（macOS系統(tǒng)為Configure > Preferences > HarmonyOS SDK）。
在DevEco Studio打開工程的情況下抓韩，點擊Tools > SDK Manager界面進入纠永；或者點擊Files > Settings > HarmonyOS SDK進入（macOS系統(tǒng)為DevEco Studio > Preferences > HarmonyOS SDK）。

在SDK Manager中谒拴，勾選需要更新的SDK尝江，然后點擊Apply，然后在彈出的確認更新窗口英上，點擊OK即可開始更新炭序。

在這里插入圖片描述

配置HDC工具環(huán)境變量

HDC是為開發(fā)者提供HarmonyOS應(yīng)用的調(diào)試工具啤覆，為方便使用HDC工具，請為HDC工具的端口號設(shè)置環(huán)境變量惭聂。

Windows環(huán)境變量設(shè)置方法：

在此電腦 > 屬性 > 高級系統(tǒng)設(shè)置 > 高級 > 環(huán)境變量中窗声，添加HDC端口變量。變量名為：HDC_SERVER_PORT彼妻，變量值設(shè)置為7035嫌佑。

[圖片上傳失敗...(image-f7a5aa-1625060806574)]

環(huán)境變量配置完成后，關(guān)閉并重啟DevEco Studio侨歉。

macOS環(huán)境變量設(shè)置方法：

打開終端工具屋摇，執(zhí)行以下命令，打開.bash_profile文件幽邓。

    vi ./.bash_profile

點擊字母“i”炮温，進入Insert模式。
輸入以下內(nèi)容牵舵，添加HDC_SERVER_PORT環(huán)境變量信息柒啤。

    HDC_SERVER_PORT=7035
    launchctl setenv HDC_SERVER_PORT $HDC_SERVER_PORT
    export HDC_SERVER_PORT

編輯完成后，點擊“Esc”鍵畸颅，退出編輯模式担巩，然后輸入:wq，點擊Enter按鈕保存没炒。
執(zhí)行以下命令涛癌，使配置的環(huán)境變量生效。

    source .bash_profile

環(huán)境變量配置完成后送火，關(guān)閉并重啟DevEco Studio拳话。

參考信息

DevEco Studio開發(fā)環(huán)境需要依賴于網(wǎng)絡(luò)環(huán)境，需要連接上網(wǎng)絡(luò)才能確保工具的正常使用种吸。

一般來說弃衍，如果使用的是個人或家庭網(wǎng)絡(luò)，是不需要設(shè)置代理信息的坚俗；只有部分企業(yè)網(wǎng)絡(luò)受限的情況下镜盯，才需要設(shè)置代理信息。

如果是第一次打開DevEco Studio猖败，配置向?qū)Ы缑娉霈F(xiàn)設(shè)置Set up HTTP Proxy界面形耗，說明網(wǎng)絡(luò)受限，可以通過配置代理的方式來解決辙浑，需要配置DevEco Studio代理、NPM代理和Gradle代理拟糕。

在這里插入圖片描述

設(shè)置Gradle代理

打開“此電腦”判呕，在文件夾地址欄中輸入%userprofile%（Mac系統(tǒng)請點擊前往 > 個人）倦踢，進入個人用戶界面。

在這里插入圖片描述

創(chuàng)建一個文件夾侠草，命名為.gradle辱挥。如果已有.gradle文件夾，請?zhí)^此操作边涕。
說明

macOS系統(tǒng)創(chuàng)建.gradle文件夾前晤碘，請將系統(tǒng)設(shè)置為“顯示隱藏文件”。
進入.gradle文件夾功蜓，新建一個文本文檔园爷，命名為gradle，并修改后綴為.properties式撼。
打開gradle.properties文件中童社，添加如下腳本，然后保存著隆。
其中代理服務(wù)器扰楼、端口、用戶名美浦、密碼和不使用代理的域名弦赖，請根據(jù)實際代理情況進行修改。其中不使用代理的“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布局和在代碼中創(chuàng)建布局。這兩種方式創(chuàng)建出的布局沒有本質(zhì)差別荤牍，為了熟悉兩種方式案腺，我們將通過XML的方式編寫第一個頁面，通過代碼的方式編寫第二個頁面康吵。

在“Project”窗口劈榨，點擊“entry > src > main > resources > base > layout”，打開“ability_main.xml”文件晦嵌。

在這里插入圖片描述

第一個頁面內(nèi)有一個文本和一個按鈕同辣，使用DependentLayout布局，通過Text和Button組件來實現(xiàn)惭载，其中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文件來設(shè)置棒妨。

右鍵點擊“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快捷鍵）引入對應(yīng)類参滴，否則會產(chǎn)生報錯提示。
說明

HarmonyOS提供了Ability和AbilitySlice兩個基礎(chǔ)類剖笙，一個有界面的Ability可以由一個或多個AbilitySlice構(gòu)成卵洗，AbilitySlice主要用于承載單個頁面的具體邏輯實現(xiàn)和界面UI，是應(yīng)用顯示弥咪、運行和跳轉(zhuǎn)的最小單元过蹂。

本文檔以同一個Ability內(nèi)的兩個AbilitySlice之間的跳轉(zhuǎn)為例，如果開發(fā)者希望實現(xiàn)兩個Ability之間的跳轉(zhuǎn)聚至，請參考不同Page間導(dǎo)航酷勺。
“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布局
        }
    }

使用預(yù)覽器或模擬器運行項目，效果如下圖所示：

在這里插入圖片描述

創(chuàng)建另一個頁面

在上一節(jié)中扳躬，我們用XML的方式編寫了一個包含文本和按鈕的頁面脆诉。為了幫助開發(fā)者熟悉在代碼中創(chuàng)建布局的方式，接下來我們使用代碼的方式編寫第二個頁面贷币。

在“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);

            // 設(shè)置布局寬高
            myLayout.setWidth(LayoutConfig.MATCH_PARENT);
            myLayout.setHeight(LayoutConfig.MATCH_PARENT);

            // 設(shè)置布局背景為白色
            ShapeElement background = new ShapeElement();
            background.setRgbColor(new RgbColor(255, 255, 255));
            myLayout.setBackground(background);
            
            // 創(chuàng)建一個文本
            Text text = new Text(this);
            text.setText("Hi there");
            text.setWidth(LayoutConfig.MATCH_PARENT);
            text.setTextSize(100);
            text.setTextColor(Color.BLACK);

            // 設(shè)置文本的布局
            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);
        }
    }

實現(xiàn)頁面跳轉(zhuǎn)

打開第一個頁面的“MainAbilitySlice.java”文件宫仗，添加按鈕的響應(yīng)邏輯，實現(xiàn)點擊按鈕跳轉(zhuǎn)到下一頁旁仿，示例代碼如下：

    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);

            // 點擊按鈕跳轉(zhuǎn)至第二個頁面
            button.setClickedListener(listener -> present(new SecondAbilitySlice(), new Intent()));
        }
    }

再次運行項目藕夫，效果如圖所示：

在這里插入圖片描述