【鸿蒙开发】——概述

2023-12-02  本文已影响0人  壹零二肆

简易代码实践:https://github.com/gongshijier/harmonyLab
飞书:https://bzreny5z71.feishu.cn/docx/OJ74dfqe4oHXNNxpT5Mc1Bujnjg

1. 历史前景

自主可控:鸿蒙代表了自研操作系统的崛起
分布式生态:基于鸿蒙自下而上的应用生态,多终端构造的体验和消费场景的迁移

鸿蒙HarmonyOS,开发代号 Ark):

正式名称为华为终端鸿蒙智能设备操作系统软件是华为自 2012 年以来开发的一款分布式操作系统

该系统利用“分布式”技术,将手机、电脑、平板、电视、汽车和智能穿戴等多款设备融合成一个“超级终端”,使用户便于操作和共享各种设备的资源。

发布时间线:

2019 年 8 月正式发布了 HarmonyOS。

2020 年 12 月 16 日,华为发布 HarmonyOS 2 手机开发者版本,次年 6 月 2 日,华为举行发布会正式发布鸿蒙操作系统 2.0,及公布搭载该系统的多款新产品,包括华为智能手机、平板电脑和智能手表,同时向现有用户分阶段推送系统更新。

2022 年 7 月 27 日,华为 HarmonyOS 3 正式发布。

2023 年 8 月 4 日,华为 HarmonyOS 4 正式发布。同时公开了 HarmonyOS NEXT 的开发者预览版。

鸿蒙分层架构:

[图片上传失败...(image-a2cee2-1701587571079)]

分布式生态:手机、手表、平板、汽车

[图片上传失败...(image-a820fc-1701587571079)]

2. 语法特性

鸿蒙开发最早支持 Java 开发,后续鸿蒙 3.0 版本之后中逐渐废弃 Java,而是主推两种范式:

[图片上传失败...(image-21fe1b-1701587571079)]

2.1 页面组件

声明式的写法,只需要关注页面的构成,无需关注 Measure layout draw,其实现在系统 native 源码中

下面是以 ArtTs 的范式来书写一个 列表页布局的代码片段,类 Jetpack 中 compose 组件声明式的 UI 范式:

@Component
export struct FeedList {
 private data: FeedDataSource = new FeedDataSource()
 private flavor: Flavor

 build() {
   Scroll() {
     List() {
       LazyForEach(this.data, (item: Cell, index: number) => {
         ListItem() {
           this.buildCard(item)
         }
         .width('95%')
         .margin({ top: 16, left: 10, bottom: 10 })
       })
     }
     .cachedCount(3)
     .lanes(this.flavor.lanes)
     .width('100%')
     .height('100%')
     .divider({ strokeWidth: 0.2, color: '#d6d6d6' })

   }.backgroundColor(Color.White)
 }

组件的布局方式中 component 的 build 方法中组织,build 方法决定了渲染组件的构成,还有一大特点是响应式的布局思想:

@Entry
@Component
struct MyComponent {
  @State isVisible: boolean = true;

  build() {
    Column() {
      Button("显隐切换")
        .onClick(() => {
          this.isVisible = !this.isVisible
        })
      if (this.isVisible) {
        Row()
          .width(300).height(300).backgroundColor(Color.Pink)
      }
    }.width('100%')
  }
}

[图片上传失败...(image-d91793-1701587571079)]

这里点击切换可见性的按钮后,会修改 @State 注解修饰的变量,值得注意的是,组件 buid() 方法中,是根据这个变量来选择性渲染 Row 组件的,布局代码这样的写法就可以实现点击按钮控制可见性了

类 databinding 的思想,这种响应式的特性中 ArkTs 中支持较好:

定义了大量的 关键字 来维护页面的状态,其中有父子组件,单向绑定的,有双向绑定的;

[图片上传失败...(image-348b97-1701587571079)]

至于 ArkTs 语言:

[图片上传失败...(image-35bf33-1701587571079)]

2.2 语法相关

下面是几个 TypeScript 代码片段,方便更好感受语法特点:

联合类型(Union Types)可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值:

var val:string|number 
val = 12 
console.log("数字为 "val) 
val = "Runoob" 
console.log("字符串为 "val)

类:

class Car { 
   // 字段
   engine:string; 

   // 构造函数
   constructor(engine:string) { 
      this.engine = engine 
   }  

   // 方法
   disp():void { 
      console.log("函数中显示发动机型号  :   "+this.engine) 
   } 
} 

// 创建一个对象
var obj = new Car("XXSY1")

// 访问字段
console.log("读取发动机型号 :  "+obj.engine)  

// 访问方法
obj.disp()

接口:

interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 

var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 

2.3 UI 组件

UI 组件: Text、Image、Button、List、Radio、Toggle、Tabs、Progress、Video ...

布局:Row、Column、Stack、Flex:

[图片上传失败...(image-8d6fc0-1701587571079)]

3. 业务实践

基于浏览器基本 UI 特征,熟悉 ArkTs 语法,方便快速上手鸿蒙开发

简易代码实践:https://github.com/gongshijier/harmonyLab

基本组件:

[图片上传失败...(image-9037-1701587571079)]

[图片上传失败...(image-e242e8-1701587571079)]

4. 架构简析

鸿蒙系统源码简析,理解整体系统架构和相关概念

后续内容基于: OpenHarmony-v4.0-Release 版本源码中截取较多 markdown 文档中的内容辅助理解:

完整的系统源码目录:

[图片上传失败...(image-ca24b-1701587571079)]

其中核心模块比如: arkui graphic window 等模块中 foundation 目录下:

[图片上传失败...(image-8a14b4-1701587571079)]

整体架构:

[图片上传失败...(image-40f4b3-1701587571079)]

4.1 ArkCompiler 和 ArkRuntime

文档: https://gitee.com/openharmony/docs/blob/master/zh-cn/readme/ARK-Runtime-Subsystem-zh.md

ArkCompiler:

[图片上传失败...(image-8fd343-1701587571079)]

ArkRuntime:

[图片上传失败...(image-785f3a-1701587571079)]

[图片上传失败...(image-788c41-1701587571079)]

4.2 启动流程

init:

[图片上传失败...(image-677e58-1701587571078)]

应用启动流程:

[图片上传失败...(image-8b0238-1701587571078)]

4.3 ArkUI

ArkTs 中只涉及:UI 树的构建,不涉及 measure layout draw 以及 invalidate requestlayout 相关

核心 UI 绘制 pipeline:在 ArkUI engine 中实现,架构导致缺乏 UI 开发的拓展能力,上限比较低

[图片上传失败...(image-a20e53-1701587571078)]

4.4 graphic

ArkTs -- JsBridge -- UINode -- MeasureLayoutRender -- Surface -- WMS

[图片上传失败...(image-67bcbb-1701587571078)]

[图片上传失败...(image-96925-1701587571078)]

4.5 window

Surface 合成和消费

[图片上传失败...(image-ce1835-1701587571078)]

window:

[图片上传失败...(image-5a367d-1701587571078)]

window manager:

[图片上传失败...(image-629b84-1701587571078)]

5. 工程架构

鸿蒙项目的目录架构解析

工程架构目录:

[图片上传失败...(image-ae49d7-1701587571078)]

6. 问题和思考

[图片上传失败...(image-86cd6e-1701587571078)]

官方增加一个 JS 组件的 codeReview : https://gitee.com/theretherehuh/ace_ace_engine/pulls/1/files

7. 引用

https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-components-summary-0000001478181369-V3

https://gitee.com/openharmony

https://www.seaxiang.com/blog/8c467ecc0f4846b69bb47db0dba94d2a

https://gitee.com/openharmony/docs/blob/master/zh-cn/release-notes/OpenHarmony-v4.0-release.md

https://gitee.com/link?target=https%3A%2F%2Frepo.huaweicloud.com%2Fopenharmony%2Fos%2F4.0-Release%2Fcode-v4.0-Release.tar.gz

https://blog.csdn.net/qq_41406404/article/details/131590595

上一篇 下一篇

猜你喜欢

热点阅读