鸿蒙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]

1.1.1 Java UI的开发方式

初始代码：

Java代码(1.1JavaUIHelloentrysrcmainjava opcloudevhellosliceMainAbilitySlice.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.1JavaUIHelloentrysrcmain esourcesaselayoutability_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目录增加一个胶囊按钮背景（ esourcesasegraphictn.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.1JsUIHelloentrysrcmainjsdefaultpagesindex）。

初始代码:

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>

1.

index.css中增加样式：

.buttons{

    margin-top: 30px;

}

index.js中增加点击事件代码：

handleClick(){

    this.title = 'hello js UI'

}

1.1.3 eTS的开发方式

eTS的Hello World页面只需要一个页面（1.1ArkUIHelloentrysrcmainetsdefaultpagesindex.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开发方式。