当前位置: 首页 > news >正文

第五天 初步了解ArkTS和ArkUI

初步了解ArkTS和ArkUI,可以从以下几个方面进行概述:

一、ArkTS简介

  1. 定义与关系

    • ArkTS是HarmonyOS(鸿蒙系统)优选的主力应用开发语言。
    • 它基于TypeScript(TS)进行扩展,兼容TS的所有特性,并增加了声明式UI、状态管理等能力,是TS的超集。
  2. 核心特性

    • 声明式UI:ArkTS通过声明式的方式描述UI结构,使开发者能够更简洁、更自然地开发跨端应用。
    • 状态管理:提供了多维度的状态管理机制,支持在组件内、组件间以及全局范围内传递和更新状态。
    • 渲染控制:包括条件渲染、循环渲染和数据懒加载等能力,根据应用状态或数据源动态地渲染UI内容。
  3. 开发范式

    • ArkTS主要采用声明式开发范式,这种范式更接近自然语义的编程方式,有助于提高开发效率和应用性能。

二、ArkUI简介

  1. 定义与功能

    • ArkUI是HarmonyOS应用的UI开发框架,提供了完整的UI开发基础设施。
    • 它包括简洁的UI语法、丰富的UI功能(如组件、布局、动画以及交互事件)以及实时界面预览工具等。
  2. 组件与布局

    • 组件:UI构建与显示的最小单位,ArkUI内置了丰富的多态组件,如Image、Text、Button等,并支持用户自定义组件。
    • 布局:ArkUI提供了多种布局方式,包括弹性布局、列表布局、宫格布局、栅格布局和原子布局等,以满足不同分辨率和设备的适配需求。
  3. 动画与交互

    • 动画:ArkUI支持属性动画、转场动画和自定义动画能力,为UI界面增添动态效果。
    • 交互事件:提供了多种交互能力,默认适配触摸手势、遥控器按键输入、键鼠输入等,并提供了相应的事件回调以便开发者添加交互逻辑。
  4. 开发范式

    • ArkUI针对不同的应用场景和技术背景的开发者提供了两种开发范式:
      • 声明式开发范式:基于ArkTS语言,更适合构建复杂和动态的UI界面。
      • 类Web开发范式:采用经典的HML、CSS、JavaScript三段式开发方式,更符合Web前端开发者的使用习惯。

综上所述,ArkTS和ArkUI共同构成了HarmonyOS应用开发的强大工具链。ArkTS作为应用开发语言,提供了声明式UI描述、状态管理和渲染控制等核心特性;而ArkUI作为UI开发框架,则提供了丰富的组件、布局、动画和交互事件等功能。两者相辅相成,共同助力开发者高效、简洁地开发跨端应用。

示例:简单的Hello World应用

1. 使用ArkTS进行声明式开发

首先,我们创建一个ArkTS文件(例如App.arkts),这个文件将包含我们的应用逻辑和UI描述。

// App.arkts
import { Component, defineComponent } from '@arkui/core';@Component
struct HelloWorld {@State message: string = 'Hello, World!';build() {Column() {Text(this.message).fontSize(24).fontWeight('bold').textAlign('center').margin({ top: '20vp' });}.backgroundColor('#FFFFFF').justifyContent('center').alignItems('center').height('100vh');}
}export default defineComponent(HelloWorld);

在这个示例中,我们定义了一个名为HelloWorld的组件。它包含一个状态message,初始值为'Hello, World!'。在build方法中,我们使用Column布局容器和Text组件来显示这个消息。Column容器设置了背景颜色、居中对齐和占满视口高度的样式。

2. 配置入口文件(可选)

在某些情况下,你可能需要配置一个入口文件来指定你的应用从哪个组件开始渲染。在HarmonyOS中,这通常是通过一个配置文件来完成的(例如index.jsonconfig.json),但在这里我们假设DevEco Studio已经为你处理了这些配置,并且App.arkts是我们的入口组件。

3. 运行应用

在DevEco Studio中,你可以直接运行这个应用。它将启动一个模拟器或连接到真实设备,并在屏幕上显示“Hello, World!”消息。

注意事项
  • 这个示例代码是基于概念性的,实际的ArkTS和ArkUI API可能会有所不同。
  • 在真实的开发环境中,你需要确保已经正确安装了DevEco Studio和HarmonyOS SDK。
  • 你可能还需要配置一些额外的项目设置,如依赖项、签名证书等。
  • 由于ArkTS是TypeScript的超集,它兼容TypeScript的所有语法和特性,因此你可以使用TypeScript的所有高级功能来编写你的应用。

类Web开发范式示例(可选)

如果你更喜欢使用类Web的开发范式,你可以使用HML(Harmony Markup Language)、CSS和JavaScript来构建你的应用。以下是一个简单的示例:

<!-- index.hml -->
<div class="container"><text class="message">{{message}}</text>
</div>
/* index.css */
.container {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #FFFFFF;
}.message {font-size: 24px;font-weight: bold;text-align: center;margin-top: 20vp;
}
// index.js
export default {data: {message: 'Hello, World!'}
}

在这个类Web开发范式的示例中,我们使用了HML来描述UI结构,CSS来设置样式,JavaScript来管理数据。然而,请注意,在HarmonyOS的实际开发中,你可能需要使用特定的框架或库(如ArkUI的类Web部分)来支持这种开发方式,并且API可能会有所不同。此外,随着HarmonyOS的发展,推荐的开发范式可能会发生变化,因此建议查阅最新的官方文档来获取最准确的信息。

相关文章:

第五天 初步了解ArkTS和ArkUI

初步了解ArkTS和ArkUI&#xff0c;可以从以下几个方面进行概述&#xff1a; 一、ArkTS简介 定义与关系&#xff1a; ArkTS是HarmonyOS&#xff08;鸿蒙系统&#xff09;优选的主力应用开发语言。它基于TypeScript&#xff08;TS&#xff09;进行扩展&#xff0c;兼容TS的所有特…...

java中的锁面试题

1、多线程中 synchronized 锁升级的原理是什么&#xff1f; synchronized 是JVM层面的锁&#xff0c;是 Java 关键字&#xff0c;通过 monitor 对象来完成&#xff0c;synchronized 的实现涉及到锁的升级&#xff0c;具体为无锁、偏向锁、自旋锁、重量级锁 synchronized 锁升级…...

ES6 变量解构赋值总结

1. 数组的解构赋值 1.1 基本用法 // 基本数组解构 const [a, b, c] [1, 2, 3]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3// 跳过某些值 const [x, , y] [1, 2, 3]; console.log(x); // 1 console.log(y); // 3// 解构剩余元素 const [first, ...re…...

知识蒸馏教程 Knowledge Distillation Tutorial

来自于&#xff1a;Knowledge Distillation Tutorial 将大模型蒸馏为小模型&#xff0c;可以节省计算资源&#xff0c;加快推理过程&#xff0c;更高效的运行。 使用CIFAR-10数据集 import torch import torch.nn as nn import torch.optim as optim import torchvision.tran…...

DeepSeek各版本说明与优缺点分析

DeepSeek各版本说明与优缺点分析 DeepSeek是最近人工智能领域备受瞩目的一个语言模型系列&#xff0c;其在不同版本的发布过程中&#xff0c;逐步加强了对多种任务的处理能力。本文将详细介绍DeepSeek的各版本&#xff0c;从版本的发布时间、特点、优势以及不足之处&#xff0…...

java进阶专栏的学习指南

学习指南 java类和对象java内部类和常用类javaIO流 java类和对象 类和对象 java内部类和常用类 java内部类精讲Object类包装类的认识String类、BigDecimal类初探Date类、Calendar类、SimpleDateFormat类的认识java Random类、File类、System类初识 javaIO流 java IO流【…...

kamailio-osp模块

该文档详细讲解了如何在Kamailio中配置和使用OSP模块&#xff08;Open Settlement Protocol Module&#xff09;&#xff0c;以实现基于ETSI标准的安全多边对等互联&#xff08;Secure Multi-Lateral Peering&#xff09;。以下是核心内容的总结&#xff1a; 1. 模块功能 OSP模…...

【TensorFlow】T1:实现mnist手写数字识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 1、设置GPU import tensorflow as tf gpus tf.config.list_physical_devices("GPU")if gpus:gpu0 gpus[0]tf.config.experimental.set_memory_g…...

Rapidjson 实战

Rapidjson 是一款 C 的 json 库. 支持处理 json 格式的文档. 其设计风格是头文件库, 包含头文件即可使用, 小巧轻便并且性能强悍. 本文结合样例来介绍 Rapidjson 一些常见的用法. 环境要求 有如何的几种方法可以将 Rapidjson 集成到您的项目中. Vcpkg安装: 使用 vcpkg instal…...

【React】受控组件和非受控组件

目录 受控组件非受控组件基于ref获取DOM元素1、在标签中使用2、在组件中使用 受控组件 表单元素的状态&#xff08;值&#xff09;由 React 组件的 state 完全控制。组件的 state 保存了表单元素的值&#xff0c;并且每次用户输入时&#xff0c;React 通过事件处理程序来更新 …...

Ollama+deepseek+Docker+Open WebUI实现与AI聊天

1、下载并安装Ollama 官方网址&#xff1a;Ollama 安装好后&#xff0c;在命令行输入&#xff0c; ollama --version 返回以下信息&#xff0c;则表明安装成功&#xff0c; 2、 下载AI大模型 这里以deepseek-r1:1.5b模型为例&#xff0c; 在命令行中&#xff0c;执行&…...

DEEPSEKK GPT等AI体的出现如何重构工厂数字化架构:从设备控制到ERP MES系统的全面优化

随着深度学习&#xff08;DeepSeek&#xff09;、GPT等先进AI技术的出现&#xff0c;工厂的数字化架构正在经历前所未有的变革。AI的强大处理能力、预测能力和自动化决策支持&#xff0c;将大幅度提升生产效率、设备管理、资源调度以及产品质量管理。本文将探讨AI体&#xff08…...

阿莱(arri)mxf文件变0字节的恢复方法

阿莱(arri)是专业级的影视产品软硬件供应商&#xff0c;很多影视作品都是使用阿莱(arri)的设备拍摄出来的。总体上来讲阿莱(arri)的文件格式有mov和mxf两种&#xff0c;这次恢复的是阿莱(arri)的mxf&#xff0c;机型是arri mini,素材保存在一个8t的硬盘上&#xff0c;使用的是e…...

初识 Node.js

在当今快速发展的互联网技术领域&#xff0c;Node.js 已经成为了一个非常流行且强大的平台。无论是构建高性能的网络应用、实时协作工具还是微服务架构&#xff0c;Node.js 都展示了其独特的优势。本文将带您走进 Node.js 的世界&#xff0c;了解它的基本概念、核心特性以及如何…...

debug-vscode调试方法

debug - vscode gdb调试指南 文章目录 debug - vscode gdb调试指南前言一、调试代码二、命令查看main反汇编查看寄存器打印某个变量打印寄存器&#xff0c;如pc打印当前函数栈信息&#xff08;当前执行位置&#xff09;打印程序栈局部变量x命令的语法如下所示&#xff1a;打印某…...

Cypher进阶(函数、索引)

文章目录 Cypher进阶Aggregationcount()函数统计函数collect()函数 unwindforeachmergeunionload csvcall 函数断言函数all()any()~~exists()~~is not nullnone()single() 标量函数coalesce()startNode()/endNode()id()length()size() 列表函数nodes()keys()range()reduce() 数…...

XML Schema 数值数据类型

XML Schema 数值数据类型 引言 XML Schema 是一种用于描述 XML 文档结构的语言。它定义了 XML 文档中数据的有效性和结构。在 XML Schema 中,数值数据类型是非常重要的一部分,它定义了 XML 文档中可以包含的数值类型。本文将详细介绍 XML Schema 中常用的数值数据类型,以及…...

Window获取界面空闲时间

‌GetLastInputInfo‌是一种Windows API函数&#xff0c;用于获取上次输入操作的时间。 该函数通过LASTINPUTINFO结构返回最后一次输入事件的时间。 原型如下 BOOL WINAPI GetLastInputInfo(PLASTINPUTINFO plii);那么可以利用GetLastInputInfo来得到界面没有操作的时长 uint…...

Java进阶(vue基础)

目录 1.vue简单入门 ?1.1.创建一个vue程序 1.2.使用Component模板(组件&#xff09; 1.3.引入AXOIS ?1.4.vue的Methods&#xff08;方法&#xff09; 和?compoted&#xff08;计算&#xff09; 1.5.插槽slot 1.6.创建自定义事件? 2.Vue脚手架安装? 3.Element-UI的…...

Mac电脑上好用的压缩软件

在Mac电脑上&#xff0c;有许多优秀的压缩软件可供选择&#xff0c;这些软件不仅支持多种压缩格式&#xff0c;还提供了便捷的操作体验和强大的功能。以下是几款被广泛推荐的压缩软件&#xff1a; BetterZip 功能特点&#xff1a;BetterZip 是一款功能强大的压缩和解压缩工具&a…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...