鸿蒙开发——3.ArkTS声明式开发:构建第一个ArkTS应用

news2025/5/11 15:38:52

鸿蒙开发——3.ArkTS声明式开发:构建第一个ArkTS应用

  • 一、创建ArkTS工程
  • 二、ArkTS工程目录结构（Stage模型）
  • 三、构建第一个页面
  • 四、构建第二个页面
  • 五、实现页面之间的跳转
  • 六、模拟器运行

一、创建ArkTS工程

1、若首次打开DevEco Studio，请点击Create Project创建工程。如果已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。
2、选择Application应用开发（本文以应用开发为例，Atomic Service对应为元服务开发），选择模板Empty Ability，点击Next进行下一步配置。
在这里插入图片描述
3、进入配置工程界面，配置项目名称、保存位置等，Compatible SDK表示兼容的最低API Version，此处以选择5.0.4(16)为例，其他参数保持默认设置即可，点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。
在这里插入图片描述

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

在这里插入图片描述

  • AppScope > app.json5：应用的全局配置信息，详见app.json5配置文件。

  • entry：HarmonyOS工程模块，编译构建生成一个HAP包。

    • src > main > ets：用于存放ArkTS源码。
    • src > main > ets > entryability：应用/服务的入口。
    • src > main > ets > entrybackupability：应用提供扩展的备份恢复能力。
    • src > main > ets > pages：应用/服务包含的页面。
    • src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
    • src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。
    • build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
    • hvigorfile.ts：模块级编译构建任务脚本。
    • obfuscation-rules.txt：混淆规则文件。混淆开启后，在使用Release模式进行编译时，会对代码进行编译、混淆及压缩处理，保护代码资产。详见开启代码混淆。
    • oh-package.json5：用来描述包名、版本、入口文件（类型声明文件）和依赖项等信息。

  • oh_modules：用于存放三方库依赖信息。

  • build-profile.json5：工程级配置信息，包括签名signingConfigs、产品配置products等。其中 products中可配置当前运行环境，默认为HarmonyOS。

  • hvigorfile.ts：工程级编译构建任务脚本。

  • oh-package.json5：主要用来描述全局配置，如：依赖覆盖（overrides）、依赖关系重写（overrideDependencyMap）和参数化配置（parameterFile）等。

三、构建第一个页面

1、工程同步完成后，在Project窗口，点击entry > src > main > ets > pages，打开Index.ets文件，进行页面的编写，编辑器会默认生成代码基本骨架：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
    }
    .height('100%')
    .width('100%')
  }
}

2、在已有页面代码基础之上，添加一个Button组件，用于用户点击后跳转至第二个页面中:

@Entry
@Component
struct Index {
  @State message: string = 'first page';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
      Button(){
        Text('Next')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .type(ButtonType.Capsule)
      .margin({
        top: 100
      })
      .backgroundColor('#0D9FFB')
      .width('40%')
      .height('5%')
      .fontColor(Color.White)
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
    }
    .height('100%')
    .width('100%')
  }
}

四、构建第二个页面

1、创建第二个页面。
新建第二个页面文件。在Project窗口，打开entry > src > main > ets，右键点击pages文件夹，选择New > ArkTS File，命名为second，点击回车键。可以看到文件目录结构如下：
在这里插入图片描述
在这里插入图片描述
2、配置第二个页面的路由。在Project窗口，打开entry > src > main > resources > base > profile，在main_pages.json文件中的"src"下配置第二个页面的路由"pages/second"。示例如下：

{
  "src": [
    "pages/Index",
    "pages/second"
  ]
}

在这里插入图片描述

3、添加文本及按钮。
参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。second.ets文件的示例如下：

@Entry
@Component
struct second {
  @State message: string = 'second page';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
      Button(){
        Text('back')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .type(ButtonType.Capsule)
      .margin({
        top: 100
      })
      .backgroundColor('#0D9FFB')
      .width('40%')
      .height('5%')
      .fontColor(Color.White)
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
    }
    .height('100%')
    .width('100%')
  }
}

五、实现页面之间的跳转

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

如果需要实现更好的转场动效，推荐使用Navigation。

1、第一个页面跳转到第二个页面。
在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。Index.ets文件的示例如下：

// 导入页面路由模块
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Index {
  @State message: string = 'first page';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
      Button(){
        Text('Next')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .type(ButtonType.Capsule)
      .margin({
        top: 100
      })
      .backgroundColor('#0D9FFB')
      .width('40%')
      .height('5%')
      .fontColor(Color.White)
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
      .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:BusinessError)=>{
          console.error(`Failed to jump to the second page. Code is ${err.code},message is ${err.message}`)
        })
      })
    }
    .height('100%')
    .width('100%')
  }
}

2、第二个页面返回到第一个页面。
在第二个页面中，返回按钮绑定onClick事件，点击按钮时返回到第一页。Second.ets文件的示例如下：

// 导入页面路由模块
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct second {
  @State message: string = 'second page';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
      Button(){
        Text('back')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .type(ButtonType.Capsule)
      .margin({
        top: 100
      })
      .backgroundColor('#0D9FFB')
      .width('40%')
      .height('5%')
      .fontColor(Color.White)
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
      .onClick(()=>{
        console.info(`Succeeded in clicking the 'next' button`)
        try{
          router.back()
          console.info(`Succeeded in jumping to the second page.`)
        }
        catch(err){
          let code=(err as BusinessError).code;
          let message=(err as BusinessError).message;
          console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}

六、模拟器运行

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

word换行符和段落标记

word换行符和段落标记

换行符：只换行不分段 作用：我们需要对它进行分段，但它是一个信息群组，我希望它们有同样的段落格式！ 快捷键：shiftenter 段落标记：分段 快捷键：enter 修改字体格式或段落格式 …
阅读更多...
AI时代的数据可视化：未来已来

AI时代的数据可视化：未来已来

你有没有想过，数据可视化在未来会变成什么样？随着人工智能（AI）的飞速发展，数据可视化已经不再是简单的图表和图形，而是一个充满无限可能的智能领域。AI时代的可视化不仅能自动解读数据，还能预测…
阅读更多...
深入理解 TCP：重传机制、滑动窗口、流量控制与拥塞控制

深入理解 TCP：重传机制、滑动窗口、流量控制与拥塞控制

TCP（Transmission Control Protocol）是一个面向连接、可靠传输的协议，支撑着绝大多数互联网通信。在实现可靠性的背后，TCP 引入了多个关键机制：重传机制、滑动窗口、流量控制 和 拥塞控制。这些机制共同协作&#xff0…
阅读更多...
uniapp-商城-51-后台 商家信息（logo处理）

uniapp-商城-51-后台 商家信息（logo处理）

前面对页面基本进行了梳理和说明，特别是对验证规则进行了阐述，并对自定义规则的兼容性进行了特别补充，应该说是干货满满。不知道有没有小伙伴已经消化了。 下面我们继续前进，说说页面上的logo上传组件，主要就是uni-fil…
阅读更多...
springboot 加载 tomcat 源码追踪

springboot 加载 tomcat 源码追踪

加载 TomcatServletWebServerFactory 从 SpringApplication.run(）方法进入 进入到 refresh () 方法 选择实现类 ServletWebServerApplicationContext 进入到 AbstractApplicationContext onRefresh() 方法创建容器 找到加载bean 得到 webServer 实例 点击 get…
阅读更多...
使用countDownLatch导致的线程安全问题，线程不安全的List-ArrayList，线程安全的List-CopyOnWriteArrayList

使用countDownLatch导致的线程安全问题，线程不安全的List-ArrayList，线程安全的List-CopyOnWriteArrayList

示例代码 package com.example.demo.service;import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors;public class UnSafeCDTest {Executor…
阅读更多...
C++ - 仿 RabbitMQ 实现消息队列（1）（环境搭建）

C++ - 仿 RabbitMQ 实现消息队列（1）（环境搭建）

C - 仿 RabbitMQ 实现消息队列（1）（环境搭建） 什么是消息队列核心特点核心组件工作原理常见消息队列实现应用场景优缺点 项目配置开发环境技术选型 更换软件源安装一些工具安装epel 软件源安装 lrzsz 传输工具安装git安装 cmake安装…
阅读更多...
RK3568-OpenHarmony(1) : OpenHarmony 5.1的编译

RK3568-OpenHarmony(1) : OpenHarmony 5.1的编译

概述: 本文主要描述了，如何在ubuntu-20.04操作系统上，编译RK3568平台的OpenHarmony 5.1版本。 搭建编译环境 a. 安装软件包 sudo apt-get install git-lfs ruby genext2fs build-essential git curl libncurses5-dev libncursesw5-dev openjdk-11-jd…
阅读更多...
eFish-SBC-RK3576工控板外部RTC测试操作指南

eFish-SBC-RK3576工控板外部RTC测试操作指南

备注： 1）测试时一定要接电池，否则外部RTC断电后无法工作导致测试失败； 2）如果连接了网络，系统会自动同步NTP时钟，所以需要关闭自动同步时钟。 关闭自动同步NTP时钟方法： 先查看是…
阅读更多...
vue3的深入组件-组件 v-model

vue3的深入组件-组件 v-model

组件 v-model 基本用法​ v-model 可以在组件上使用以实现双向绑定。 从 Vue 3.4 开始&#xff0c;推荐的实现方式是使用 defineModel() 宏&#xff1a; <script setup> const model defineModel()function update() {model.value } </script><template>…
阅读更多...
【MySQL】数据库、数据表的基本操作

【MySQL】数据库、数据表的基本操作

个人主页&#xff1a;Guiat 归属专栏&#xff1a;MySQL 文章目录 1. MySQL基础命令1.1 连接MySQL1.2 基本命令概览 2. 数据库操作2.1 创建数据库2.2 查看数据库2.3 选择数据库2.4 修改数据库2.5 删除数据库2.6 数据库备份与恢复 3. 表操作基础3.1 创建表3.2 查看表信息3.3 创建…
阅读更多...
TCP的连接管理

TCP的连接管理

三次握手 什么是三次握手&#xff1f; 1. 第一次握手&#xff08;客户端 → 服务器&#xff09; 客户端发送一个 SYN 报文&#xff0c;请求建立连接。 报文中包含一个初始序列号 SEQ x。 表示&#xff1a;我想和你建立连接&#xff0c;我的序列号是 x。 2. 第二次握手&a…
阅读更多...
初识Linux · 传输层协议TCP · 下

初识Linux · 传输层协议TCP · 下

目录 前言&#xff1a; 滑动窗口和流量控制机制 流量控制 滑动窗口 1.滑动窗口如何移动 2.滑动窗口的大小如何变化的 3.如果发生了丢包如何解决&#xff08;快重传&#xff09; 拥塞控制 延迟应答 面向字节流 RST PSH URG 什么是 PSH&#xff1f; 什么是 URG&…
阅读更多...
什么是分布式光伏系统？屋顶分布式光伏如何并网？

什么是分布式光伏系统？屋顶分布式光伏如何并网？

政策窗口倒计时&#xff01;分布式光伏如何破局而立&#xff1f; 2025年&#xff0c;中国分布式光伏行业迎来关键转折&#xff1a; ▸ "430"落幕——抢装潮收官&#xff0c;但考验才刚开始&#xff1b; ▸ "531"生死线——新增项目全面市场化交易启动&…
阅读更多...
完整进行一次共线性分析

完整进行一次共线性分析

&#xff08;随便找个基因家族&#xff09; 1.数据收集 使用水稻、拟南芥、玉米三种作物进行示例 可以直接去ensemble去找最标准的基因组fasta文件和gff文件。 2.预处理数据 这里对于fasta和gff数据看情况要不要过滤掉线粒体叶绿体的基因&#xff0c;数据差异非常大&#…
阅读更多...
RabbitMQ--基础篇

RabbitMQ--基础篇

RabbitMQ 简介&#xff1a;RabbitMQ 是一种开源的消息队列中间件&#xff0c;你可以把它想象成一个高效的“邮局”。它专门负责在不同应用程序之间传递消息&#xff0c;让系统各部分能松耦合地协作 优势&#xff1a; 异步处理&#xff1a;比如用户注册后&#xff0c;主程序将发…
阅读更多...
Quorum协议原理与应用详解

Quorum协议原理与应用详解

一、Quorum 协议核心原理 基本定义 Quorum 是一种基于 读写投票机制 的分布式一致性协议&#xff0c;通过权衡一致性&#xff08;C&#xff09;与可用性&#xff08;A&#xff09;实现数据冗余和最终一致性。其核心规则为&#xff1a; W&#xff08;写成功副本数&#xff09; …
阅读更多...
vue搭建+element引入

vue搭建+element引入

vue搭建element 在使用Vue.js开发项目时&#xff0c;经常会选择使用Element UI作为UI框架&#xff0c;因为它提供了丰富的组件和良好的设计&#xff0c;可以大大提高开发效率。以下是如何在Vue项目中集成Element UI的步骤&#xff1a; 1. 创建Vue项目 如果你还没有创建Vue项…
阅读更多...
食物数据分析系统vue+flask

食物数据分析系统vue+flask

食物数据分析系统 项目概述 食物数据分析系统是一个集食物营养成分查询、对比分析和数据可视化于一体的Web应用。系统采用前后端分离架构&#xff0c;为用户提供食物营养信息检索、食物对比和营养分析等功能&#xff0c;帮助用户了解食物的营养成分&#xff0c;做出更健康的饮…
阅读更多...
SPDK NVMe of RDMA 部署

SPDK NVMe of RDMA 部署

使用SPDK NVMe of RDMA 实现多NVMe设备共享 一、编译、安装spdk 1.1、下载 1.1.1 下载spdk源码 首先&#xff0c;我们需要从GitHub上克隆SPDK的源码仓库。打开终端&#xff0c;输入以下命令&#xff1a; git clone -b v22.01 https://github.com/spdk/spdk.git cd spdk1.1.2…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023