鸿蒙3.0 App开发技术选型

系统 OpenHarmony
本节先基于最简单的Hello World案例,增加一个按钮,点击按钮改变文字内容。直观对比感受下这三种开发方式的差异。

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

目前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]。

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);
    }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

功能实现:

在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" />
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

在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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

然后在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.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

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;
    }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.

index.js(逻辑代码):

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = 'hello world';
    }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

index.hml中增加按钮:

<button class="buttons" type="capsule" onclick="handleClick">编辑文字</button>
  • 1.

index.css中增加样式:

.buttons{
    margin-top: 30px;
}
  • 1.
  • 2.
  • 3.

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

handleClick(){
    this.title = 'hello js UI'
}
  • 1.
  • 2.
  • 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%')
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

添加按钮的布局、样式及逻辑代码也非常简单,对上述代码稍作调整即可。

功能实现:

Button('编辑文字')
    .margin({top:30})
    .onClick(() => {
    this.msg = 'Hello ArkUI'
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

很显然,这三种开发方式中,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。

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​​。

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2022-08-05 19:22:27

Service模板鸿蒙

2013-04-18 11:01:10

手机游戏手机游戏引擎技术选型

2013-09-04 14:55:01

Web AppNative App技术

2020-09-14 06:47:54

Java中Websocket

2020-06-17 15:44:47

技术研发架构

2024-12-25 16:12:18

2023-09-15 14:37:55

2012-02-13 16:00:35

内网安全技术选型安全产品

2015-05-25 19:27:15

2017-05-08 16:41:44

移动开发移动开发模式APP前端

2020-11-05 10:05:25

App

2013-10-28 13:48:10

技术选型

2012-11-14 09:42:16

Pikacode技术选项项目

2019-12-12 10:58:37

Docker容器引擎

2024-09-03 13:59:37

2023-03-12 15:25:37

2022-08-19 14:06:56

前端架构技术

2018-08-08 10:38:17

云存储路线选型

2024-07-25 08:52:13

2022-08-22 08:40:42

API网关开发
点赞
收藏

51CTO技术栈公众号