Harmony4.0鸿蒙应用开发初识+实践小案例

news2024/11/26 20:46:24

Harmony4.0鸿蒙应用开发初识+实践小案例

一、华为的“1+8+N”产品战略+

在华为HarmonyOS及全场景新品发布会上，华为介绍了华为“1+8+N”三圈层全场景智慧生态解决方案，从而打造面向未来的全新生态，其中，1指的是手机，8指的是车机、音箱、耳机、手表/手环、平板、大屏、PC、AR/VR，N指的是泛IOT设备。华为的“1+8+N”产品战略是为了要打造未来5G全场景智慧生活而制定。给我们的生活带来了无限可能，那么HarmonyOS应用开发和HarmonyOS设备开发也必将有着巨大的需求。

img

image-20231217210122293

二、什么是HarmonyOS

HarmonyOS 是啥？HarmonyOS 是华为新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁、流畅、连续、安全可靠的全场景交互体验。

HarmonyOS发展历程：

时间事件
2019HarmonyOS 1.0，华为在东莞举行华为开发者大会，正式发布操作系统鸿蒙 OS，主要用于物联网
2020HarmonyOS 2.0，基于开源项目 OpenHarmony 开发的面向多种全场景智能设备的商用版本
2021HarmonyOS 3.0，先后优化游戏流畅度、地图三维体验、系统安全，另外系统的稳定性也得到了增强
2023.2HarmonyOS 3.1，系统纯净能力进一步提升，对后台弹窗、 隐藏应用、后台跳转等情况
2023.7华为 Mate 50 系列手机获推 HarmonyOS 4.0
2024HarmonyOS Next 即将发布，将不在兼容安卓应用

在今年9月25日华为秋季全场景新品发布会上，余承东宣布，全面启动鸿蒙原生应用，HarmonyOS NEXT开发者预览版将在2024年第一季度面向开发者开放。这也意味着，今后鸿蒙和安卓应用不再兼容。华为官方还公布了一个令人振奋的消息：鸿蒙 HarmonyOS 4 系统升级设备数已经达到了 6000 万，平均每天增加 120 万用户。这一数据展示了鸿蒙系统在全球范围内的迅速普及和用户对其不断增长的支持。

三、鸿蒙开发套件

那作为IT开发者的我们，要开发HarmonyOS应用需要哪些技术和工具呢？华为为HarmonyOS 鸿蒙开发者提供包括HarmonyOS SDK、DevEco Studio、DevEco Service等开发、调试、测试功能的服务，让开发效率进一步提升，同时享受顺滑的开发体验。

面向鸿蒙生态的声明式开发套件，包含了鸿蒙生态应用从设计、开发、测试、上架所需的关键技术和产品。（鸿蒙指华为终端鸿蒙智能设备操作系统软件）

img

面向鸿蒙生态的声明式开发套件包括：

  • AppGallery Connect（简称AGC）致力于为应用的创意、开发、分发、运营、经营各环节提供一站式服务，构建全场景智慧化的应用生态体验。

  • DevEco Studio 面向全场景多设备，提供一站式的分布式应用开发平台，支持分布式多端开发、分布式多端调测、多端模拟仿真，提供了代码智能编辑、低代码开发、双向预览等功能，以及轻量构建工具DevEco Hvigor 、本地模拟器，持续提升应用及服务开发效率。

  • DevEco Testing 提供 HarmonyOS 应用和设备测试解决方案，助力开发者全面高效测试。

  • Harmony Design 是鸿蒙生态不断更新的设计资源库，包含图标、色彩、文字、音效等丰富的资源，并且提供多种效率组件和界面模板，帮助快速准确的设计HarmonyOS 应用。

  • ArkTS 是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。

  • ArkUI 是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具，帮助开发者提升HarmonyOS应用界面开发效率。

  • ArkCompiler 是华为自研的统一编程平台，包含编译器、工具链、运行时等关键部件，支持高级语言在多种芯片平台的编译与运行，并支撑应用和服务运行在手机、个人电脑、平板、电视、汽车和智能穿戴等多种设备上的需求。

四、鸿蒙开发编辑器安装和配置

接下来，让我们一起搓一搓期待的小手，开启HarmonyOS鸿蒙应用开发学习之旅吧。

1、安装 DevEco Studio 编辑器

链接地址：https://developer.harmonyos.com/cn/develop/deveco-studio#download

注意：Mac为M1、M2、M3芯片的用户需安装Mac（ARM）版本，Mac为Intel芯片的用户安装Mac（X86）版本，windows电脑安装Windows（64-bit）版本。

image-20231217215101945

基础安装：Node.js >= 16.9.1 + Install ohpm 鸿蒙包管理器

image-20231217215517768

SDK 安装

image-20231217215532719

安装完成

image-20231217215601169

2、创建项目

Create Project

image-20231217215901055

选择项目模板

image-20231217220104858

填写项目信息

image-20231217220139290

项目创建完成

image-20231217220232112

3、编辑器汉化（安装中文包）

img

点击OK后，重启编辑器，即可显示中文界面。

image-20231217220518146

4、效果预览

Previewer（预览器） 预览

场景：静态页面（没有组件间数据通信、不涉及到网络请求）
条件：有 @Entry装饰器页面

image-20231217221006148

5、项目目录结构

Stage 模型

image-20231217221322839

  • entry 是一个 Module 应用包
  • entryability 是一个 UIAbility 包含用户界面的应用组件，是应用/服务的入口
  • pages 是应用/服务包含的页面
  • components 可以是组件

image-20231217221539722

更多文件目录结构参考：https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/start-with-ets-stage-0000001477980905-V3

五、鸿蒙开发基础（一）

1、初识ArkTS

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

18.272ae02b

ArkTS在TS的基础上主要扩展了如下能力：

  • 基本语法

    • 定义声明式UI、自定义组件、动态扩展UI元素；

    • 提供ArkUI系统组件，提供组件事件、方法、属性；

    • 共同构成 UI 开发主体

  • 状态管理

    • 组件状态、组件数据共享、应用数据共享、设备共享；

  • 渲染控制

    • 条件渲染、循环渲染、数据懒加载；

2、初识ArkUI

ArkUI（方舟开发框架）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。

**UI：**即用户界面。

**组件：**UI构建与显示的最小单位，如列表、网格、按钮、单选框、进度条、文本等。

针对不同的应用场景及技术背景，ArkUI提供了两种开发范式：

  • 声明式开发范式：采用基于TypeScript声明式UI语法扩展而来的ArkTS语言。
    • 声明式开发范式是【华为官方推荐的方式】，开发高效简洁，性能佳相比类Web开发范式，声明式开发范式无需JS框架进行页面DOM管理，渲染更新链路更为精简，占用内存更少，应用性能更佳。
  • 类Web开发范式：采用经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟开发框架应用。

ArkUI（方舟开发框架）示意图：

img

基于ArkTS的声明式开发范式的方舟开发框架（ArkUI）是一套开发极简、高性能、支持跨设备的UI开发框架，提供了构建HarmonyOS应用UI所必需的能力，主要包括：ArkTS、布局、组件、页面路由和组件导航、图形、动画、交互事件。

整体架构

3、快速认知ArkTS声明式开发范式

img

  • ArkTS通过装饰器 @Component 和 @Entry 装饰 struct 关键字声明的数据结构，构成一个自定义组件。

  • 自定义组件中提供了一个 build 函数，开发者需在该函数内以链式调用的方式进行基本的 UI 描述，UI 描述的方法请参考 UI 描述规范

提示：

  • @Entry @Component 是页面组件，将来需要页面跳转就需要再定义一个页面。
  • @Component 自定义组件，一个页面组件下可以有多个自定义组件。
  • build(){} 只能有一个根元素

项目初始化页面中的ArkTS

image-20231217230703690

@Entry // 页面入口，一个页面只能有一个 @Entry装饰器
@Component // 自定义组件，一个页面中可以有多个 @Component
struct Index { // struct 关键字声明的数据结构, Index是组件名称
  @State message: string = 'Hello World' //   @State表示组件中的状态变量，当状态变量变化时会触发UI更新（如果变量没有被@State声明（修饰），变量变化不会触发UI更新）。

  build() { // build函数 用于定义组件的UI描述，build函数中包裹的内容 是以声明式的方式来描述UI的结构。
    Row () { // Row 容器组件，定义行，可以让页面内容沿水平方向布局
      Column() { // Column 容器组件 ，定义列，可以让页面内容沿垂直方向布局
        Text(this.message) // 文本内容
          .fontSize(50) //字体大小
          .fontWeight(FontWeight.Bold) // 字体加粗
      }
      .width('100%')  //宽度
    }
    .height('100%') //高度
  }
}

4、UI开发布局

组件按照布局的要求依次排列，构成应用的页面。在声明式UI中，所有的页面都是由自定义组件构成的。在实际的开发过程中，开发者需要根据自己的需求，选择合适的布局进行页面开发。
布局的结构通常是分层级的，代表了用户界面中的整体架构。一个常见的页面结构如下所示：

img

布局相关的容器组件可形成对应的布局效果，一个常见的容器组件布局元素组成如下所示：

img

5、常用组件

  • Text 文本组件
  • Column 列组件， 沿垂直方向布局，Flex布局主轴是Y
  • Row 行组件，沿水平方向布局，Flex布局主轴是X
  • Button 按钮组件
  • TextInput 输入框组件

实现一个简易登录界面：

image-20231217233326755

代码实现

Index.ets

@Entry
@Component
struct Index {
  build() {
    // 根据效果分析，页面整体布局为垂直布局（上下依次是：登录页面、手机号、验证码、登录按钮）
    Column({ space: 30 }) {  //  space: 30 垂直方向间距为：30（vp），vp 是鸿蒙默认单位
      //登录页面
      Text('登录页面')
        .fontSize(40)
        .fontWeight(700)
        .width('100%')
        .textAlign(TextAlign.Center) // 文本居中显示
      
      // 手机号
      Row({ space: 5 }) {  //  space: 30 水平方向间距为：30（vp），vp 是鸿蒙默认单位 ，手机号和输入框是横向排列，所以使用 Row组件进行布局
        Text('手机号:')
          .width('20%')
          .fontSize(20)
        TextInput({ placeholder: '请输入手机号' })  // placeholder 输入框中的提示信息
          .width('70%')
          .height(40)
      }
      
			// 验证码
      Row({ space: 5 }) { // 验证码和输入框是横向排列，所以使用 Row组件进行布局
        Text('验证码:')
          .width('20%')
          .fontSize(20)
        TextInput({ placeholder: '请输入验证码' })
          .width('70%')
          .height(40)
      }
      
			// 登录按钮
      Row() { // 登录按钮，单独在一行显示，所以使用 Row 组件进行布局
        Button('登录')
          .width(100)
          .height(50)
          .fontSize(20)
          .fontWeight(700)
      }
    }
  }
}

以上内容大家学会了吗？

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

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

相关文章

【LeetCode刷题笔记（8-1）】【Python】【接雨水】【动态规划】【困难】

【LeetCode刷题笔记（8-1）】【Python】【接雨水】【动态规划】【困难】

文章目录 引言接雨水题目描述提示 解决方案1：【动态规划】结束语 接雨水 引言 编写通过所有测试案例的代码并不简单，通常需要深思熟虑和理性分析。虽然这些代码能够通过所有的测试案例，但如果不了解代码背后的思考过程，那么这些代…
阅读更多...
python:import自定义包或py文件时，pyCharm正常但终端运行提示ModuleNotFoundError: No module named错误

python:import自定义包或py文件时，pyCharm正常但终端运行提示ModuleNotFoundError: No module named错误

问题 示例项目引用items.py，项目在pycharm开发工具中可以正常运行，但使用终端直接运行会报错ModuleNotFoundError: No module named。如下图。 原因 pycharm开发工具运行正常，说明目录和引用模块是没问题的。问题在于终端的运行环境只搜索文…
阅读更多...
LLM - 大模型速递之 Yi-34B 入门与 LoRA 微调

LLM - 大模型速递之 Yi-34B 入门与 LoRA 微调

一.引言 目前国内大部分开源模型都集中在 7B、13B，而国外开源模型则是集中在 7B、13B、70B 的尺寸范围，算法开发很需要一个介于 13B-70B 的大模型，弥补 13B 模型能力不足和 70B 模型显卡不够的空档。虽然 LLaMA-1-33B 有一些衍生的 Chinese …
阅读更多...
Golang清晰代码指南

Golang清晰代码指南

发挥易读和易维护软件的好处 - 第一部分 嗨，开发者们，清晰的代码是指编写易于阅读、理解和维护的软件代码。它是遵循一组原则和实践，优先考虑清晰性、简单性和一致性的代码。清晰的代码旨在使代码库更易管理，减少引入错误的可能性…
阅读更多...
Go语言并发编程：死锁预防的性能优化之旅

Go语言并发编程：死锁预防的性能优化之旅

文章目录 引言：Go并发编程的挑战与机遇Go并发的特点并发编程的挑战死锁对性能的影响文章概览死锁基础：原因、类型和识别死锁的定义死锁产生的原因死锁的类型识别死锁的方法代码示例：简单的死锁3. 预防策略：编写无死锁的Go代码理解并正确使用锁合理使用通道和goroutines侦测…
阅读更多...
C# 命令行参数解析库示例

C# 命令行参数解析库示例

写在前面 在日常开发中，我们经常会用到命令行参数，比如cmd下的各种指令；还有C#的控制台类型的项目，在默认入口Main函数中，那个args参数，就是有系统传入到程序进程的命令行参数；在传入的参数相对…
阅读更多...
✺ch3——数学基础

✺ch3——数学基础

目录 3D坐标系和点矩阵单位矩阵转置矩阵逆矩阵逆转置矩阵矩阵的运算矩阵加法()矩阵乘法() 常用的变换矩阵平移矩阵缩放矩阵旋转矩阵透视矩阵正射投影矩阵LookAt矩阵 向量加法和减法点积叉积 局部空间和世界空间——模型矩阵M视觉空间和合成相机——模型-视图矩阵MV用GLSL函数构…
阅读更多...
机器学习算法---异常检测

机器学习算法---异常检测

类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统计学检验箱…
阅读更多...
RTOS队列的写入与读出

RTOS队列的写入与读出

我们在stm32f103c8t6单片机上验证RTOS队列的写入与读出，利用stm32cube进行RTOS的配置。在选择TIM2当做RTOS的时钟，裸机的时钟源默认是 SysTick，但是开启 FreeRTOS 后，FreeRTOS会占用 SysTick （用来生成1ms 定时&#x…
阅读更多...
flask简单应用-1

flask简单应用-1

目标： 做一个搜索网页，搜索当前路径下是否含有指定关键字的文件，如果有就列出来，没有返回消息 第一步：我们需要先显示一个搜索页面，页面上需要有一个可以输入的对话框，一个按钮执行搜索 建立ht…
阅读更多...
Vue3-05-计算属性使用详解

Vue3-05-计算属性使用详解

计算属性简介 计算属性的函数是 computed()。计算属性可以帮助我们处理有复杂逻辑的响应式数据的渲染， 从而代替 模板表达式 的写法。比如 ： 一个数值类型的数组对象，我们希望页面展示的只有 偶数。 此时，就可以通过 计算属性 来…
阅读更多...
02.Git常用基本操作

02.Git常用基本操作

一、基本配置 （1）打开Git Bash （2）配置姓名和邮箱 git config --global user.name "Your Name" git config --global user.email "Your email" 因为Git是分布式版本控制工具，所以每个用户都需要…
阅读更多...
手拉手EasyExcel极简实现web上传下载(全栈)

手拉手EasyExcel极简实现web上传下载(全栈)

环境介绍 技术栈 springbootmybatis-plusmysqleasyexcel 软件 版本 mysql 8 IDEA IntelliJ IDEA 2022.2.1 JDK 1.8 Spring Boot 2.7.13 mybatis-plus 3.5.3.2 EasyExcel是一个基于Java的、快速、简洁、解决大文件内存溢出的Excel处理工具。 他能让你在不用考虑性…
阅读更多...
【PostgreSQL】从零开始:（十三）PostgreSQL-SQL语句操作架构（模式） Schema

【PostgreSQL】从零开始:（十三）PostgreSQL-SQL语句操作架构（模式） Schema

Schema概述 PostgreSQL 数据库集群包含一个或多个命名数据库。角色和一些其他对象类型在整个集群中共享。与服务器的客户端连接只能访问单个数据库中的数据，该数据库在连接请求中指定。 用户不一定有权访问集群中的每个数据库。共享角色名称意味着不能在同一集群中…
阅读更多...
IDEA2023 + spring cloud 工程热部署设置方法

IDEA2023 + spring cloud 工程热部署设置方法

基于spring cloud 工程进行热部署 &#xff0c;实现每次修改工程源文件&#xff0c;后台自动启动&#xff0c;方便开发测试工作。具体分为5步骤即可&#xff1a; 1、修改工程的pom文件&#xff0c;增加adding devtools 工具包。 <dependency> <groupId>org.s…
阅读更多...
1264. 动态求连续区间和（树状数组---某个位置加上一个数/求在线（动态）前缀和/蓝桥杯）

1264. 动态求连续区间和（树状数组---某个位置加上一个数/求在线（动态）前缀和/蓝桥杯）

题目&#xff1a; 输入样例&#xff1a; 10 5 1 2 3 4 5 6 7 8 9 10 1 1 5 0 1 3 0 4 8 1 7 5 0 4 8输出样例&#xff1a; 11 30 35 树状数组&#xff1a; 代码&#xff1a; #include<cstdio> #include<iostream> using namespace std;const int N100010; int n,…
阅读更多...
【elementui笔记：el-table表格的输入校验】

【elementui笔记：el-table表格的输入校验】

之前做得比较多的校验是在el-form表单里做的&#xff0c;但有时也遇到&#xff0c;需要在table内输入数据&#xff0c;然后校验输入的数据是否符合要求的情况。因此记录一下。 思路&#xff1a; 1.需要借助el-form的校验&#xff0c;el-table外层嵌套一层el-form&#xff0c;使…
阅读更多...
数据分析为何要学统计学（4）——何为置信区间？它有什么作用？

数据分析为何要学统计学（4）——何为置信区间？它有什么作用？

置信区间是统计学中的一个重要工具&#xff0c;是用样本参数()估计出来的总体均值在某置信水平下的范围。通俗一点讲&#xff0c;如果置信度为95%&#xff08;等价于显著水平a0.05&#xff09;&#xff0c;置信区间为[a,b]&#xff0c;这就意味着总体均值落入该区间的概率为95%…
阅读更多...
宏基因组学Metagenome-磷循环Pcycle功能基因分析-从分析过程到代码及结果演示-超详细保姆级流程

宏基因组学Metagenome-磷循环Pcycle功能基因分析-从分析过程到代码及结果演示-超详细保姆级流程

大背景介绍 生信分析，凡事先看论文，有了论文就有了参考，后续分析就有底了，直接上硬菜开干： PCycDB: a comprehensive and accurate database for fast analysis of phosphorus cycling genes - PubMed 数据库及部分分析代码github库： GitHub - ZengJiaxiong/Phospho…
阅读更多...
7.实现任务的rebalance

7.实现任务的rebalance

1.设计 1.1 背景 系统启动后&#xff0c;所有任务都在被执行&#xff0c;如果这时某个节点宕机&#xff0c;那它负责的任务就不能执行了&#xff0c;这对有稳定性要求的任务是不能接受的&#xff0c;所以系统要实现rebalance的功能。 1.2 设计 下面是Job分配与执行的业务点…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023