【第22期】HarmonyOS应用开发（基础篇）

siberiawolf

发布于 2021-06-29 15:08:04

1.2K0

发布于 2021-06-29 15:08:04

文章被收录于专栏：前端修炼之路

前言

前几日，华为EMUI官方微博正式宣布更名为HarmonyOS。

EMUI更名为HarmonyOS

这不就是说，以后华为手机都是鸿蒙系统了嘛？鸿蒙还发出了一条视频，视频中显示2021年6月2号将开启鸿蒙操作系统及华为全场景新品发布会。预计现在支持EMUI11升级的机型，将全部支持升级鸿蒙系统。我这一瞅，这不就是明天准备推送了嘛，抓紧学习一波儿。

之前一直有关注过鸿蒙系统，但是感觉应该不会很快的大面积推送系统。直到看到这个新闻后，我才觉得是时候学一下鸿蒙系统了。

学习鸿蒙系统非常简单，目前鸿蒙的文档、开发者社区、学习视频都非常多。我的主要学习方法就是跟着官网读一遍文档。然后文档里面没了解过概念知识点整理一下。

系统定位

系统定位

文档中有一段关于鸿蒙的系统定位，看到这段文字介绍，就可以总结出鸿蒙系统的三大特点：

分布式：鸿蒙可以适配多个终端，包括手机、平板、智能家电、智慧屏、车载机等。从这个定位而言，就说明鸿蒙系统从设计之初就跟安卓系统不一样。最关键的就是，面对不同的设备终端，只需要开发一套系统，而不需要多次开发。也就是鸿蒙实现了一次开发，多端部署的能力。
易开发：鸿蒙系统提供了多种开发语言API，包括Java、C、JS。也就是前后端开发人员都可以快速上手学习鸿蒙。我觉得鸿蒙系统架构师在设计鸿蒙的时候，也是希望尽可能多的让各种开发人员学习和掌握鸿蒙。
组件化：鸿蒙采用组件化设计方案，可以实现不同终端设备对操作系统的要求。说人话就是呢，不同的设备对操作系统有不同的要求。比如有些智能家电不需要屏幕显示模块，采用鸿蒙系统的家电，会根据实际需要自由组合系统模块。这样带来的好处之一就是，减少智能家电系统的大小，实现业务灵活裁剪。

从这段学习当中，让我看到了鸿蒙的愿景非常远大。不仅仅是可以替代安卓系统，还可以将所有的智能设备连接在一起，实现万物互联。

技术架构

鸿蒙技术架构图

我个人感觉，想学鸿蒙的话，主要根据这张技术架构图，应该就够了。剩下的所有相关知识无非就是根据这张技术架构图进行的扩展和补充。所以官方给出的这张技术架构图就是重中之重了。

鸿蒙系统从下向上依次分为：内核层、系统服务层、架构层和应用层。这四层初看起来，跟隔壁的安卓系统架构图非常像啊，但又完全不一样。鸿蒙系统功能可以根据实际需要，量身定制某些非必要的系统功能和模块。

内核层：内核层针对不同资源受限设备选用适合的OS内核。说点人话就是，这一层提供了统一的外部访问API。因为鸿蒙需要面对的设备终端众多，有Linux、LiteOS等。所以这一层将各个内容差异统一封装，暴露给外部的操作API接口却是统一的。我猜测也就是因为这一层等封装，才让鸿蒙可以完美兼容安卓系统。不知道鸿蒙可不可以开发苹果应用呢，后面学着看。
系统服务层：整个鸿蒙系统的核心能力层。也就是包括多设备运行、安全、AI、电话、位置服务、穿戴设备啥的，都是这层干的活儿。我比较感兴趣的是，其中提供了方舟运行时。因为没了解过方舟，后面单独整理一下。
框架层：提供了两套UI框架，Java UI框架和JS UI框架。也就说，针对JAVA程序员和JS程序员都可以上手UI界面。
应用层：一个鸿蒙应用有多个FA或PA。FA有UI界面，提供用户交互的能力；PA提供后台运行任务和数据访问。这样做的好处就是，根据实际的业务需要，可以自由组合FA和PA，实现跨终端设备。

方舟编译器

阅读文档时，系统服务层提供了方舟多语言运行时子系统。其中发现了如下这句话：

方舟运行时提供了C/C++/JS多语言运行时和基础的系统类库，也为使用方舟编译器静态化的Java程序（即应用程序或框架层中使用Java语言开发的部分）提供运行时。

按照我的理解，这应该就是鸿蒙可以实现多语言开发的关键吧。然后从网上找了一篇文章，瞬间明白了方舟编译器做的事情。

不管是早期的电子管还是现在的半导体晶体管，这些计算的基本单位能识别的只有电平的高低，在计算机中我们就用0和1来表示。1和0的各种组合就是机器是能看懂的语言，也就是机器码。计算机的初期，人们就是用0和1来写成程序命令的，这种反人类的编码显然是程序员痛恨的，于是有了汇编语言，用字符来表示命令编码，这就方便了很多，但是大型程序依然不可行，C\C++,JAVA等高级语言应运而生。可以说高级语言是为程序员设计的，也是为大型的软件工程设计的，因此逐步诞生了面向对象编程的继承、多态以及回调、反射等机制，不管高级语言怎么变化，处理器能够识别的都只是机器码，编译器就承担了这个翻译转化的角色，这也是方舟编译器要做的事儿。

现在的手机系统iOS之所以比Android系统更流畅的一个原因，就是因为iOS没有像Android一样的虚拟机。Java之所以可以做到跨平台的原因虽然是因为有虚拟机，但是在手机操作系统上，虚拟机却拖累了Android。虚拟机打包成的字节码虽然可以做到与机器硬件无关，但是当程序执行的时候，还是需要再次编译成机器码才能执行。也就是Java开发完的程序需要编译两次才可以执行，反观iOS则只需要一次。因为iOS有集成swiftc编译命令的Xcode工具。

鸿蒙比安卓会更流畅的一个原因也是因为没有虚拟机，它采用了和iOS一样的机制，生成安装包时直接编译成合适的机器码。

方舟编译器编译机器指令

从上面的图中可以发现，安卓应用在运行前需要静态编译，然后在ART虚拟机中，还需要执行解析器解析代码。逐字解析之后，还需要JIT。这就产生了额外的开销。反观方舟编译器，在开发阶段，就已经将其可执行文件进行了静态编译工作，剩下的只需要安装和运行即可。

方舟编译器除了去掉虚拟机，还实现了多语言联合开发。现在开发一款APP很少只使用到一种语言的，在开发应用时会使用到各种其他语言开发的库，比如C语言。不同语言之间也是需要通信、调用的。在安卓阵容中，采用的是不同语言在单独的环境中，然后通过中间代码编译成机器码去执行。而且是当程序运行时。这样就会产生系统额外的开销。

方舟编译器采用的是，不同语言在开发环境中，就编译成一套可执行文件，然后在运行环境中执行。

方舟编译器多语言联合开发

总结来说，方舟编译器针对现有的安卓问题，采用解决思路就是开发阶段解决。

去掉虚拟机，在开发阶段就静态编译生成可执行文件。
去掉JNI，在开发阶段提供统一的程序，然后生成可执行文件。

我觉得，通过这样的策略，对用户而言手机系统APP肯定是更快更流畅了，因为所有的开销在开发阶段就解决的差不多了，那程序运行时自然是快的。这就让我想起了Xcode，现在光下载Xcode 12.5就需要11.7G的存储空间，我电脑中Xcode就占用了25G的存储空间。

应用基础知识

在开始学习之前，了解一下HarmonyOS应用的基础知识。HarmonyOS应用软件包由HAP（HarmonyOS App Package）和描述文件pack.info组成。一个HAP由代码、资源、三方库和配置文件组成。

App逻辑图

一个App Pack的逻辑图如上图，这张图包含了很多信息：

entry：应用主模块，有且只有一个。也就是图中黄色的模块
feature：引用动态模块。可以有多个，甚至一个都没有。图中蓝色的模块
每个App 都有一个用来描述HAP属性的文件，pack.info，图片中绿色部分。
每个单独的hap模块都会有一个用来配置模块的配置文件，config.json。它是用来声明Ablitiy的。
libs中存放应用的三方依赖代码，如so、jar等。
资源文件包括图片、音频等，都存放于resources中。
Ability是应用能力等封装，其中又由有UI界面等FA和无UI界面等PA组成。

HarmonyOS应用开发基础

华为开发者学院有一个人才计划，里面有一门课程HarmonyOS应用开发系列课（基础篇）。通过本课程的学习，开发者能够具备运用HarmonyOS顺利开发应用的能力。

接下来就是对这门课程进行学习，同时结合官网文档进行补充学习。

首先根据官方文档给出的快速入门创建一个可以实现页面跳转的小应用。

开发环境搭建

我的开发环境是MacOS，直接下载和安装DevEco Studio即可。同时DevEco Studio需要登录华为开发者账号，因为后续开发是需要使用到远程模拟器，所以必须得有华为开发者账号。

安装完成后，需要配置一下开发环境。按照官方给出的配置开发环境的方法，自动下载安装了最新版本的HarmonyOS SDK安装包。其中默认使用的是Java语言的SDK。因为还没开始学怎样用JS开发，我先不安装JS语言的SDK包。现在的版本已经是2.1.1.20了，比文档上面要更新一些了。这个版本是2021年4月30日最新发布的一个版本。而且可以发现我的API Version已经是5了，后面创建项目时，需要选择的版本应该也是对应上的。

HarmonyOS SDK

运行hello world

老规矩，新环境都会创建一个hello world，表明环境是否搭建成功。

在创建项目时，我选择的是API Version 5，因为想体验最新的API。

API Version 5

要想使用模拟器，必须登录华为开发者账号。

登录华为开发者账号

登录账号后，选择P40机型作为模拟器，然后运行代码到模拟器中。我运行完结果和文档上面给出的图片，有些出入。我界面当中的“Hello World”文字，并没有在垂直方向居中，而是定格在了最上面。但是也说明了，开发环境搭建完成了。

hello world运行结果

用XML创建UI布局

在HarmonyOS中提供了Java UI框架，而Java UI框架又提供了两种布局方式：XML布局和代码布局。为撒HarmonyOS会提供xml布局方式呢？

我想这可能是架构者需要吸引部分Android开发者们，加入到鸿蒙系统的开发当中来。提供多种不同的开发方式，帮助鸿蒙系统发展和壮大。

文档这里并没有说怎么创建一个Button按钮或者Text文本，而是直接给出了一段代码。但是文档中给出了是采用DependentLayout布局，而且给出了Text和Button组件的连接地址。

我用DevEcoStudio创建的项目，按照文档提示，打开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: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="$string:mainability_HelloWorld"
        ohos:text_size="50px"
        />

</DirectionalLayout>

对比了一下文档给出代码，发现布局方式不一样，我这里使用的是DirectionalLayout方式布局，而文档使用的是DependentLayout方式布局。

按照文档给出的步骤开始后，又发现一个问题，每次运行模拟器都需要重新安装应用，重新运行应用才行，好像没有类似Flutter一样的热更新。

后来发现使用文档中提到的预览器可以解决实时预览界面效果的问题。

Hello World加按钮

最后我调整的代码如下：

<?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: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="$string:mainability_HelloWorld"
        ohos:text_size="50px"
        />
    <Button
        ohos:id="$+id:button"
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:text="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:layout_alignment="horizontal_center"
        ohos:below="$id:text_helloworld"
        ohos:margin="10vp"
        ohos:background_element="$graphic:background_button"/>
</DirectionalLayout>

因为是拷贝的官方文档代码，但是需要调整的地方为：