天天看點
傳回

鴻蒙3.0 App開發技術選型

目前HarmonyOS 3.0最新版本為Beta2，主要支援Java UI和ArkUI(方舟開發架構)進行鴻蒙App開發，而ArkUI支援基于JS擴充的類Web開發範式和基于TS擴充的聲明式開發範式(即eTS)。鴻蒙開源版本OpenHarmony在2022年3月31日已正式釋出3.1 release版，僅支援Javascript和eTS兩種方式。

本節先基于最簡單的Hello World案例，增加一個按鈕，點選按鈕改變文字内容。直覺對比感受下這三種開發方式的差異。[源碼位址：https://gitee.com/cloudev/harmonyos3/tree/master/1.1]

鴻蒙3.0 App開發技術選型

1.1.1 Java UI的開發方式

初始代碼：

Java代碼(\1.1\JavaUI\Hello\entry\src\main\java\top\cloudev\hello\slice\MainAbilitySlice.java)

package top.cloudev.hello.slice;

import ohos.agp.components.Button;
import ohos.agp.components.Text;
import top.cloudev.hello.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);
    }

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

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

xml頁面（\1.1\JavaUI\Hello\entry\src\main\resources\base\layout\ability_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">

    <Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Hello World"
        ohos:text_size="40vp"
        />

</DirectionalLayout>
功能實作：

在xml頁面中加入按鈕：

<Button
        ohos:id="$+id:btn_edit"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:btn"
        ohos:text_size="27fp"
        ohos:text="編輯文字"
        ohos:text_color="#FFFFFF"
        ohos:top_margin="30vp"
        ohos:left_margin="15vp"
        ohos:bottom_margin="15vp"
        ohos:right_padding="15vp"
        ohos:left_padding="15vp" />

在graphic目錄增加一個膠囊按鈕背景（\resources\base\graphic\btn.xml）,形狀為矩形，圓角為100，顔色為藍色：

<?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="#007CFD"/>
</shape>

然後在java代碼中加入按鈕點選事件代碼，實作點選按鈕後文本"Hello World"變為"Hello Java UI"：

// 通過資源ID找到文本元件對象
Text txt = (Text)findComponentById(ResourceTable.Id_text_helloworld);

// 通過資源ID找到按鈕元件對象
Button button = (Button) findComponentById(ResourceTable.Id_btn_edit);
// 監聽按鈕點選事件
button.setClickedListener(component -> {
    // 設定文本對象的文字
    txt.setText("Hello Java UI");
});

1.1.2 Js UI的開發方式

Js UI的Hello World頁面由三個檔案組成，分别是index.hml、index.css和index.js（\1.1\JsUI\Hello\entry\src\main\js\default\pages\index）。

初始代碼:

index.hml（頁面布局）

<div class="container">
    <text class="title">
        {{ title }}
    </text>
</div>

index.css（樣式）

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 40px;
    color: #000000;
    opacity: 0.9;
}

@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}

@media screen and (device-type: wearable) {
    .title {
        font-size: 28px;
        color: #FFFFFF;
    }
}

@media screen and (device-type: tv) {
    .container {
        background-image: url("/common/images/Wallpaper.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .title {
        font-size: 100px;
        color: #FFFFFF;
    }
}

@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

index.js（邏輯代碼）

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = 'hello world';
    }
}
功能實作：

index.hml中增加按鈕：

<button class="buttons" type="capsule" onclick="handleClick">編輯文字</button>

index.css中增加樣式：

.buttons{
    margin-top: 30px;
}

index.js中增加點選事件代碼：

handleClick(){
    this.title = 'hello js UI'
}

1.1.3 eTS的開發方式

eTS的Hello World頁面隻需要一個頁面（\1.1\ArkUI\Hello\entry\src\main\ets\default\pages\index.ets）。

初始代碼: 
@Entry
@Component
struct Index {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}

添加按鈕的布局、樣式及邏輯代碼也非常簡單，對上述代碼稍作調整即可。

功能實作： 
Button('編輯文字')
    .margin({top:30})
    .onClick(() => {
    this.msg = 'Hello ArkUI'
})

很顯然，這三種開發方式中，Java UI的方式代碼最為複雜，Js UI的方式次之，而華為最新推出的eTS方式，代碼最為精簡，閱讀自然。性能方面，華為官方稱，ArkUI可獲得原生應用的性能體驗，是以我們無須擔心。在華為的方舟開發架構概述中有一段關于Js UI和eTS的比較和建議：

類Web開發範式，采用經典的HML、CSS、JavaScript三段式開發方式。使用HML标簽檔案進行布局搭建，使用CSS檔案進行樣式描述，使用JavaScript檔案進行邏輯處理。 主要适用于界面較為簡單的中小型應用開發。

聲明式開發範式，采用TS語言并進行聲明式UI文法擴充，從元件、動效和狀态管理三個次元提供了UI繪制能力。UI開發更接近自然語義的程式設計方式，讓開發者直覺地描述UI界面，不必關心架構如何實作UI繪制和渲染，實作極簡高效開發。同時，選用有類型标注的TS語言，引入編譯期的類型校驗，更适用大型的應用開發。

聲明式開發範式無需JS Framework進行頁面DOM管理，渲染更新鍊路更為精簡，占用記憶體更少，是以更推薦開發者選用聲明式開發範式來搭建應用UI界面。

很顯然，Java UI開發方式主要是适應原來做安卓開發的同學，而Js UI開發方式主要适應原來做Vue、小程式開發的同學，讓他們更快融入鴻蒙開發生态。然而，這隻是權宜之計，最終，華為主推的鴻蒙開發語言是基于eTS的ArkUI開發方式。

本教程将基于HarmonyOS 3.0 Beta版示範如何高效開發ArkUI(eTS)的鴻蒙App。

ArkUI ets 鴻蒙開發 方舟開發架構 HarmonyOS 3.0
上一篇: LoRa波形參數前言一、LORA調制二、接收靈敏度三、信噪比和擴頻因子四、帶寬和碼片速率五、前向糾錯六、LORA包格式和空口傳輸時間七、參數程式接口
下一篇: OpenHarmony 通話應用源碼剖析

繼續閱讀