鸿蒙开发—UI框架概述

基本概念

UI框架

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

方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。以下是两种开发范式的简单对比。

开发范式名称语言生态UI更新方式适用场景适用人群
声明式开发范式ArkTS语言数据驱动更新复杂度较大、团队合作度较高的程序移动系统应用开发人员、系统应用开发人员
类Web开发范式JS语言数据驱动更新界面较为简单的程序应用和卡片Web前端开发人员

应用模型

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

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

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

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

工具准备

  1. 安装最新版DevEco Studio。
  2. 请参考配置开发环境，完成DevEco Studio的安装和开发环境配置。

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

创建ArkTS工程

  1. 若首次打开DevEco Studio，请点击Create Project创建工程。如果已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。
  2. 选择Application应用开发（本文以应用开发为例，Atomic Service对应为元服务开发），选择模板“Empty Ability”，点击Next进行下一步配置。

  1. 进入配置工程界面，Compile SDK选择“3.1.0(API 9)”，Model 选择“Stage”，其他参数保持默认设置即可。

说明 支持使用ArkTS低代码开发方式。 低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。 如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。

  1. 点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。

ArkTS工程目录结构（Stage模型）

  • AppScope > app.json5：应用的全局配置信息。
  • entry：HarmonyOS工程模块，编译构建生成一个HAP包。
  • src > main > ets：用于存放ArkTS源码。
  • src > main > ets > entryability：应用/服务的入口。
  • src > main > ets > pages：应用/服务包含的页面。
  • src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。
  • src > main > module.json5：Stage模型模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。
  • build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。其中targets中可配置当前运行环境，默认为HarmonyOS。
  • hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
  • oh_modules：用于存放三方库依赖信息。
  • build-profile.json5：应用级配置信息，包括签名、产品配置等。
  • hvigorfile.ts：应用级编译构建任务脚本。

构建第一个页面

  1. 使用文本组件。 工程同步完成后，在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，可以看到页面由Text组件组成。“Index.ets”文件的示例如下：
// Index.ets
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}
  1. 添加按钮。 在默认页面基础上，我们添加一个Button组件，作为按钮响应用户点击，从而实现跳转到另一个页面。“Index.ets”文件的示例如下：
// Index.ets
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮，以响应用户点击Button() {Text('Next').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')}.width('100%')}.height('100%')}
}
  1. 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：

构建第二个页面

  1. 创建第二个页面。
  • 新建第二个页面文件。在“Project”窗口，打开“entry > src > main > ets ”，右键点击“pages”文件夹，选择“New > ArkTS File”，命名为“Second”，点击“Finish”。可以看到文件目录结构如下：

说明 开发者也可以在右键点击“pages”文件夹时，选择“New > Page”，则无需手动配置相关页面路由。

  • 配置第二个页面的路由。在“Project”窗口，打开“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下：
{"src": ["pages/Index","pages/Second"]
}
  1. 添加文本及按钮。 参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。“Second.ets”文件的示例如下：
// Second.ets
@Entry
@Component
struct Second {@State message: string = 'Hi there'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text('Back').fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')}.width('100%')}.height('100%')}
}

实现页面间的跳转

页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。

  1. 第一个页面跳转到第二个页面。 在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。“Index.ets”文件的示例如下：
// Index.ets
// 导入页面路由模块
import router from '@ohos.router';@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮，以响应用户点击Button() {Text('Next').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')// 跳转按钮绑定onClick事件，点击时跳转到第二页.onClick(() => {console.info(`Succeeded in clicking the 'Next' button.`)// 跳转到第二页router.pushUrl({ url: 'pages/Second' }).then(() => {console.info('Succeeded in jumping to the second page.')}).catch((err) => {console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)})})}.width('100%')}.height('100%')}
}
  1. 第二个页面返回到第一个页面。 在第二个页面中，返回按钮绑定onClick事件，点击按钮时返回到第一页。“Second.ets”文件的示例如下：
// Second.ets
// 导入页面路由模块
import router from '@ohos.router';@Entry
@Component
struct Second {@State message: string = 'Hi there'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text('Back').fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')// 返回按钮绑定onClick事件，点击按钮时返回到第一页.onClick(() => {console.info(`Succeeded in clicking the 'Back' button.`)try {// 返回第一页router.back()console.info('Succeeded in returning to the first page.')} catch (err) {console.error(`Failed to return to the first page.Code is ${err.code}, message is ${err.message}`)}})}.width('100%')}.height('100%')}
}
  1. 打开“Index.ets”文件，点击预览器中的按钮进行刷新。效果如下图所示：

使用真机运行应用

运行HarmonyOS应用可以使用远程模拟器和物理真机设备，区别在于使用远程模拟器运行应用不需要对应用进行签名。接下来将以物理真机设备为例，介绍HarmonyOS应用的运行方法，关于模拟器的使用请参考使用Remote Emulator运行应用/服务。

  1. 将搭载HarmonyOS系统的真机与电脑连接。具体指导及要求，可查看使用本地真机运行应用/服务。
  2. 点击File > Project Structure… > Project > SigningConfigs界面勾选“Support HarmonyOS”和“Automatically generate signature”，点击界面提示的“Sign In”，使用华为帐号登录。等待自动签名完成后，点击“OK”即可。如下图所示：

  1. 在编辑窗口右上角的工具栏，点击按钮运行。效果如下图所示：

恭喜您已经使用ArkTS语言开发（Stage模型）完成了第一个HarmonyOS应用，有更多的HarmonyOS功能可以参考《鸿蒙纯血开发全套文档》点击可获取全套学习路线图。

随着华为鸿蒙系统的推进和生态竞争的加剧，互联网行业将迎来一场前所未有的变革。对于企业和从业者而言，把握行业趋势、提升技能水平将是应对挑战的关键。我们作为程序员一定要抓住时代的红利——鸿蒙。

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

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

相关文章

数据结构与算法编程题47

数据结构与算法编程题47

无向图的邻接表 #include <iostream> using namespace std;#define MVnum 100 typedef string VertexType;typedef struct ArcNode {int adjvex;struct ArcNode* nextarc;int weight; }ArcNode;typedef struct VNode {VertexType data;struct ArcNode* firstarc; }VNode,…
阅读更多...
性能测试工具：Jmeter介绍

性能测试工具：Jmeter介绍

JMeter是一个开源的Java应用程序&#xff0c;由Apache软件基金会开发和维护&#xff0c;可用于性能测试、压力测试、接口测试等。 1. 原理 JMeter的基本原理是模拟多用户并发访问应用程序&#xff0c;通过发送HTTP请求或其他协议请求&#xff0c;并测量响应时间、吞吐量、并发…
阅读更多...
关于对Spring事件监听机制相关解析

关于对Spring事件监听机制相关解析

1、Spring事件监听器使用 Spring事件监听体系包括三个组件&#xff1a;事件、事件监听器&#xff0c;事件广播器 事件&#xff1a;定义事件类型和事件源&#xff0c;需要继承ApplicationEvent import org.springframework.context.ApplicationEvent; public class OrderEvent…
阅读更多...
虹科新闻丨虹科正式加入广州市新联会科创分会

虹科新闻丨虹科正式加入广州市新联会科创分会

来源&#xff1a;虹科电子科技有限公司 虹科新闻丨虹科正式加入广州市新联会科创分会 11月7日&#xff0c;由广州市委统战部、广州开发区管委会、黄埔区人民政府指导&#xff0c;佳都集团、佳都科技集团、广州开发区投资集团共同主办的未来之城大湾区元宇宙创新示范中心&#…
阅读更多...
金鸣表格文字识别大师扫描仪使用技巧

金鸣表格文字识别大师扫描仪使用技巧

所需硬件&#xff1a;PC&#xff08;电脑&#xff09;、扫描仪 所需软件&#xff1a;金鸣表格文字识别大师5.0以上版本&#xff08;以下简称“本软件”&#xff09; 实现功能&#xff1a;直接用扫描仪扫描图片并将其转换为可编辑的excel或word. 实现原理&#xff1a;本软件利…
阅读更多...
DevEco Studio集成ArkUI-X

DevEco Studio集成ArkUI-X

语雀知识库地址&#xff1a;语雀HarmonyOS知识库 飞书知识库地址&#xff1a;飞书HarmonyOS知识库 在上篇文章(HarmonyOS应用开发工具DevEco Studio安装与使用)中我说到官方推出了4.0 Beta版本的IDE&#xff0c;这篇文章就来介绍这个版本的安装与使用 该版本集成了HarmonyOS多…
阅读更多...
利用ChatGPT的写作能力，可以更好地组织思路、提升论文的逻辑性和质量

利用ChatGPT的写作能力，可以更好地组织思路、提升论文的逻辑性和质量

2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…
阅读更多...
UE4.27-UE5.1设置打包Android环境

UE4.27-UE5.1设置打包Android环境

打包Android配置文件 1. 配置打包Android的SDK需求文件位于下面文件中&#xff1a; 2. 指定了对应的SDK环境变量名字以及NDK需求等&#xff1a; UE4.27-UE5.1--脚本自动配置 安装前提 1. 务必关闭虚幻编辑器和Epic Games Launcher&#xff0c;以确保NDK组件的安装或引擎环境…
阅读更多...
P1005 [NOIP2007 提高组] 矩阵取数游戏

P1005 [NOIP2007 提高组] 矩阵取数游戏

网址&#xff1a;P1005 [NOIP2007 提高组] 矩阵取数游戏 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 动态规划和高精度的组合&#xff0c;使我的滨州旋转 最后只得了80&#xff0c;两个测试点超时了 看题解有人是用了int128来做的&#xff0c;明天学一下 我的递归思路和…
阅读更多...
关于 mapboxgl 的常用方法及效果

关于 mapboxgl 的常用方法及效果

给地图标记点 实现效果 /*** 在地图上添加标记点* point: [lng, lat]* color: #83f7a0*/addMarkerOnMap(point, color #83f7a0) {const marker new mapboxgl.Marker({draggable: false,color: color,}).setLngLat(point).addTo(this.map);this.markersList.push(marker);},…
阅读更多...
AI必然成为未来的OS

AI必然成为未来的OS

我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版&#xff0c;欢迎购买。点击进入详情 ChatGPT引入插件&#xff0c;AI必然成为未来OS&#xff0c;或至少成为绝大多数APP首选入口。未来软件开发根据任务不同&#xff0c;有两种不同范式&#xff1a; &a…
阅读更多...
unity 2d 入门 飞翔小鸟 场景淡入淡出功能（三)

unity 2d 入门 飞翔小鸟 场景淡入淡出功能（三)

1、在图层新建个空的图层 场景2 2创建c#脚本 脚本创建好后&#xff0c;将脚本推拽进空白图层里面&#xff0c;将黑色图片拉进去脚本的参数里面&#xff0c;如上面最后一张图&#xff0c;两个切换的场景都要进行上述操作 using System.Collections; using System.Collection…
阅读更多...
识别低效io引起的free buffer waits

识别低效io引起的free buffer waits

产生事发时间段的awr报告 Top 5 wait events 这里重点关注&#xff1a; 1.free buffer waits 2.enq_HW-contention 3.enq:tx-row lock contention enq:HW-contention属于水位线的争用&#xff0c;已经透过alter table allocate extent&#xff0c;提前分配空间,这里不做讨论 …
阅读更多...
软件工程之需求分析

软件工程之需求分析

一、对需求的基本认识 1.需求分析简介 (1)什么是需求 用户需求&#xff1a;由用户提出。原始的用户需求通常是不能直接做成产品的&#xff0c;需要对其进行分析提炼&#xff0c;最终形成产品需求。 产品需求&#xff1a;产品经理针对用户需求提出的解决方案。 (2)为什么要…
阅读更多...
【Python】Flask + MQTT 实现消息订阅发布

【Python】Flask + MQTT 实现消息订阅发布

目录 Flask MQTT 实现消息订阅发布准备开始1.创建Flask项目2创建py文件&#xff1a;mqtt_demo.py3.代码实现4.项目运行5.测试5.1 测试消息接收5.2 测试消息发布6、扩展 Flask MQTT 实现消息订阅发布 准备 本次项目主要使用到的库&#xff1a;flask_mqtt pip install flask…
阅读更多...
Leetcode刷题详解——最长湍流子数组

Leetcode刷题详解——最长湍流子数组

1. 题目链接&#xff1a;978. 最长湍流子数组 2. 题目描述&#xff1a; 给定一个整数数组 arr &#xff0c;返回 arr 的 最大湍流子数组的长度 。 如果比较符号在子数组中的每个相邻元素对之间翻转&#xff0c;则该子数组是 湍流子数组 。 更正式地来说&#xff0c;当 arr 的子…
阅读更多...
ALPHA开发板烧录工具MfgTool简介

ALPHA开发板烧录工具MfgTool简介

一. 简介 前面我们已经移植好了 uboot 和 linux kernle &#xff0c;制作好了根文件系统。但是我们移植都是通 过网络来测试的&#xff0c;在实际的产品开发中肯定不可能通过网络来运行。 因此&#xff0c;我们需要将 uboot 、 linux kernel 、 .dtb( 设备树 ) 和 rootf…
阅读更多...
串口环形收发原理及实现

串口环形收发原理及实现

一、环形收发队列构建 1、构造环形收发数组及其长度 #define buff_size 10 Unsigned char buff[buff_size]; 2、定义环形收发读/写位置 u16 R_Buff; u16 W_Buff; 3、结构体封装 typedef struct Qbuff {u16 write; //写位置u16 read; //读位置u8 buf…
阅读更多...
Zabbix自定义飞书webhook告警媒介1

Zabbix自定义飞书webhook告警媒介1

说明&#xff1a;此配置仅适用于7版本及以上&#xff0c;低版本可能有问题 JavaScript 内容如下&#xff1a; try {var sourceData JSON.parse(value),req new HttpRequest(),response;if (sourceData.HTTPProxy) {req.setProxy(sourceData.HTTPProxy);}req.addHeader(Conte…
阅读更多...
pytorch中的transpose用法

pytorch中的transpose用法

注意&#xff1a;维数从0开始&#xff0c;0维 1维2维…,负数代表从右往左数&#xff0c;-1代表第一维&#xff0c;以此类推 import torch import numpy as np# 创建一个二维数组 arr torch.tensor([[[1, 2],[3, 4]],[[5, 6],[7, 8]]]) print("原始数组&#xff1a;"…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023