房宿-基于HarmonyOS技术训练营学习方舟开发框架（Ark UI）

春节不停更，此文正在参加「星光计划-春节更帖活动」

Start Time: 29 January,2022

Author: Hairtail

Location: Gao Xing

引言

学习视频为：

1.HarmonyOS技术训练营-方舟开发框架（Ark UI）概述及开发实战

一、方舟开发框架（Ark UI）概述及开发实战

（一）HarmonyOS UI框架

（二）编程思想上的对比

Web应用具象化：（1.代码量少了 2.不需要手动绑定）

HarmonyOS开发具象化：

• Java命令式UI：
  • （组件树遍历）findComponentById 涉及树的遍历，如果页面非常复杂，频繁调用findComponentById非常消耗性能。
  • （手动刷新）手动执行setText方法对页面进行操作，对程序员不友好，代码不简洁
• JS响应式UI：
  • （数据驱动视图）UI的更新由隐藏机制来负责维护UI的刷新，UI与数据有映射关系，数据变化页面也会变化
• ETS声明式UI：
  • （数据驱动视图）
  • （极简&自然语语义）采用自然语语义编程方式，实现极简高效开发

（三）三种方式编写新闻客户端的对比

• 代码分析（Java）：

  • 1.Text组件
  • 2.ListContainer组件（ListContainer组件的使用时是非常复杂的
    • （1）在layout目录下，AbilitySlice对应的布局文件page_listcontainer.xml文件中创建ListContainer
    • （2）在layout目录下新建xml文件（例：item_sample.xml），作为ListContainer的子布局
    • （3）创建SampleItem.java，作为ListContainer的数据包装类
    • （4）ListContainer每一行可以为不同的数据，因此需要适配不同的数据结构，使其都能添加到ListContainer上。创建SampleItemProvider.java，继承自BaseItemProvider。
    • （5）在Java代码中添加ListContainer的数据，并适配其数据结构
    • （6）listContainer在sampleItemProvider 初始化后修改数据

• 代码分析（JS）：

  • HML：list-> list-item（包含：images、text），并for=“{{news in newsList}}”
  • CSS: 写样式
  • JS中写业务逻辑：对data：{newsList：newsData}，实现响应式

• 代码分析（eTS）：（类似函数式的编程）

  • （1）Text、Image、Divider组成了NewsListItem
  • 
  • （2）对NewsListItem进行循环的遍历（ForEach）
  • 

• （扩展）eTS函数式调用：将手写板复用到新闻页面上

  • 1.用eTS写一个手写板只需要30行代码
  • 2.复用到新闻页面上（只需修改三行代码）
  • 

（四）分布式特性、一次开发多端部署

• 目前有哪些端：
  • 手机（含折叠）、平板（横竖屏）、手表、智慧屏、OpenHarmony开发板（主流）
  • 跨设备分布式流转：阔以在HarmonyOS设备之间

二、根据Harmony文档学习简单学习 ArkIO

（一）HarmonyOS的文档

1.方舟开发框架概述

• 组件：组件是界面搭建与显示的最小单位
• 页面：page页面是方舟开发框架最小的调度分割单位

开发者可以将应用设计为多个功能页面，每个页面进行单独的文件管理，并通过路由API实现页面的调度管理，以实现应用内功能的解耦

• 主要能力：

  • 多态组件：在不同平台上的样式适配
  • 布局计算：原子布局能力
  • 动画能力：内置动画效果、属性动画、转场动画和自定义动画能力
  • UI交互：默认适配了触摸手势、遥控器、鼠标等输入操作，同时也提供事件通知能力
  • 绘制：支持图形绘制、颜色填充、文本绘制、图片绘制
  • 平台API通道：提供了API扩展机制，提供风格统一的JS接口

• 开发范式对比：

• 

• 框架结构：

• 

• 注意：

  • 类Web开发范式与声明式开发范式的UI后端引擎和语言运行时是共用的
  • UI后端引擎实现了方舟开发框架的六种基本能力
  • 声明式开发范式无需JS Framework进行页面DOM管理

2.基于JS扩展的类Web开发范式概述

• 基础能力：
  • 类Web范式编程（页面业务逻辑则支持ECMAScript规范
  • 跨设备（自动映射到不同设备类型）
  • 高性能（针对声明式语法进行了渲染流程的优化）
• 整体架构：
  • 应用层-前端框架层-引擎层-平台适应层
    • 应用层：JS FA应用
    • 前端框架层：前端页面解析，提供MVVM开发模式、页面路由机制和自定义组件等能力
    • 引擎层：动画解析、DOM树构建、布局计算、渲染命令构建与绘制、事件管理等能力
    • 平台适配层：完成对平台层进行抽象，提供抽象接口，可以对接到系统平台
  • 

3.基于TS扩展的声明式开发范式概述

• 基础能力：
  • 开箱即用的组件：框架提供丰富的系统预置组件
  • 丰富的动效接口：提供svg标准的绘制图形能力，同时开放了丰富的动效接口
  • 状态与数据管理：通过功能不同的装饰器提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态
  • 系统能力接口：封装了丰富的系统能力接口
• 整体架构：
  • 渲染引擎：提供了高效的绘制能力，将渲染管线收集的渲染指令，绘制到屏幕能力
  • 平台适配层：提供了对系统平台的抽象接口，具备接入不同系统的能力，如系统渲染管线、生命周期调度等
  • 

（二）OpenHarmony的文档

• 关于语言运行时子系统：提供了JS、C/C++语言程序的编译、执行环境，提供支撑运行时的基础库，以及关联的API接口、编译器和配套工具
• 

• JS-UI子系统-跟HarmonyOS的文档大相径庭

  • 

• 值得注意的是： 方舟运行时子系统

  • 方舟(ARK)：华为自研的统一编程平台

  • 本次开源（3.1Beta）的ARK-JS提供的能力是在OpenHarmony标准系统(standard system)中编译和运行JavaScript语言

  • JS运行时的架构：

  • 

  • Core Runtime

    Core Runtime主要由语言无关的基础运行库组成，包括承载字节码的ARK File组件、支持Debugger的Tooling组件、负责对应系统调用的ARK Base组件等。

  • Execution Engine

    执行引擎目前包含执行字节码的解释器、缓存隐藏类和内联缓存、以及剖析记录运行时类型的Profiler。

  • ECMAScript Runtime

    ECMAScript Runtime则包含了各种JS对象的分配器、垃圾回收器、以及用以支撑ECMAScript规范的内部运行库。

  • AFFI (ARK Foreign Function Interface)

    AFFI是ARK JS运行时的C++语言外部函数接口。

图(见附件）