兩個案例五分鐘輕松入門Harmony（鴻蒙）開發-有解無憂

一、任務說明

構建一個簡單的具有頁面跳轉功能的應用，以此來熟悉HarmonyOS應用開發流程！HarmonyOS提供了兩種FA（Feature Ability）的UI開發框架：Java UI框架和JS UI框架，本文會通過Java和JS兩種方式的Demo來入門HarmonyOS，此外也會介紹HarmonyOS的DevEco Studio編碼工具的相關使用，工程的組態檔介紹，資源檔案介紹等內容，文章大部分理論部分來自官網， https://developer.harmonyos.com/cn/home ?

二、組態檔介紹

組態檔的目錄在entry -> src -> main -> config.json

應用的每個HAP的根目錄下都存在一個“config.json”組態檔，格式采用JSON格式，每個配置項由屬性和值兩部分組成： 屬性：出現順序不分先后，不允許重復出現值：JSON的基本資料型別（數值、字串、布林值、陣列、物件或者null型別），屬性值可以參考資源檔案 ?

檔案內容主要涵蓋以下三個方面：

應用的全域配置資訊，包含應用的包名、生產廠商、版本號等基本資訊，
應用在具體設備上的配置資訊，包含應用的備份恢復、網路安全等能力，
HAP包的配置資訊，包含每個Ability必須定義的基本屬性（如包名、類名、型別以及Ability提供的能力），以及應用訪問系統或其他應用受保護部分所需的權限等，

三、資源檔案介紹

資源檔案路徑entry -> src -> main -> resource下的全部檔案，用于統一存放字串、圖片、音頻等資源，

資源目錄結構主要包括:

base 目錄是默認存在的目錄，當應用的resources資源目錄中沒有與設備狀態匹配的限定詞目錄時，會自動參考該目錄中的資源檔案，
限定詞目錄，開發中自行創建
rawfile默認存在的目錄支持創建多層子目錄，目錄名稱可以自定義，檔案夾內可以自由放置各類資源檔案，rawfile目錄的檔案不會根據設備狀態去匹配不同的資源，

base目錄（內容來自官網）： base目錄與限定詞目錄下面可以創建資源組目錄（包括element、media、animation、layout、graphic、profile），用于存放特定型別的資源檔案

資源組目錄	目錄說明	資源檔案
element	表示元素資源，以下每一類資料都采用相應的JSON檔案來表征， boolean，布爾型 color，顏色 float，浮點型 intarray，整型陣列 integer，整型 pattern，樣式 plural，復數形式 strarray，字串陣列 string，字串	element目錄中的檔案名稱建議與下面的檔案名保持一致，每個檔案中只能包含同一型別的資料， boolean.json color.json float.json intarray.json integer.json pattern.json plural.json strarray.json string.json
media	示媒體資源，包括圖片、音頻、視頻等非文本格式的檔案，	檔案名可自定義，例如：icon.png
animation	表示影片資源，采用XML檔案格式，	檔案名可自定義，例如：zoom_in.xml，
layout	表示布局資源，采用XML檔案格式，	檔案名可自定義，例如：home_layout.xml，
graphic	表示可繪制資源，采用XML檔案格式，	檔案名可自定義，例如：notifications_dark.xml，
profile	表示其他型別檔案，以原始檔案形式保存，	檔案名可自定義，

限定詞目錄： 限定詞目錄可以由一個或多個表征應用場景或設備特征的限定詞組合而成，包括移動國家碼和移動網路碼、語言、文字、國家或地區、橫豎屏、設備型別、顏色模式和螢屏密度等維度，限定詞之間通過下劃線（_）或者中劃線（-）連接，開發者在創建限定詞目錄時，需要掌握限定詞目錄的命名要求以及與限定詞目錄與設備狀態的匹配規則， 限定詞目錄的命名要求

限定詞的組合順序：移動國家碼_移動網路碼-語言_文字_國家或地區-橫豎屏-設備型別-深色模式-螢屏密度，開發者可以根據應用的使用場景和設備特征，選擇其中的一類或幾類限定詞組成目錄名稱，
限定詞的連接方式：語言、文字、國家或地區之間采用下劃線（）連接，移動國家碼和移動網路碼之間也采用下劃線（）連接，除此之外的其他限定詞之間均采用中劃線（-）連接，例如：zh_Hant_CN、zh_CN-car-ldpi，

限定詞的取值范圍：每類限定詞的取值必須符合表2中的條件，否則，將無法匹配目錄中的資源檔案，

限定詞型別	含義與取值說明
移動國家碼和移動網路碼	移動國家碼（MCC）和移動網路碼（MNC）的值取自設備注冊的網路，MCC后面可以跟隨MNC，使用下劃線（_）連接，也可以單獨使用，例如：mcc460表示中國，mcc460_mnc00表示中國_中國移動，詳細取值范圍，請查閱ITU-T E.212（國際電聯相關標準），
語言	表示設備使用的語言型別，由2~3個小寫字母組成，例如：zh表示中文，en表示英語，mai表示邁蒂利語，詳細取值范圍，請查閱ISO 639（ISO制定的語言編碼標準），
文字	表示設備使用的文字型別，由1個大寫字母（首字母）和3個小寫字母組成，例如：Hans表示簡體中文，Hant表示繁體中文，詳細取值范圍，請查閱ISO 15924（ISO制定的文字編碼標準），
國家或地區	表示用戶所在的國家或地區，由2~3個大寫字母或者3個數字組成，例如：CN表示中國，GB表示英國，詳細取值范圍，請查閱ISO 3166-1（ISO制定的國家和地區編碼標準），
橫豎屏	表示設備的螢屏方向，取值如下： vertical：豎屏 horizontal：橫屏
設備型別	表示設備的型別，取值如下： phone：手機 tablet：平板 car：車機 tv：智慧屏 wearable：智能穿戴
顏色模式	表示設備的顏色模式，取值如下： dark：深色模式 light：淺色模式
螢屏密度	表示設備的螢屏密度（單位為dpi），取值如下： sdpi：表示小規模的螢屏密度（Small-scale Dots Per Inch），適用于dpi取值為(0, 120]的設備， mdpi：表示中規模的螢屏密度（Medium-scale Dots Per Inch），適用于dpi取值為(120, 160]的設備， ldpi：表示大規模的螢屏密度（Large-scale Dots Per Inch），適用于dpi取值為(160, 240]的設備， xldpi：表示特大規模的螢屏密度（Extra Large-scale Dots Per Inch），適用于dpi取值為(240, 320]的設備， xxldpi：表示超大規模的螢屏密度（Extra Extra Large-scale Dots Per Inch），適用于dpi取值為(320, 480]的設備， xxxldpi：表示超特大規模的螢屏密度（Extra Extra Extra Large-scale Dots Per Inch），適用于dpi取值為(480, 640]的設備，

限定詞目錄與設備狀態的匹配規則

在為設備匹配對應的資源檔案時，限定詞目錄匹配的優先級從高到低依次為：移動國家碼和移動網路碼 > 區域（可選組合：語言、語言_文字、語言_國家或地區、語言_文字_國家或地區）> 橫豎屏 > 設備型別 > 顏色模式 > 螢屏密度，
如果限定詞目錄中包含移動國家碼和移動網路碼、語言、文字、橫豎屏、設備型別、顏色模式限定詞，則對應限定詞的取值必須與當前的設備狀態完全一致，該目錄才能夠參與設備的資源匹配，例如，限定詞目錄“zh_CN-car-ldpi”不能參與“en_US”設備的資源匹配，

三、使用Java語言開發

打開編輯器DevEco Studio創建一個工程，選擇File -> New -> New Project

在Choose your abilitu template 頁面選擇**Empty Ability(Java)，**然后點擊Next

配置專案的相關資訊，包括Project Name、Project Type、Package Name、Save Location、Device Type等資訊，最后點擊Next即可

在Project視窗中，點擊entry -> src -> main -> resources -> base -> layout -> ability_main.xml檔案，可以看到如下代碼

（可選）如果需要參考String資源推薦在"string.json"檔案中進行配置，在Project視窗中，點擊entry -> src -> main -> resources -> base -> element -> string.json檔案，新增button——Next按鈕資源

頁面中的內容包括一個文本和一個按鈕，使用DependentLayout方式進行布局，通過Text和Button組件實作其中vp代表虛擬像素，fp代表字體像素，其中Button中的內容參考自string.json資源，這是HarmonyOS官方推薦的方式，注意如下內容修改的是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="$string:button_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>

設定按鈕的樣式，通過entry -> src -> main -> resources -> base -> graphic目錄下新增檔案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>

ability_main.xml檔案中引入按鈕的樣式，應用方式通過

ohos:background_element="$graphic:background_button"

// ... 
<Button
        ohos:id="$+id:button"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="$string:button_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"/>
// ...

加載xml布局，打開entry -> src -> main -> java -> com -> liziba -> demo -> slice -> MainAbilitySlice,java檔案，通過類的繼承關系MainAbilitySlice **extends **AbilitySlice，可以看出MainAbilitySlice 是一個AbilitySlice的子類，而AbilitySlice主要用于承載單個頁面的具體邏輯實作和界面UI，是應用顯示、運行和跳轉的最小單元，

package com.liziba.demo.slice;

import com.liziba.demo.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);
        // 加載xml布局
        super.setUIContent(ResourceTable.Layout_ability_main);
    }

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

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

開啟遠程除錯

該頁面需要先登錄華為賬戶登錄后效果如下

運行專案

點擊編輯器的右上角的三角形直接運行，或者點擊小甲殼蟲進入除錯模式，第一個頁面的效果

創建第二個頁面

上面的頁面是通過xml方式來實作的，第二個頁面使用Java代碼來撰寫在entry -> src -> main -> java -> com -> liziba -> demo -> slice目錄下新增SecondAbilitySlice.java類代碼如下：

package com.liziba.demo.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;

/**
 * 第二個頁面
 */
public class SecondAbilitySlice extends AbilitySlice {


    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);

        // 宣告布局
        DependentLayout myLayout = new DependentLayout(this);

        // 設定布局寬高
        myLayout.setWidth(DependentLayout.LayoutConfig.MATCH_PARENT);
        myLayout.setHeight(DependentLayout.LayoutConfig.MATCH_PARENT);

        // 設定布局背景為白色
        ShapeElement background = new ShapeElement();
        background.setRgbColor(new RgbColor(255, 255, 255));
        myLayout.setBackground(background);

        // 創建一個文本
        Text text = new Text(this);
        text.setText("你好李子捌！");
        text.setWidth(DependentLayout.LayoutConfig.MATCH_PARENT);
        text.setTextSize(100);
        text.setTextColor(Color.BLACK);

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

實作按鈕跳轉頁面功能

打開MainAbilitySlice.java類，新增按鈕點擊后頁面跳轉功能

package com.liziba.demo.slice;

import com.liziba.demo.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);
        // 加載xml布局
        super.setUIContent(ResourceTable.Layout_ability_main);
        // 這個Id_button，編譯器會統一分配一個唯一id，對應ability_main.xml中定義的button
        Button button = (Button) findComponentById(ResourceTable.Id_button);
        // 按鈕點擊實作跳轉
        button.setClickedListener(listener -> present(new SecondAbilitySlice(), new Intent()));
    }

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

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

關于其中的id不了解的可以查看如下這個類重新運行專案，點擊按鈕實作頁面跳轉功能如下：

四、使用JS語言開發

上面部分相同的步驟將會在這里面省略

在Choose your abilitu template 頁面選擇**Empty Ability(JS)，**然后點擊Next

配置專案資訊

撰寫一個包含一個文本和一個按鈕的頁面

打開entry -> src -> main -> js -> default -> page.index -> index.hml檔案，添加一個文本和一個按鈕

<!-- index.hml -->
<div class="container">
<!-- 添加一個文本 -->
    <text class="text">
        你好，李子捌
    </text>
<!-- 添加一個按鈕，按鈕樣式設定為膠囊型，文本顯示為Next，系結launch事件 -->
    <button class="button" type="capsule" value="頁面跳轉" onclick="launch"></button>
</div>

設定樣式

打開entry -> src -> main -> js -> default -> page.index -> index.css檔案，設定按鈕和文本的樣式

/* index.css */
.container {
    flex-direction: column; /* 設定容器內的專案縱向排列 */
    justify-content: center; /* 設定專案位于容器主軸的中心 */
    align-items: center; /* 專案在交叉軸居中 */
}
/* 對class="text"的組件設定樣式 */
.text{
    font-size: 32px;
}
/* 對class="button"的組件設定樣式 */
.button {
    width: 200px;
    height: 40px;
    background-color: #007dff;
    font-size: 20px;
    text-color: white;
    margin-top: 10px;
}

預覽第一個頁面

創建第二個頁面

打開entry -> src -> main -> js -> default -> page.index，右鍵New -> JS Page ?

JS Page Name 填入details，點擊Next 將會看到工程出現如下檔案，注意這里如果要自己手動創建也行，但是三個檔案都需要，否則運行無法成功！

修改details.hml檔案

<div class="container">
    <text class="text">
        你好鴻蒙，我是李子捌！
    </text>
</div>

修改details.css檔案

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.text {
    font-size: 30px;
    text-align: center;
}

實作頁面跳轉

修改index.js檔案

import router from '@system.router';

export default {
    launch() {
        router.push ({
            uri:'pages/index/details/details', // 指定要跳轉的頁面
        })
    }
}

運行專案查看效果

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/290420.html

標籤：java

上一篇：從零學Java（10）之方法詳解，噴打野你真的沒我6！

下一篇：HarmonyOS 實戰——認識服務卡片及運行第一個服務卡片