房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI) 原创 精华

Der_带鱼
发布于 2022-2-1 10:05
浏览
3收藏

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

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

Start Time: 29 January,2022

Author: Hairtail

Location: Gao Xing

引言

学习视频为:

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

一、方舟开发框架(Ark UI)概述及开发实战

(一)HarmonyOS UI框架

房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区

(二)编程思想上的对比

房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区

Web应用具象化:(1.代码量少了 2.不需要手动绑定)

房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区

HarmonyOS开发具象化:

房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区

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

(三)三种方式编写新闻客户端的对比

房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark 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
    • 房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区
    • (2)对NewsListItem进行循环的遍历(ForEach)
    • 房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区
  • 扩展)eTS函数式调用:将手写板复用到新闻页面上

    • 1.用eTS写一个手写板只需要30行代码
    • 2.复用到新闻页面上(只需修改三行代码)
    • 房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区

(四)分布式特性、一次开发多端部署

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

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

(一)HarmonyOS的文档

1.方舟开发框架概述

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

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

  • 主要能力:

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

  • 房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区

  • 框架结构:

  • 房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区

  • 注意:

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

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

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

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

  • 基础能力:
    • 开箱即用的组件:框架提供丰富的系统预置组件
    • 丰富的动效接口:提供svg标准的绘制图形能力,同时开放了丰富的动效接口
    • 状态与数据管理:通过功能不同的装饰器提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态应用程序状态
    • 系统能力接口:封装了丰富的系统能力接口
  • 整体架构:
    • 渲染引擎:提供了高效的绘制能力,将渲染管线收集的渲染指令,绘制到屏幕能力
    • 平台适配层:提供了对系统平台的抽象接口,具备接入不同系统的能力,如系统渲染管线生命周期调度
    • 房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区

(二)OpenHarmony的文档

  • 关于语言运行时子系统:提供了JS、C/C++语言程序的编译、执行环境,提供支撑运行时的基础库,以及关联的API接口、编译器和配套工具
  • 房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区

房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区

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

    • 房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区
  • 值得注意的是: 方舟运行时子系统

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

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

    • JS运行时的架构:

    • 房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区

    • 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++语言外部函数接口。

图(见附件)

房宿-基于HarmonyOS技术训练营学习方舟开发框架(Ark UI)-鸿蒙开发者社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
ArkUI开发范式对比Xmind图.zip 69.44K 36次下载
已于2022-2-1 10:05:31修改
4
收藏 3
回复
举报
回复
    相关推荐