鸿蒙开发快速入门

基本概念

ArkTS

因为ArkTS是基于Type Script扩展而来，是Type Script的超集，所以也可以关注一下Type Script的语法来理解ArkTS的语法

ArkUI

HarmonyOS提供了一套UI开发框架，即方舟开发框架（ArkUI框架）。方舟开发框架可为开发者提供应用UI开发所必需的能力，比如多种组件、布局计算、动画能力、UI交互、绘制等。

开发范式

方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式

  • 基于ArkTS的声明式开发范式（简称“声明式开发范式”）
  • 兼容JS的类Web开发范式（简称“类Web开发范式”）。以下是两种开发范式的简单对比。

开发范式名称

语言生态

UI更新方式

适用场景

适用人群

声明式开发范式

ArkTS语言

数据驱动更新

复杂度较大、团队合作度较高的程序

移动系统应用开发人员、系统应用开发人员

类Web开发范式

JS语言

数据驱动更新

界面较为简单的程序应用和卡片

Web前端开发人员

总结：Flutter、SwiftUI等新的UI框架用的都是声明式开发范式；oc/swift/java/kotlin传统的UI框架用的是命令式开发范式。

应用模型

概念

应用模型是HarmonyOS为开发者提供的应用程序所需能力的抽象提炼，它提供了应用程序必备的组件和运行机制。有了应用模型，开发者可以基于一套统一的模型进行应用开发，使应用开发更简单、高效。请见应用模型的构成要素。

随着系统的演进发展，HarmonyOS先后提供了两种应用模型：

  • FA（Feature Ability）模型： HarmonyOS API 7开始支持的模型，已经不再主推。FA模型开发可见FA模型开发概述。
  • Stage模型： HarmonyOS API 9开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型。Stage模型开发可见Stage模型开发概述。

FA模型和Stage模型的整体架构和设计思想等更多区别，请见应用模型解读。

快速入门提供了一个含有两个页面的开发实例，并使用了不同的开发语言或不同的应用模型进行开发，以便开发者理解以上基本概念及应用开发流程。

说明：我们用的是基于ArkTS声明式开发范式，和Stage模型架构。

构建第一个ArkTS应用（Stage模型）

文档中心

应用程序包基础知识

了解应用程序包基础知识，对于理解工程结构、编译构建、模块化等有帮助。

华为官方参考文档：文档中心

Stage模型应用程序包结构

文档中心

多HAP构建视图

文档中心

共享包概述

HAP，HAR静态共享包（构建多份嵌入到各个HAP），HSP动态共享包（只构建一份）

文档中心

语言入门

Type Script 基础教程

因为ArkTS是基于Type Script扩展而来，是Type Script的超集，所以也可以关注一下Type Script的语法来理解ArkTS的语法

Type Script官方教程：TypeScript 教程 | 菜鸟教程
主要关注点：
1.基础语法，编译产物

2.基础数据类型

3.变量声明

4.联合类型

5.接口，类

6.命名空间

ArkTS 特性约束：

文档中心

  1. 强制使用静态类型，不支持any类型
  2. 显式初始化类的属性

ts：

class Person {name: string // undefinedsetName(n: string): void {this.name = n}getName(): string {// 开发者使用"string"作为返回类型，这隐藏了name可能为"undefined"的事实。// 更合适的做法是将返回类型标注为"string | undefined"，以告诉开发者这个API所有可能的返回值的类型。return this.name}
}let buddy = new Person()
// 假设代码中没有对name的赋值，例如没有调用"buddy.setName('John')"
console.log(buddy.getName().length); // 运行时异常：name is undefined

arkts:

class Person {name: string = ''// name?: string 可以为undefinedsetName(n: string): void {this.name = n}// 类型为"string"，不可能为"null"或者"undefined"getName(): string {return this.name}
}let buddy = new Person()
// 假设代码中没有对name的赋值，例如没有调用"buddy.setName('John')"
console.log(buddy.getName().length); // 0, 没有运行时异常
  1. 允许.ets文件import.ets/.ts/.js文件源码, 不允许.ts/.js文件import.ets文件源码
  2. 禁止运行时改变对象类型
class Point {public x: number = 0public y: number = 0constructor(x: number, y: number) {this.x = xthis.y = y}
}// 无法从对象中删除某个属性，从而确保所有Point对象都具有属性x
let p1 = new Point(1.0, 1.0)
delete p1.x           // 在TypeScript和ArkTS中，都会产生编译时错误
delete (p1 as any).x  // 在TypeScript中不会报错；在ArkTS中会产生编译时错误// Point类没有定义命名为z的属性，在程序运行时也无法添加该属性
let p2 = new Point(2.0, 2.0)
p2.z = 'Label';           // 在TypeScript和ArkTS中，都会产生编译时错误
(p2 as any).z = 'Label'   // 在TypeScript中不会报错；在ArkTS中会产生编译时错误// 类的定义确保了所有Point对象只有属性x和y，并且无法被添加其他属性
let p3 = new Point(3.0, 3.0)
let prop = Symbol();     // 在TypeScript中不会报错；在ArkTS中会产生编译时错误
(p3 as any)[prop] = p3.x // 在TypeScript中不会报错；在ArkTS中会产生编译时错误
p3[prop] = p3.x          // 在TypeScript和ArkTS中，都会产生编译时错误// 类的定义确保了所有Point对象的属性x和y都具有number类型，因此，无法将其他类型的值赋值给它们
let p4 = new Point(4.0, 4.0)
p4.x = 'Hello!';         // 在TypeScript和ArkTS中，都会产生编译时错误
(p4 as any).x = 'Hello!' // 在TypeScript中不会报错；在ArkTS中会产生编译时错误// 使用符合类定义的Point对象：
function distance(p1: Point, p2: Point): number {return Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y))
}
let p5 = new Point(5.0, 5.0)
let p6 = new Point(6.0, 6.0)
console.log('Distance between p5 and p6: ' + distance(p5, p6))
  1. 使用let，不使用var。let关键字可以在块级作用域中声明变量，帮助程序员避免错误。因此，ArkTS不支持var，请使用let声明变量。
  2. ArkTS不支持any和unknown类型。显式指定具体类型。
  3. 使用箭头函数而非函数表达式

ts：

let f = function (s: string) {console.log(s)
}

arkts:

let f = (s: string) => {console.log(s)
}

ArkTS基础

ArkTS华为官方文档：文档中心

ArkTS语言，是TypeScript的超集

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力。

ArkUI基础

声明式UI

声明式UI：使用代码直接编写的UI组件，执行代码得到对应的渲染组件执行渲染。

命令式UI：首先需要解析XML内容，映射到对应的View再进行渲染。

  • 当前，ArkTS在TS基础上主要扩展了声明式UI能力，让开发者以更简洁、更自然的方式开发高性能应用。当前扩展的声明式UI包括如下特性。
    • 基本UI描述：ArkTS定义了各种装饰器、自定义组件、UI描述机制，再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了UI开发的主体。
    • 状态管理：ArkTS提供了多维度的状态管理机制，在UI开发框架中，和UI相关联的数据，不仅可以在组件内使用，还可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，也可以是全局范围内的传递，还可以是 跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。
    • 动态构建UI元素：ArkTS提供了动态构建UI元素的能力，不仅可以自定义组件内部的UI结构，还可复用组件样式，扩展原生组件。
    • 渲染控制：ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的部分内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。
    • 使用限制与扩展：ArkTS在使用过程中存在限制与约束，同时也扩展了双向绑定等能力。
  • 未来，ArkTS会结合应用开发/运行的需求持续演进，逐步提供并行和并发能力增强、类型系统增强、分布式开发范式等更多特性。
图解和代码示例

  • 装饰器： 用于装饰类、结构、方法以及变量，赋予其特殊的含义，如上述示例中@Entry、@Component和@State都是装饰器。 具体而言，@Component表示这是个自定义组件；@Entry则表示这是个入口组件；@State表示组件中的状态变量，这个状态变换会引起UI变更。
  • 自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。
  • UI描述：声明式的方法来描述UI的结构，例如build()方法中的代码块。
  • 内置组件：ArkTS中默认内置的基本组件和布局组件，开发者可以直接调用，如Column、Text、Divider、Button等。
  • 属性方法：用于组件属性的配置，如fontSize()、width()、height()、color()等，可通过链式调用的方式设置多项属性。
  • 事件方法：用于添加组件对事件的响应逻辑，统一通过事件方法进行设置，如跟随在Button后面的onClick()。

代码实例：

@Entry
@Component
struct Demo {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).onClick(()=>{//点击事件})}.width('100%')}.height('100%')}
}
  • struct：自定义组件可以基于struct实现，不能有继承关系，对于struct的实例化，可以省略new。
  • build函数：作为UI描述的入口。
  • 属性配置：width、 fontSize等。
  • 事件配置：onClick事件。

自己的思考🤔

创建组件

组件参数：必选，可选

链式调用属性

链式调用事件：箭头函数不需要bind(this), 其他方式需要

嵌套组件/子组件：与flutter不同的是，ArkTS中的Column/Row之内的都属于容器组件（可以设置背景色），flutter中属于布局组件（无法设置背景色等容器属性）。

自定义组件

考虑代码可复用性、业务逻辑与UI分离，后续版本演进

自定义组件具有以下特点：

  • 可组合：允许开发者组合使用系统组件、及其属性和方法。
  • 可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。
  • 数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新。

两个装饰器：@Component, @Builder

状态管理

文档中心

ArkTS提供了多维度的状态管理机制，在UI开发框架中，和UI相关联的数据，不仅可以在组件内使用，还可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，也可以是全局范围内的传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。

页面级状态管理

装饰器

装饰内容

说明

@State

基本数据类型，类，数组

修饰的状态数据被修改时会触发组件的build方法进行UI界面更新。

@Prop

基本数据类型

修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI。

@Link

基本数据类型，类，数组

父子组件之间的双向数据绑定，父组件的内部状态数据作为数据源，任何一方所做的修改都会反映给另一方。

@Observed

类

@Observed应用于类，表示该类中的数据变更被UI页面管理。

@ObjectLink

被@Observed所装饰类的对象

装饰的状态数据被修改时，在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会更新UI。

@Consume

基本数据类型，类，数组

@Consume装饰的变量在感知到@Provide装饰的变量更新后，会触发当前自定义组件的重新渲染。

@Provide

基本数据类型，类，数组

@Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。

应用级状态管理

AppStorage是整个UI应用程序状态的中心“数据库”，UI框架会针对应用程序创建单例AppStorage对象，并提供相应的装饰器和接口供应用程序使用。

    • @StorageLink：@StorageLink(name)的原理类似于@Consume(name)，不同的是，该给定名称的链接对象是从AppStorage中获得的，在UI组件和AppStorage之间建立双向绑定同步数据。
    • @StorageProp：@StorageProp(name)将UI组件属性与AppStorage进行单向同步，AppStorage中值的更改会更新组件中的属性，但UI组件无法更改AppStorage中的属性值。
    • AppStorage还提供用于业务逻辑实现的API，用于添加、读取、修改和删除应用程序的状态属性，此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。
    • PersistentStorage类提供了一些静态方法用来管理应用持久化数据，可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink装饰器来访问对应key的变量。
    • Environment是框架在应用程序启动时创建的单例对象，它为AppStorage提供了一系列应用程序需要的环境状态属性，这些属性描述了应用程序运行的设备环境。
渲染控制
  • 条件渲染：可以通过条件渲染控制组件的显示隐藏。
Column() {if (this.count < 0) {Text('count is negative').fontSize(14)} else if (this.count % 2 === 0) {Text('count is even').fontSize(14)} else {Text('count is odd').fontSize(14)}
}
  • 循环渲染：渲染列表数据。
ForEach(arr: any[], itemGenerator: (item: any, index?: number) => void,keyGenerator?: (item: any, index?: number) => string 
)
  • 数据懒加载：应用于list、gride等列表数据渲染，只渲染可是页面以及前后的item的预加载。
LazyForEach(dataSource: IDataSource,             itemGenerator: (item: any) => void,  keyGenerator?: (item: any) => string 
): void

异步并发(对标flutter的事件队列机制)

Promise -> Futrue

async/await -> async/await

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/815524.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【日常记录】【CSS】SASS循环的使用

【日常记录】【CSS】SASS循环的使用

文章目录 1、引言2、安装3、举例4、参考链接 1、引言 目前在任何项目框架中&#xff0c;都会有css 预处理器&#xff0c;目前一般使用 sass、less 这俩其中之一&#xff0c;它可以简化css的书写 Sass 是一款强化 CSS 的辅助工具&#xff0c;它在 CSS 语法的基础上增加了变量 (v…
阅读更多...
【深度学习实战（2）】如何使用matplotlib.pyplot模块记录自己的训练，验证损失

【深度学习实战（2）】如何使用matplotlib.pyplot模块记录自己的训练，验证损失

一、matplotlib库 在我们自己训练模型时&#xff0c;常常会使用matplotlib库来绘制oss和accuracy的曲线图&#xff0c;帮助我们分析模型的训练表现。 matplotlib库安装&#xff1a;pip install matplotlib 二、代码 import matplotlib.pyplot as plt import torch import to…
阅读更多...
设计模式-组合模式（Composite Pattern）

设计模式-组合模式（Composite Pattern）

1. 概念 组合模式是一种结构型设计模式&#xff0c;它允许将对象组合成树状的层次结构&#xff0c;用来表示“整体-部分”的关系。 2. 原理结构图 原理图 抽象角色&#xff08;Component&#xff09;&#xff1a;这是组合模式的核心&#xff0c;它定义了树叶和树枝构件的公…
阅读更多...
【产品经理修炼之道】- 融资租赁相关业务介绍

【产品经理修炼之道】- 融资租赁相关业务介绍

一、什么是融资租赁&#xff1f; 根据《民法典》第735条的规定&#xff0c;融资租赁合同是出租人根据承租人对出卖人、租赁物的选择&#xff0c;向出卖人购买租赁物&#xff0c;提供给承租人使用&#xff0c;承租人支付租金的合同。 例如&#xff0c;A工厂因业务发展需要欲购置…
阅读更多...
c/c++普通for循环学习

c/c++普通for循环学习

学习一下 for 循环的几种不同方式&#xff0c;了解一下原理及差异 完整的测试代码参考 GitHub &#xff1a;for 循环测试代码 1 常用形态 对于 for 循环来说&#xff0c;最常用的形态如下 for (表达式1; 表达式2; 表达式3) {// code }流程图如下&#xff1a; 编写测试代码…
阅读更多...
stack和queue模拟实现

stack和queue模拟实现

前言 上一期我们介绍了stack和queue的使用&#xff0c;本期我们来模拟实现一下他们&#xff01; 本期内容介绍 容器适配器 deque介绍 为什么stack和queue的底层选择deque为默认容器&#xff1f; stack 模拟现实 queue 模拟实现 什么是容器适配器&#xff1f; 适配器是一种设…
阅读更多...
springboot抑郁症科普知识测试系统ssm-java

springboot抑郁症科普知识测试系统ssm-java

本系统设计了二种角色&#xff1a;管理员&#xff0c;用户。通过此系统&#xff0c;管理员可以在线视频、案例展示、、测试试卷、测试试题进行测试。以及在线对测试试卷进行批阅和批量删除&#xff0c;用户可以对自己的测试试卷进行测试&#xff0c;对管理员已经批阅过的试卷可…
阅读更多...
MySQL——链表

MySQL——链表

主键&#xff1a;非空 唯一&#xff08;针对整列数据而言&#xff09; 为了方便管理一般主键都是设置为自增 外键&#xff1a;一张表中的一列的值是另一张表的主键&#xff0c;使用外键建立两张数据表的数据关系 一、两张表连接 将两张表格拼接成一个表 1、格式&#xff1a;s…
阅读更多...
NL2SQL实践系列(1)：深入解析Prompt工程在text2sql中的应用技巧

NL2SQL实践系列(1)：深入解析Prompt工程在text2sql中的应用技巧

NL2SQL实践系列(1)&#xff1a;深入解析Prompt工程在text2sql中的应用技巧 NL2SQL基础系列(1)&#xff1a;业界顶尖排行榜、权威测评数据集及LLM大模型&#xff08;Spider vs BIRD&#xff09;全面对比优劣分析[Text2SQL、Text2DSL] NL2SQL基础系列(2)&#xff1a;主流大模型…
阅读更多...
STK与matlab交互 Astrogator模块 （11）

STK与matlab交互 Astrogator模块 （11）

一、背景知识 前面由于定轨的大作业&#xff0c;关于Astrogator模块的学习有所滞后&#xff0c;在本节将重新聚焦Astrogator模块&#xff0c;在本节中&#xff0c;首先解决的问题是已知两个卫星的轨道六根数&#xff0c;求解其中某一颗卫星LVLH坐标下另一颗卫星的位置速度。这…
阅读更多...
AI实践与学习4_大模型之检索增强生成RAG实践

AI实践与学习4_大模型之检索增强生成RAG实践

背景 针对AI解题业务场景&#xff0c;靠着ToT、CoT等提示词规则去引导模型的输出答案&#xff0c;一定程度相比Zero-shot解答质量更高&#xff08;正确率、格式&#xff09;等。但是针对某些测试CASE&#xff0c;LLM仍然不能输出期望的正确结果&#xff0c;将AI解题应用生产仍…
阅读更多...
AcWing 796. 子矩阵的和——算法基础课题解

AcWing 796. 子矩阵的和——算法基础课题解

AcWing 796. 子矩阵的和 题目描述 输入一个 n 行 m 列的整数矩阵&#xff0c;再输入 q 个询问&#xff0c;每个询问包含四个整数 x1,y1,x2,y2&#xff0c;表示一个子矩阵的左上角坐标和右下角坐标。 对于每个询问输出子矩阵中所有数的和。 输入格式 第一行包含三个整数 n&…
阅读更多...
导航指令生成新篇章：将语义地图转化为机器人眼中的“道路”

导航指令生成新篇章：将语义地图转化为机器人眼中的“道路”

引言&#xff1a;导航指令生成的挑战与机遇 在人工智能领域&#xff0c;视觉与语言导航&#xff08;Vision and Language Navigation, VLN&#xff09;任务是一个充满挑战的研究领域&#xff0c;它要求智能体根据自然语言指令在物理环境中进行导航。然而&#xff0c;VLN任务的…
阅读更多...
《QT实用小工具·十九》回车跳转到不同的编辑框

《QT实用小工具·十九》回车跳转到不同的编辑框

1、概述 源码放在文章末尾 该项目实现通过回车键让光标从一个编辑框跳转到另一个编辑框&#xff0c;下面是demo演示&#xff1a; 项目部分代码如下&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget>namespace Ui { class Widget; }class Widget : p…
阅读更多...
使用SquareLine Studio创建LVGL项目到IMX6uLL平台

使用SquareLine Studio创建LVGL项目到IMX6uLL平台

文章目录 前言一、SquareLine Studio是什么&#xff1f;二、下载安装三、工程配置四、交叉编译 前言 遇到的问题&#xff1a;#error LV_COLOR_DEPTH should be 16bit to match SquareLine Studios settings&#xff0c;解决方法见# 四、交叉编译 一、SquareLine Studio是什么…
阅读更多...
appium driver install uiautomator2 安装失败

appium driver install uiautomator2 安装失败

报错 Installing ‘uiautomator2’ using NPM install spec ‘appium-uiautomator2-driver’ Error: Encountered an error when installing package: npm command ‘install --save-dev --no-progress --no-audit --omitpeer --save-exact --global-style --no-package-lock…
阅读更多...
汉语拼音中的轻声规则简直让人崩溃

汉语拼音中的轻声规则简直让人崩溃

找到方便和合适的与人教社教材中的拼音接近的字体本来就不容易&#xff0c;而准确高效地把短短一篇文字中的轻声全都标对&#xff0c;也是一件让人头大的事&#xff01;
阅读更多...
全国贫困县DID数据（2008-2022年）

全国贫困县DID数据（2008-2022年）

数据来源&#xff1a;国W院扶贫开发领导小组办公室 时间跨度&#xff1a;2008-2022年 数据范围&#xff1a;各县域 数据指标 年份 县域名称 所属地市 所属省份 县域代码 是否贫困县(是为1&#xff0c;否为0) 参考文献&#xff1a; [1]马雯嘉,吴茂祯.从全面脱贫到乡村振兴…
阅读更多...
【Qt 学习笔记】Qt控件概述

【Qt 学习笔记】Qt控件概述

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt控件概述 文章编号&#xff1a;Qt 学习笔记 / 14 文章目录 Qt控件概…
阅读更多...
什么是面向对象思想？

什么是面向对象思想？

面向对象不是一种技术&#xff0c;而是一种思想。它指导我们以什么形式组织代码&#xff0c;以什么思路解决问题。 面向对象编程&#xff0c;是一种通过对象方式&#xff0c;把现实世界映射到计算机世界的编程方法。 面向对象解决问题的思路&#xff1a;把构成问题的事物分解成…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023