初探鸿蒙:从概念到实践

一、鸿蒙开发的环境准备

  • 开发工具:使用 DevEco Studio,支持 ArkTS 语法。          
  • 系统要求:确保计算机符合 DevEco Studio 的最低系统需求。
  • 安装步骤:下载 DevEco Studio,安装合适的 SDK 和模拟器

二、鸿蒙应用可以用哪些语言进行开发 

  • ArkTS(方舟编程语言):这是HarmonyOS 3开始引入的一种全新语言,类似于TypeScript。它适合用于开发UI和应用逻辑,特别是在HarmonyOS应用和跨平台开发中具有很好的支持。

  • JavaScript:主要用于轻量级的应用开发,特别适合界面开发和简单的逻辑处理。HarmonyOS早期版本对JavaScript的支持较好。

  • Java:适合开发一些通用应用逻辑和业务逻辑,特别是移动设备相关的应用。HarmonyOS底层对Java有良好的支持,但最新版本推荐转向ArkTS。

  • C/C++:适合开发系统底层、驱动、性能要求高的组件以及跨平台应用逻辑。C/C++在HarmonyOS中用于高性能和底层开发,并且可以通过NDK(Native Development Kit)进行开发。

  • Kotlin:虽然Kotlin在鸿蒙中不是官方推荐的语言,但由于其与Java兼容,可以通过Java的方式间接使用。

  • Python、Rust等:虽然鸿蒙官方不直接支持这些语言,但可以通过绑定或其他中间层的方式进行集成,适合特定需求的项目。

其中ArkTS 是目前鸿蒙系统推荐的主要开发语言,ArkTS 基于 TypeScript,并在 HarmonyOS 上进行了定制和优化,方便开发者在鸿蒙系统的多设备和跨平台环境中使用。ArkTS 在设计上支持多种设备,包括手机、平板、智能家居、智能手表等。同时ArkTS 由鸿蒙的方舟编译器(Ark Compiler)进行编译,这种编译器可以将 ArkTS 代码直接编译成机器码而不是通过虚拟机运行,从而显著提升运行速度和性能 

三、ArkTS中常用的UI组件有哪些

1.Text - 文本组件  (用于显示静态文本内容,可以自定义字体大小、颜色、对齐方式等)

Text("Hello HarmonyOS").fontSize(20).fontColor('#333333').alignment('center');

2.Button - 按钮组件  (用于触发点击事件,支持样式自定义)

Button("Click Me").onClick(() => {console.log("Button clicked");}).width(200).height(50).backgroundColor('#007DFF');

3.TextInput - 文本输入框  (允许用户输入文本内容,可以设置占位符、最大长度等属性)

TextInput({ placeholder: 'Enter your name' }).fontSize(18).textColor('#000000').placeholderColor('#AAAAAA').onChange((value) => {console.log("User input:", value);});

4.Image - 图片组件  (用于显示图片,支持本地和网络图片路径)

Image($r('image.icon')).width(100).height(100).objectFit('cover');  // cover, contain, fill 等

5.List - 列表组件  (用于显示一系列相同结构的内容。通过 ForEach 动态渲染列表数据)

List({ space: 10 }) {ForEach([1, 2, 3, 4, 5], (item) => {Text(`Item: ${item}`).fontSize(16).margin(10);});
}

6.Toggle - 开关组件  (用于切换开启和关闭状态)

@Observed isToggled: boolean = false;Toggle({ value: this.isToggled }).onChange((newValue) => {this.isToggled = newValue;console.log("Toggle status:", newValue);});

7.Slider - 滑块组件  (用于选择一个范围值,比如音量、亮度等)

@Observed volume: number = 50;Slider({ value: this.volume, min: 0, max: 100 }).onChange((value) => {this.volume = value;console.log("Volume:", value);});

8.Progress - 进度条证件  (用于显示任务进度,例如下载进度、加载进度等)

Progress({ value: 0.7 }).color('#4CAF50').trackColor('#E0E0E0').strokeWidth(5);

9.Checkbox - 复选框组件  (用户可以选择或取消选择,适合多选的场景)

@Observed isChecked: boolean = false;Checkbox({ value: this.isChecked }).onChange((newValue) => {this.isChecked = newValue;console.log("Checkbox checked:", newValue);});

10.Radio - 单选按钮  (用于单项选择,常配合 RadioGroup 使用)

@Observed selectedValue: number = 1;RadioGroup({ value: this.selectedValue }).onChange((value) => {this.selectedValue = value;}) {Radio({ value: 1, label: 'Option 1' });Radio({ value: 2, label: 'Option 2' });Radio({ value: 3, label: 'Option 3' });
}

11.Grid - 网格布局  (用于创建多列布局的网格视图)

Grid({ columns: 3, space: 10 }) {ForEach([1, 2, 3, 4, 5, 6], (item) => {Text(`Item ${item}`).fontSize(16).backgroundColor('#E0E0E0').padding(10);});
}

12.ScrollView - 滚动视图  (用于容纳可滚动的内容,例如长列表、长文本)

ScrollView() {Column() {Text("Scrollable Content").fontSize(20).margin(10);// 其他长内容...}
}

13.Picker - 选择器  (适用于日期、时间等数据选择)

Picker({ range: ['Option 1', 'Option 2', 'Option 3'] }).onChange((value) => {console.log("Picker selected:", value);});

四、基础组件的使用

1.鸿蒙使用声明式语法创建 UI 组件,以下示例创建了一个文本组件和按钮组件

import { Component, Observed } from '@ohos/arkui';@Component
struct HelloWorld {@Observed count: number = 0;build() {Column() {Text(`Hello HarmonyOS! Current count: ${this.count}`).fontSize(20).fontColor('#333333').margin(20);Button("Click Me").onClick(() => {this.count += 1;}).width('80%').height(50).backgroundColor('#007DFF').margin(20);}}
}

2.使用 ArkTS 通过条件语句和循环来动态控制组件显示

build() {Column() {if (this.count > 5) {Text("Count is greater than 5!").fontSize(18).fontColor('#FF0000');}ForEach([1, 2, 3, 4, 5], (item) => {Text(`Item: ${item}`).fontSize(16);});}
}

3.函数定义和调用

@Entry
@Component
struct MyComponent {@State result: number = 0;// 定义一个函数,用于计算两个数字的和addNumbers(a: number, b: number): number {return a + b;}// 调用函数并更新状态onCalculate() {this.result = this.addNumbers(5, 10); // 调用 addNumbers 函数,传入参数 5 和 10}// 组件的界面布局build() {Column() {// 按钮用于触发计算Button("计算 5 + 10") {onClick: () => this.onCalculate()  // 调用 onCalculate 来更新 result}// 显示计算结果Text("计算结果: " + this.result).fontSize(20)}}
}

4.页面路由跳转

import { router } from '@kit.ArkUI'@Entry
@Component
struct MainPage {build() {Column() {Button('跳转到详情页').onClick(() => {// 跳转到 DetailPage 页面router.pushUrl({uri: 'pages/DetailPage' // 目标url});});}}
}/**
* 其他适用方法
*/// push page
router.pushUrl({ url:"pages/pageOne", params: null })// pop page
router.back({ url: "pages/pageOne" })// replace page
router.replaceUrl({ url: "pages/pageOne" })// clear all page
router.clear()// 获取页面栈大小
let size = router.getLength()// 获取页面状态
let pageState = router.getState()

5.发送http请求

import { http } from '@kit.NetworkKit'let httpRequest = http.createHttp(); // 每一个httpRequest对应一个HTTP请求任务,不可复用function sendPostRequest() {httpRequest.request({method: 'POST',url: 'https://jsonplaceholder.typicode.com/posts',header: {'Content-Type': 'application/json'},connectTimeout: 5000,readTimeout: 5000,extraData: postData // 设置 POST 请求的 body 数据}, (err, data) => {if (err) {console.error('请求失败:', err);return;}console.log('请求成功,返回数据:', data);})
}sendPostRequest()

 6.父子组件

// 父组件
import { ChildComponent } from './ChildComponent';@Entry
@Component
struct ParentComponent {private message: string = 'Hello from Parent';private handleChildClick() {this.message = '子组件按钮已点击!';console.log('子组件的按钮被点击了');}build() {Column() {Text('这是父组件').fontSize(20).margin({ bottom: 20 })// 嵌套子组件,并传递属性ChildComponent({message: this.message,onMessageClick: this.handleChildClick.bind(this)});}}
}
// 子组件@Component
struct ChildComponent {@Prop message: string;@Prop onMessageClick: () => void;build() {Column() {Text(this.message).fontSize(18).margin({ bottom: 10 })Button('点击我').onClick(() => {// 调用父组件传入的回调函数if (this.onMessageClick) {this.onMessageClick();}});}}
}

五、ArkTS 装饰器

ArkTS 中,装饰器(Decorator)是一种特殊的语法,用于给类、方法或属性添加特定的功能或行为。鸿蒙系统中的 ArkTS 装饰器提供了特定的标记,以便开发者快速定义页面结构、组件类型和状态管理等。

  • @Component:表示自定义组件。
  • @Entry:表示该自定义组件为入口组件。
  • @State:表示组件中的状态变量,状态变量变化会触发UI刷新。
  • @Prop:用于父子组件间的单向数据同步。
  • @Link:用于父子组件间的双向数据同步。
  • @Provide和@Consume:用于与后代组件双向同步。
  • @Observed和@ObjectLink:用于嵌套类对象属性变化时的双向数据同步。
  • @Builder和@BuilderParam:用于封装和复用UI描述。
  • @Styles:用于定义组件重用样式。
  • @Extend:用于扩展原生组件样式。

六、组件生命周期

自定义组件和页面之间的关系

  • 自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用,可以调用组件的生命周期。

  • 页面:即应用的UI页面。可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。

页面生命周期,即被@Entry装饰的组件生命周期,提供以下生命周期接口:

  • onPageShow:页面每次显示时触发一次,包括路由过程、应用进入前台等场景。

  • onPageHide:页面每次隐藏时触发一次,包括路由过程、应用进入后台等场景。

  • onBackPress:当用户点击返回按钮时触发。

组件生命周期,即一般用@Component装饰的自定义组件的生命周期,提供以下生命周期接口:

  • aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。

  • onDidBuild:组件build()函数执行完成之后回调该接口,不建议在onDidBuild函数中更改状态变量、使用animateTo等功能,这可能会导致不稳定的UI表现。

  • aboutToDisappear:aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。

 生命周期流程如下图所示,下图展示的是被@Entry装饰的组件(页面)生命周期。

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

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

相关文章

React Native 全新架构来了

React Native 0.76 现已在 npm 上以全新架构默认发布! 在 0.76 版本的发布博客中,我们分享了此版本包含的一系列重大更改。在本文中,我们将概述全新架构以及它如何塑造 React Native 的未来。 全新架构全面支持现代 React 功能,…

git commit 校验

commitlint官方链接 1. npm install --save-dev commitlint/config-conventional commitlint/cli 2. 配置commitlint.config.cjs(项目根目录中) module.exports {extends: [commitlint/config-conventional],rules: {type-enum: [2,always,[Feat, Fix, Doc, Style,…

vue2.x elementui 固定顶部、左侧菜单与面包屑,自适应 iframe 页面布局

vue elementui 固定顶部、左侧菜单与面包屑,自适应 iframe 页面布局 疑问点:iframe无法高度100%,如果写了100%就会有滚动条,所以只写了99.5% 【效果图】 路由示例 const routes [{title: Index,path: /,name: "Index"…

Coggle数据科学 | RAG编码模型对比:谁与OpenAI最为相似?

本文来源公众号“Coggle数据科学”,仅用于学术分享,侵权删,干货满满。 原文链接:RAG编码模型对比:谁与OpenAI最为相似? 在设计检索增强型生成(RAG)系统时,选择嵌入模型…

golang分布式缓存项目 Day1 LRU 缓存淘汰策略

注:该项目原作者:https://geektutu.com/post/geecache-day1.html。本文旨在记录本人做该项目时的一些疑惑解答以及部分的测试样例以便于本人复习。 LRU缓存淘汰策略 三种缓存淘汰策略 FIFO(First In, First Out)先进先出 原理&…

工业相机选取

1.相机分类: 1.1 在相机曝光方式中,全局曝光和卷帘曝光是两种主流技术。CCD相机通常采用全局曝光方式,而CMOS相机则可能采用卷帘曝光。 面阵相机与全局曝光关联与区别 关联:面阵相机可以使用全局曝光作为曝光方式,但…

如何查看电脑关机时间

要查看电脑的关机时间,可以按照以下步骤进行操作: 1. 打开事件查看器:按下键盘上的Windows键R键,然后在弹出的运行对话框中输入"eventvwr.msc",并按下Enter键。 2. 在事件查看器窗口中,单击左侧窗…

jwt用户登录,网关给微服务传递用户信息,以及微服务间feign调用传递用户信息

1、引入jwt依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version></dependency> 2、Jwt工具类&#xff0c;生成token以及解析token package com.niuniu.gateway.uti…

SQL练习(2)

题源&#xff1a;牛客官网 选择题 假设创建新用户nkw&#xff0c;现在想对于任何IP的连接&#xff0c;仅拥有user数据库里面的select和insert权限&#xff0c;则列表语句中能够实现这一要求的语句是&#xff08;&#xff09; A grant select ,insert on *.* to nkw% B grant…

【MySQL从入门到放弃】InnoDB磁盘结构(一)

前言 从MySQL 5.5版本开始默认 使用InnoDB作为引擎&#xff0c;它擅长处理事务&#xff0c;具有自动崩溃恢复的特性&#xff0c;在日常开发中使用非常广泛。 下面是官方的InnoDB引擎架构图&#xff0c;主要分为内存结构和磁盘结构两大部分。 上一篇文章&#xff0c;我们解析了…

RT-DETR融合CVPR[2020]轻量化卷积模块Ghost Module模块

RT-DETR使用教程&#xff1a; RT-DETR使用教程 RT-DETR改进汇总贴&#xff1a;RT-DETR更新汇总贴 《GhostNet: More Features from Cheap Operations》 一、 模块介绍 论文链接&#xff1a;https://arxiv.org/abs/1911.11907 代码链接&#xff1a;GitHub - huawei-noah/Effici…

《TCP/IP网络编程》学习笔记 | Chapter 11:进程间通信

《TCP/IP网络编程》学习笔记 | Chapter 11&#xff1a;进程间通信 《TCP/IP网络编程》学习笔记 | Chapter 11&#xff1a;进程间通信进程间通信的基本概念通过管道实现进程间通信通过管道进行进程间双向通信 运用进程间通信习题&#xff08;1&#xff09;什么是进程间通信&…

2024 kali操作系统安装Docker步骤

1、更新系统 在开始之前&#xff0c;确保你的Kali系统是最新的。打开终端并运行以下命令&#xff1a; apt update 2、安装 apt install docker.io 3、查看启动状态 systemctl status docker 4、安装完 Docker 后&#xff0c;启动 systemctl start docker 5、启动并使…

LLMs之Code:Github Spark的简介、安装和使用方法、案例应用之详细攻略

LLMs之Code&#xff1a;Github Spark的简介、安装和使用方法、案例应用之详细攻略 目录 Github Spark的简介 Github Spark的安装和使用方法 1、安装 2、使用方法 Github Spark的案例应用 Github Spark的简介 2024年10月30日&#xff0c;GitHub 重磅发布GitHub Spark 是一…

MySQL数据库:SQL语言入门 【上】(学习笔记)

SQL&#xff08;Structured Query Language&#xff09;是结构化查询语言的简称&#xff0c;它是一种数据库查询和程序设计语言&#xff0c;同时也是目前使用最广泛的关系型数据库操作语言。&#xff08;95%适用于所有关系型数据库&#xff09; 【 SQL是关系型数据库通用的操作…

腾讯云nginx SSL证书配置

本章教程,记录在使用腾讯云域名nginx证书配置SSL配置过程。 一、nginx配置 域名和证书,替换成自己的即可。证书文件可以自定义路径位置。服务器安全组或者防火墙需要开放80和443端口。 server {#SSL 默认访问端口号为 443listen 443 ssl; #请填写绑定证书的域名server_name c…

使用electron-egg把vue项目在linux Ubuntu环境下打包并安装运行

electron-egg一个入门简单、跨平台、企业级桌面软件开发框架https://www.kaka996.com/electron-egg 跳转地址 1,使用 git下载代码到本地,如果没有git需要进行安装 # gitee git clone https://gitee.com/dromara/electron-egg.git # github git clone https://github.com/dro…

Nginx配置自带的stub状态实现活动监控指标

场景 为了确保应用以最佳性能和精度运行&#xff0c;需要清晰地了解有关其活动的监控指标。 NGINX 提供了多种监控选项&#xff0c;例如 stub 状态。 注&#xff1a; 博客&#xff1a;霸道流氓气质-CSDN博客 实现 启用 NGINX stub 状态 启用 NGINX HTTP 服务器内 locati…

vscode下nuget包的本地引入方法

优势&#xff1a; nuget包的本地引入可以方便打包后的本地测试&#xff0c;确保打包正确、功能完善后再上传至nuget服务端本地引入方式也极为简单&#xff0c;三步操作即可搞定&#xff0c;熟悉之后这个操作2分钟内就可以搞定 具体步骤&#xff08;以引入Epic.RobotService包…

【知识科普】SPA单页应用程序介绍

SPA单页应用程序 概述和传统的多页应用有什么区别&#xff1f;用户体验架构和开发性能和优化SEO&#xff08;搜索引擎优化&#xff09;维护和扩展 如何优化SEO服务端渲染和预渲染有什么区别&#xff1f; 概述 SPA&#xff0c;全称为Single Page Application&#xff08;单页应用…