前言

Hello Harmony
從 Harmony 發布會開始狗子我就一直打算對 HMOS 進行學習，奈何當時并沒有 Java 基礎，因此在學習完 Java 基礎之后，我便立即開始了我的鴻蒙之旅，

在下文中主要記錄了單擊事件的實作程序，不從Hello World 開始是因為新建專案的時候便已經是 Hello World 的代碼，不需要我們敲了，因此我便用了另外一個官方的一個案例當作第一個入門案例并對其進行過 超級細 的講解，
若有任何問題隨時歡迎評論區留言，狗子我估計最近幾十年都還在，

一、前期準備

1.1、涉及術語解釋

• 組件：文本、按鈕、圖片等元素的統稱
• 事件： 可以被組件識別的操作，常見的事件有單擊、雙擊、長按和滑動等
• 單擊事件：又稱點擊事件，是我們日常操作中觸發的最多的事件
• Intent：意圖是系統的基本通信組件，它封裝了一個方法呼叫的意圖和引數，Intent 可以在 Ability.startAbility(Intent) 中使用來啟動一個 Ability，

1.2、案例準備

• IDE：DevEco Studio 2.2 Beta1
• 編程知識：Java 基礎

1.3、相關檔案

以下為 Harmony 開發的 API 相關檔案，采用于博主 李子捌

1.4、實作步驟

在本案例中主要分為五個步驟：

1. 定義第一個頁面即首頁
2. 定義按鈕組件，并給組件分配唯一的 ID， 之后通過 ID 定位到該組件
3. 定義第二個頁面即跳轉之后的頁面
4. 給定義的按鈕組件系結單擊事件，實作 ClickedListenter 介面并重寫 onClick() 方法
5. 實作 ClickedListener 介面并重寫 onClick() 方法

二、案例實作

在鴻蒙 UI 中，提供了兩種撰寫布局的方式，分別為 XML 檔案 和 Java 代碼 ：

• XML 檔案：標簽表示要展示的不同內容，如 <Text> 表示文本，<Image> 表示圖片，<Button> 表示按鈕
• Java代碼：物件表示展示的不同內容，如 Text 物件表示文本，Image 物件表示圖片，Button 物件表示按鈕

為了體驗一下兩中方式的異同，因此第一個頁面會用 XML 檔案 的方式撰寫，第二個頁面則用 Java 代碼 進行撰寫，

2.1、創建專案

File -> New -> New Project；

選擇Empty Ability(Java)，單擊Next；

填寫專案相關配置資訊，點擊 next，其中的專案名和存放地址可以根據自己需求填寫，也可默認；

創建完成后你應該會呈現如下的效果；

2.2、定義第一個頁面 (XML檔案)

在創建專案的時候，DS 會給我們自動地生成了一個頁面，因此我們第一個頁面直接在默認生成的頁面的基礎上進行修改，首先，在左邊的樹下打開 entry.src.main.resources.base.layout 下的 ablity_main.xml 檔案；

不出意外你會看到以下的界面；

接下來就是對該檔案代碼進行修改，其中修改過的部分都已補上注釋；

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <!--1. 修改了 ohos:id，此處可以不進行修改，只是為了和文本內容統一而已-->
    <!--2. 修改了 ohos:text，用于提示這是第一個頁面-->
    <Text
        ohos:id="$+id:text_firstPage"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="這是第一個頁面"
        ohos:text_size="40vp"
        />

</DirectionalLayout>

2.3、定義按鈕組件

這一步會定義一個按鈕組件，并且給按鈕組件分配唯一 ID ，之后通過 ID 定位按鈕組件，同樣找到并打開 entry.src.main.resources.base.layout 下的 ablity_main.xml 檔案，對組件代碼進行開發；

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <!--1. 修改了 ohos:id，此處可以不進行修改，只是為了和文本內容統一而已-->
    <!--2. 修改了 ohos:text，用于提示這是第一個頁面-->
    <Text
        ohos:id="$+id:text_firstPage"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="這是第一個頁面"
        ohos:text_size="40vp"
        />

    <!--ohos:id 定義組件的 id，格式為 $+id:xxx-->
    <!--ohos:height 定義組件的高，match_content 是自適應文本內容進行放縮-->
    <!--ohos:width 定義組件的寬，match_content 作用同上-->
    <!--ohos:background_element 定義組件的背景色-->
    <!--ohos:text_size 定義組件文本的大小，其中的 fp 為大小單位-->
    <!--ohos:text 定義組件內的文字-->
    <Button
        ohos:id="$+id:btn1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#007DFF"
        ohos:text_size="30fp"
        ohos:text="快來點我"
        ohos:text_color="#FFFFFF"
        />

</DirectionalLayout>

2.4、定義第二個頁面 (Java代碼)

找到 Java 檔案夾下的 slice 包，右鍵點擊新建一個 Empty Page Ability(Java)；

填寫相關資訊之后點擊 Finish；

這時我們會多出下圖紅色框框中的檔案以及綠色框中的組態檔也會有相對應的更新；

點擊打開上圖中的第一個紅框框中的內容，在其中進行開發第二個頁面；

package com.example.singleclicklistenerapplication.slice;

import com.example.singleclicklistenerapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Text;
import ohos.agp.utils.Color;

public class SecondAbilitySlice extends AbilitySlice{
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
//        super.setUIContent(ResourceTable.Layout_ability_second);  //由于是利用 Java 代碼開發，因此這一行呼叫 XML檔案 的代碼注釋掉
        
        //1. 創建布局物件，因為是創建在本類中，因此引數串列寫 this
        DirectionalLayout dl = new DirectionalLayout(this);
        
        //2.創建文本物件，這里匯入的是 agp 類別庫下的 Text，同樣是在能類中，因此還是 this
        Text text = new Text(this);
        text.setText("你居然成功點進來了耶！");   //設定文本內容
        text.setTextSize(100);                  //設定文本大小
        text.setTextColor(Color.BLUE);          //設定文本顏色
        
        //3. 把文本物件添加到布局中
        dl.addComponent(text);
        
        //4. 把布局添加到子界面中
        super.setUIContent(dl);
    }

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

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

2.5、定義的按鈕系結單擊事件

因為按鈕組件是寫在第一個頁面中的，因此系結事件的代碼也是在第一個頁面中完成，首先找到并打開 MainAbilitySlice.java 檔案，在其 onStart() 方法中對事件的系結進行開發 ，
由于是直接用MainAbilitySlice類來實作介面的，因此這部分的代碼整合到了 2.6 中去了

普及知識：Component findComponentById() 方法回傳的是 Component ， Component 是 HarmonyOS 中所有組件的父類，

2.6、實作ClickedListener介面并重寫onClick()方法

實作介面在這里理論上可以有三種方法，在本案例中使用了第一種方法：

1. 直接使用 MainAbilitySlice 實作 Component.ClickedListener 介面
2. 通過定義一個內部類實作 Component.ClickedListener 介面
3. 定義其他外部類實作 Component.ClickedListener 介面

package com.example.singleclicklistenerapplication.slice;

import com.example.singleclicklistenerapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.agp.components.Button;
import ohos.agp.components.Component;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        //1. 通過定義按鈕時設定的 ID 找到按鈕組件，其中 findComponentById() 回傳的是所有組件的父類 Component，因此需要向下轉型成 Button
        Button button = (Button) findComponentById(ResourceTable.Id_btn1);

        button.setClickedListener(this);
    }

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

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

    @Override
    public void onClick(Component component) {
        Intent intent = new Intent();   //實體化 意圖 物件
        /*
            1. withDeviceId(String string)：引數串列為設備的 ID，代表要跳轉到哪個設備上，空字串表示本機
            2. withBundleName(String string)：引數串列為需要跳轉到的目標應用的包名
            3. withAbilityName(String string)：引數串列為要跳轉的頁面的地址
            4. build()：創造一個 Object 實體
            5. setOperation(Operation operation)：在 intent 中設定需要的操作 Operation
            6. startAbility(Intent intent)：進行跳轉頁面操作
         */
        Operation operation = new Intent.OperationBuilder()
                .withDeviceId("")
                .withBundleName("com.example.singleclicklistenerapplication")
                .withAbilityName("com.example.singleclicklistenerapplication.SecondAbility")
                .build();
        intent.setOperation(operation); //將打包之后的 operation 設定到意圖中
        startAbility(intent);           //跳轉頁面
    }
}

！！！注意注意！！！！
在上方代碼中的 withBundleName 和 withAbilityName 的括號內要分別填寫大家伙自己的應用包名和第> 二個頁面的地址，下方提供獲取兩者的方法

找到 src.main 下的 congig.json 檔案，按照下圖獲取兩者對應資訊；

三、案例測驗

到這里就恭喜你，不出意外的話你即將成功開發了你的第一個 Harmony 案例啦，

3.1、登陸遠程模擬器

點擊Tools -> Device Manager；

選擇下圖中帶有 Phone 標志的兩個模擬設備中的一個，雙擊或者點擊箭頭指出來的三角符號，狗子我選的是 P40（買不起我還模擬不起嘛是吧），

在這里可能會有一些小伙伴會出現沒有這個界面的情況，而是出現一個帶有 Login 按鈕的界面，這是因為還沒有登錄到你的華為賬號，點擊進去注冊登陸在進行這一步的操作就可以了呀

3.2、運行程式

不出意外的話你會看到下面的畫面，點擊紅色框中的三角符號運行或者小甲蟲符號進行除錯就可以查看自己的成果了呀

在這里附上我的演示效果（ 終于完成啦！！！下班！！！）