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

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

创建ArkTS工程

  1. 若首次打开DevEco Studio，请点击Create Project创建工程。如果已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。

  2. 选择Application应用开发（本文以应用开发为例，Atomic Service对应为元服务开发），选择模板“Empty Ability”，点击Next进行下一步配置。

    点击放大

  3. 进入配置工程界面，Compile SDK选择“3.0.0(API 8)”（Compile SDK选择“3.1.0(API 9)”时注意同步选择 Model 为“FA”，此处以选择“3.0.0(API 8)”为例），Language选择“ArkTS”其他参数保持默认设置即可。

    点击放大

    说明

    DevEco Studio V3.0 Beta3及更高版本支持使用ArkTS低代码开发方式。

    低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。

    如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。

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

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

img

  • entry：HarmonyOS工程模块，编译构建生成一个HAP包。
    • src > main > ets：用于存放ets源码。
    • src > main > ets > MainAbility：应用/服务的入口。
    • src > main > ets > MainAbility > pages：MainAbility包含的页面。
    • src > main > ets > MainAbility > pages > index.ets：pages列表中的第一个页面，即应用的首页入口。
    • src > main > ets > MainAbility > app.ets：承载Ability生命周期。
    • src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
    • src > main > config.json：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见应用配置文件（FA模型）。
    • build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。其中targets中可配置当前运行环境，默认为HarmonyOS。
    • hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
  • build-profile.json5：应用级配置信息，包括签名、产品配置等。
  • hvigorfile.ts：应用级编译构建任务脚本。

构建第一个页面

  1. 使用文本组件。

    工程同步完成后，在“Project”窗口，点击“entry > src > main > ets > MainAbility > 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%')}
}

  2. 添加按钮。

    在默认页面基础上，我们添加一个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%')}
}

  3. 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：

    img

构建第二个页面

  1. 创建第二个页面。

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

      img

      说明

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

    • 配置第二个页面的路由。在config.json文件中的“module - js - pages”下配置第二个页面的路由“pages/second”。示例如下：

      {"module": {"js": [{"pages": ["pages/index","pages/second"]}]}
}

  2. 添加文本及按钮。

    参照第一个页面，在第二个页面添加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(() => {router.push({ url: 'pages/second' })// 若为API 9工程，则可使用以下接口// router.pushUrl({ url: 'pages/second' })})}.width('100%')}.height('100%')}
}

  2. 第二个页面返回到第一个页面。

    在第二个页面中，返回按钮绑定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(() => {router.back()})}.width('100%')}.height('100%')}
}

  3. 打开index.ets文件，点击预览器中的img按钮进行刷新。效果如下图所示：

    img

使用真机运行应用

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

  1. 将搭载HarmonyOS系统的真机与电脑连接。具体指导及要求，可查看使用本地真机运行应用/服务。

  2. 点击File > Project Structure… > Project > SigningConfigs界面勾选“Support HarmonyOS”和“Automatically generate signature”，点击界面提示的“Sign In”，使用华为帐号登录。等待自动签名完成后，点击“OK”即可。如下图所示：

    点击放大

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

tructure…** > Project > SigningConfigs界面勾选“Support HarmonyOS”和“Automatically generate signature”，点击界面提示的“Sign In”，使用华为帐号登录。等待自动签名完成后，点击“OK”即可。如下图所示：

  1. 在编辑窗口右上角的工具栏，点击[外链图片转存中…(img-JnJhwpFm-1703293672791)]按钮运行。效果如下图所示：

    点击放大

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

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

相关文章

十三、W5100S/W5500+RP2040之MicroPython开发＜MQTT新版OneNET示例＞

十三、W5100S/W5500+RP2040之MicroPython开发＜MQTT新版OneNET示例＞

文章目录 1. 前言2. 平台操作流程3. WIZnet以太网芯片4. 示例讲解以及使用4.1 程序流程图4.2 测试准备4.3 连接方式4.4 相关代码4.5 烧录验证 5. 注意事项6. 相关链接 1. 前言 在这个智能硬件和物联网时代，MicroPython和树莓派PICO正以其独特的优势引领着嵌入式开发…
阅读更多...
【SpringBoot】之Security集成使用（入门级）

【SpringBoot】之Security集成使用（入门级）

🎉🎉欢迎来到我的CSDN主页！🎉🎉 🏅我是君易--鑨，一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的博客专栏《SpringBoot开发之Security系列》。&#x1f3af…
阅读更多...
【SpringBoot】之Security进阶使用

【SpringBoot】之Security进阶使用

🎉🎉欢迎来到我的CSDN主页！🎉🎉 🏅我是君易--鑨，一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的博客专栏《SpringBoot开发之Security系列》。&#x1f3af…
阅读更多...
k8s启动docker容器Error: Could not find or load main class ${start-class}报错

k8s启动docker容器Error: Could not find or load main class ${start-class}报错

前行提要： 今天部署采集点服务（docker项目）发现报这个错误。 提出假设： 1，配置文件错误（工程需要配置的东西比较多） 之后开始一一排查，发现配置有问题，但是不是这个错误…
阅读更多...
modbus_tcp的实现 through python.

modbus_tcp的实现 through python.

0.引言 当前科技似乎处于加速发展期，各个模块都在快速迭代，迭代的速度会让既有的一些经验产生问题，在用python实现modbus_tcp协议时，网上流传的一些代码中import语句会出现问题。导致pymodbus模块用起来很不好用。 这个原因出在…
阅读更多...
【ps】常见工具说明

【ps】常见工具说明

1：污点修复工具 》内容识别 去除脸部珍珠 》创建纹理 2：修复画笔工具 按住ALT选择一处你想移动的地方 3：修补工具 》内容识别 选择一个区域 将区域内的东西移动到 另一处皮肤上
阅读更多...
C语言之字符串

C语言之字符串

目录 字符串字面量 ​编辑 字符串字面量的长度 ◆具有静态生命周期 ◆对于同一个字符串字面量的处理方式依赖于编译器 字符串 字符数组的初始化赋值 空字符串 字符串的读取 在前面的学习中就会发现，仅仅能用一个字符表示的事物少之又少，对于地…
阅读更多...
日志服务 SLS 深度解析：拥抱云原生和 AI，基于 SLS 的可观测分析创新

日志服务 SLS 深度解析：拥抱云原生和 AI，基于 SLS 的可观测分析创新

云布道师 10 月 31 日，杭州云栖大会上，日志服务 SLS 研发负责人简志和产品经理孟威等人发表了《日志服务 SLS 深度解析：拥抱云原生和 AI，基于 SLS 的可观测分析创新》的主题演讲，对阿里云日志服务 SLS 产品服务创新以…
阅读更多...
2023/12/21作业

2023/12/21作业

思维导图 代码 .text .global _start _start: 灯1 gpio时钟使能 [4]->1 0x5000A28 LDR R0,0x50000A28 指定寄存器地址 LDR R1,[R0]将寄存器取出放到R1 ORR R1,R1,#(0x1<<4)将第四位设置为1 STR R1,[R0]读取R0寄存器到R1 PE…
阅读更多...
Ubuntu 常用命令之 reboot 命令用法介绍

Ubuntu 常用命令之 reboot 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 reboot命令在Ubuntu系统中用于重新启动系统。这个命令通常需要管理员权限才能执行。 reboot命令的参数如下 -f 或 --force&#xff1a;强制重启&#xff0c;不调用shutdown -r进行友好重启。-p 或 --poweroff&#xff1a;在重启…
阅读更多...
arm和x86架构服务器拉取arm64架构的docker镜像

arm和x86架构服务器拉取arm64架构的docker镜像

dockerhub提供的镜像部分支持arm64架构 Docker arm架构服务器拉取docker镜像&#xff0c;默认是arm架构 # docker pull centos Using default tag: latest latest: Pulling from library/centos 52f9ef134af7: Pull complete Digest: sha256:a27fd8080b517143cbbbab9dfb7c8…
阅读更多...
HarmonyOS布局之scroll

HarmonyOS布局之scroll

对于Scroll 布局官方讲解非常好&#xff0c;我在这做个总结&#xff0c;主要结合实际应用进行补充 Scroll — 首先他是一个容器布局&#xff0c;所有的容器布局都可包含子布局&#xff0c;因此scroll 布局也可包含子组件但是&#xff08;他只能包含一个子组件&#xff09;&…
阅读更多...
nodejs微信小程序＋python＋PHP医院挂号系统-计算机毕业设计推荐

nodejs微信小程序＋python＋PHP医院挂号系统-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…
阅读更多...
0基础学习VR全景平台篇第130篇：曝光三要素—感光度

0基础学习VR全景平台篇第130篇：曝光三要素—感光度

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 众所周知&#xff0c;摄影是一门用光的艺术。随着天气、地点、时间的变化&#xff0c;我们所处环境的光线也随之发生改变。而在不同的环境下该如何去正确的调节曝光&#xff0c;是…
阅读更多...
PyTorch加载数据以及Tensorboard的使用

PyTorch加载数据以及Tensorboard的使用

一、PyTorch加载数据初认识 Dataset:提供一种方式去获取数据及其label 如何获取每一个数据及其label 总共有多少的数据 Dataloader:为后面的网络提供不同的数据形式 数据集 在编译器中导入Dataset from torch.utils.data import Dataset 可以在jupyter中查看Dataset官方文档&…
阅读更多...
confluence操作手册

confluence操作手册

文章目录 快捷键插入宏插入代码块 自动为标题编号使用方法&#xff1a; 移动页面到其它目录层级下 快捷键 插入宏 英文输入法下输入{ 插入代码块 输入三个会跳出 点编辑可以调整样式 自动为标题编号 安装插件Numbered Headings 下载链接&#xff1a;https://appfire.…
阅读更多...
微服务 Spring Cloud 10，如何追踪微服务调用？服务治理的常见手段

微服务 Spring Cloud 10，如何追踪微服务调用？服务治理的常见手段

目录 一、服务追踪的作用1、优化系统瓶颈2、优化链路调用3、故障排查4、性能优化5、生成网络拓扑图4、透明传输数据 二、节点管理1、服务调用失败一般有两类原因造成&#xff1a;2、服务调用失败的解决方式&#xff1a;3、服务调用失败的具体解决方式&#xff1a; 三、负载均衡…
阅读更多...
ansible的控制语句

ansible的控制语句

本章内容主要介绍 playbook 中的控制语句 使用when判断语句block-rescue判断循环语句 一个play中可以包含多个task&#xff0c;如果不想所有的task全部执行&#xff0c;可以设置只有满足某个条件才执行这个task&#xff0c;不满足条件则不执行此task。本章主要讲解when 和 blo…
阅读更多...
Epson爱普生手臂机器人与PC通讯 C#

Epson爱普生手臂机器人与PC通讯 C#

一、Epson手臂配置 1.安装Epson手臂控制软件 安装Epson手臂控制软体EPSON RC+ 7.0（根据实际需求下载应用），可以去官网下载安装。 2.硬件配置 准备一台PC，用网线连接PC和EPSON手臂控制器。 3.在PC上修改IP地址 EPSON手臂默认IP（192.168.0.1），PC IP改为手臂同一网段…
阅读更多...
XML简介 (EXtensible Markup Language)

XML简介 (EXtensible Markup Language)

XML简介 (EXtensible Markup Language) 可扩展标记语言 特点 XML与操作系统、编程语言的开发平台无关实现不同系统之间的数据交换 作用 数据交互配置应用程序和网站Ajax基石 XML标签 XML文档内容由一系列标签元素组成 <元素名 属性名"属性值">元素内容&l…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023