HarmonyOS—构建第一个ArkTS应用(Stage模型)

创建ArkTS工程

构建第一个页面

  1. 若首次打开DevEco Studio,请点击Create Project创建工程。如果已经打开了一个工程,请在菜单栏选择File > New > Create Project来创建一个新工程。
  2. 选择Application应用开发,选择模板“Empty Ability”,点击Next进行下一步配置。

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

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

    ArkTS工程目录结构(Stage模型)

  3. AppScope > app.json5:应用的全局配置信息。
  4. entry:HarmonyOS工程模块,编译构建生成一个HAP包。
  5. src > main > ets:用于存放ArkTS源码。
  6. src > main > ets > entryability:应用/服务的入口。
  7. src > main > ets > pages:应用/服务包含的页面。
  8. 使用文本组件。
  9. 工程同步完成后,在“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%')}
    }

    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,打开预览器。第一个页面效果如下图所示:

    构建第二个页面

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

    配置第二个页面的路由。在“Project”窗口,打开“entry > src > main > resources > base > profile”,在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下:

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

    添加文本及按钮。

    参照第一个页面,在第二个页面添加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%')}
    }

    实现页面间的跳转

    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%')}
    }

    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(() => {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%')}
    }

    3.打开“Index.ets”文件,点击预览器中的

    按钮进行刷新。效果如下图所示:

    使用真机运行应用

    运行HarmonyOS应用可以使用远程模拟器和物理真机设备,区别在于使用远程模拟器运行应用不需要对应用进行签名。

    1.将搭载HarmonyOS系统的真机与电脑连接。

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

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

    恭喜您已经使用ArkTS语言开发(Stage模型)完成了第一个HarmonyOS应用,快来探索更多的HarmonyOS功能吧。

    想学习更多华为鸿蒙HarmonyOS开发知识,在这里我为大家准备了华为鸿蒙HarmonyOS开发者资料大全,大家可以自行点击链接领取:《做鸿蒙应用开发到底学习些啥?》

    其次就是考虑到市场上还没有系统性的学习资料,同时我也整理了一份《鸿蒙 (Harmony OS)开发学习手册》特意整理成PDF文档方式,分享给大家参考学习,大家可以根据自身情况进行获取:《鸿蒙基础入门开发宝典!》

    《鸿蒙 (Harmony OS)开发学习手册》

    一、入门必看

    1. 应用开发导读(ArkTS)

    2. 应用开发导读(Java)

    3.......

    二、HarmonyOS 概念

    1. 系统定义

    2. 技术架构

    3. 技术特性

    4. 系统安全

    5......

    三、如何快速入门?《鸿蒙基础入门开发宝典!》

    1. 基本概念

    2. 构建第一个ArkTS应用

    3. 构建第一个JS应用

    4. ……

    四、开发基础知识

    1. 应用基础知识

    2. 配置文件

    3. 应用数据管理

    4. 应用安全管理

    5. 应用隐私保护

    6. 三方应用调用管控机制

    7. 资源分类与访问

    8. 学习ArkTS语言

    9. ……

    五、基于ArkTS 开发

    1. Ability开发

    2. UI开发

    3. 公共事件与通知

    4. 窗口管理

    5. 媒体

    6. 安全

    7. 网络与链接

    8. 电话服务

    9. 数据管理

    10. 后台任务(Background Task)管理

    11. 设备管理

    12. 设备使用信息统计

    13. DFX

    14. 国际化开发

    15. 折叠屏系列

    16. ……

    更多了解更多鸿蒙开发的相关知识可以参考:《做鸿蒙应用开发到底学习些啥?》

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

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

相关文章

Tensorflow2.0笔记 - 基础数学运算

本笔记主要记录基于元素操作的,-,*,/,//,%,**,log,exp等运算,矩阵乘法运算,多维tensor乘法相关运算 import tensorflow as tf import numpy as nptf.__version__#element-wise运算,对应元素的,-,*,/,**,//,% tensor1 tf.fill([3,3], 4) ten…

Plane Geometry (Junior High School)

初中平面几何, ACBD, ∠CAD60,∠C40,求∠B Vertical Calculation-CSDN博客 Rectangular Area-CSDN博客

SpringMVC入门案例

引言 Spring MVC是一个基于MVC架构的Web框架,它的主要作用是帮助开发者构建Web应用程序。它提供了一个强大的模型驱动的开发方式,可以帮助开发者实现Web应用程序的各种功能,如请求处理、数据绑定、视图渲染、异常处理等。 开发步骤 1.创建we…

大师学SwiftUI第6章 - 声明式用户界面 Part 4

步进器视图 ​​Stepper​​视图创建一个带递增和递减按钮的控件。该结构体提供了多个初始化方法,包含不同的配置参数组合。以下是最常用的一部分。 Stepper(String, value: Binding, in: Range, step: Float, onEditingChanged: Closure):此初始化方法…

【树莓派】网线远程连接电脑和树莓派,实现SSH连接

目录 1、硬件连接; 2、电脑端: 3、查找树莓派的IP地址 4、开启树莓派的SSH接口 5、putty 6、命令行 参考文章 通过网线连接笔记本与树莓派 开启SSH和VNC功能 无显示器安装树莓派 实现:打开putty输入树莓派地址使用ssh方式登陆&…

Vue 2生命周期已达终点,正式结束使命

Vue.js是一款流行的JavaScript框架,拥有广泛的应用和开发者社区。自Vue.js 2发布以来,它在前端开发中扮演了重要角色,并且被广泛采用。然而,技术的发展是无法阻挡的,随着2024年的到来,Vue 2的生命周期也走到…

基于深度学习的时间序列算法总结

1.概述 深度学习方法是一种利用神经网络模型进行高级模式识别和自动特征提取的机器学习方法,近年来在时序预测领域取得了很好的成果。常用的深度学习模型包括循环神经网络(RNN)、长短时记忆网络(LSTM)、门控循环单元&a…

华为设备NAT的配置

实现内网外网地址转换 静态转换 AR1: sys int g0/0/0 ip add 192.168.10.254 24 int g0/0/1 ip add 22.33.44.55 24 //静态转换 nat static global 22.33.44.56 inside 192.168.10.1 动态转换 最多有两台主机同时访问外网 AR1: sys int g0/0/0 ip add…

44.5K Star,简单易用自动化运维监控工具

Hi,骚年,我是大 G,公众号「GitHub指北」会推荐 GitHub 上有趣有用的项目,一分钟 get 一个优秀的开源项目,挖掘开源的价值,欢迎关注。 今天介绍一个开源的自动化运维监控工具,它是一个轻量的开源…

【Ant Design of Vue】Modal.confirm无法关闭的bug

一、问题 在使用 Ant Design Vue 的 Modal.confirm 确认框时&#xff0c;出现了点击取消和确定后 Modal.confirm 确认框无法关闭的问题 二、代码 代码完全是 copy 的官网的代码&#xff0c;但是 copy 到本地后就会出现上述问题 <template><a-button click"sho…

Unity3D代码混淆方案详解

背景 Unity引擎使用Mono运行时&#xff0c;而C#语言易受反编译影响&#xff0c;存在代码泄露风险。本文通过《QQ乐团》项目实践&#xff0c;提出一种适用于Unity引擎的代码混淆方案&#xff0c;以保护代码逻辑。 引言 在Unity引擎下&#xff0c;为了防止代码被轻易反编译&a…

基于LLM大模型的结构化数据批量提取

在当今世界&#xff0c;越来越多的组织致力于数据驱动的决策。 然而&#xff0c;他们通常面临着从非结构化文本数据&#xff08;例如客户评论或反馈&#xff09;中提取有价值的见解的挑战。 这篇文章是为想要使用非结构化数据获得有用见解的数据科学家、分析师和决策者量身定制…

【CSP】2023年12月真题练习(更新到202312-2)

试题编号&#xff1a;202312-1试题名称&#xff1a;仓库规划时间限制&#xff1a;1.0s内存限制&#xff1a;512.0MB问题描述&#xff1a; 问题描述 西西艾弗岛上共有 n 个仓库&#xff0c;依次编号为 1⋯n。每个仓库均有一个 m 维向量的位置编码&#xff0c;用来表示仓库间的物…

【探索C++容器:vector的使用和模拟实现】

【本节目标】 1.vector的介绍及使用 2.vector深度剖析及模拟实现 1.vector的介绍及使用 1.1 vector的介绍 vertor文档介绍 1. vector是表示可变大小数组的序列容器。2. 就像数组一样&#xff0c;vector也采用连续存储空间来存储元素。也就是意味着可以采用下标对vector的元…

【控制篇 / 分流】(7.4) ❀ 03. 对国内和国际IP网段访问进行分流 ❀ FortiGate 防火墙

【简介】公司有两条宽带用来上网&#xff0c;一条电信&#xff0c;一条IPLS国际专线&#xff0c;由于IPLS仅有2M&#xff0c;且价格昂贵&#xff0c;领导要求&#xff0c;访问国内IP走电信&#xff0c;国际IP走IPLS&#xff0c;那么应该怎么做&#xff1f; 国内IP地址组 我们已…

4种方法用Python批量实现多Excel多Sheet合并

目录 方法一&#xff1a;使用pandas库 方法二&#xff1a;使用openpyxl库 方法三&#xff1a;使用xlrd和xlwt库 方法四&#xff1a;使用os和glob库 在数据处理中&#xff0c;经常需要将多个Excel文件中的多个工作表进行合并。以下介绍了4种方法&#xff0c;使用Python批量实…

sql中的explain关键字用法

在SQL中&#xff0c;使用EXPLAIN关键字可以获取查询的执行计划&#xff0c;以便进行性能优化和查询调优。执行计划提供了关于查询操作的详细信息&#xff0c;涵盖了多个表头字段&#xff0c;每个字段都提供了特定的信息。以下是explain表头字段解释&#xff1a; id&#xff1…

【NCRE 二级Java语言程序设计04】二级Java考试应用软件使用

目录 前言一、软件介绍和下载1.软件介绍和下载2.下载软件3.下载使用说明和示例教程 二、本地练习环境搭建1.解压启动2.自建Java应用程序3.Hello入门程序 三、NetBeans一般配置1.代码模板2.字体和颜色3.快捷键映射 总结 前言 &#x1f4dc;本专栏主要是分享自己备考全国计算机二…

以某轧钢厂为例浅谈电能管理系统

摘要&#xff1a;结合某轧钢厂的现状和电能管理软件的优势应用&#xff0c;在节能降耗方面利用电能管理软件对轧钢厂电能损耗进行实时监控&#xff0c;为实现能源优化配置和节能降耗管理提供了大量数据&#xff0c;从而为大型能耗企业的节能降耗实施奠定了基础。 关键词&#x…

k8s的对外服务ingress

1、service的作用体现在两个方面 &#xff08;1&#xff09;集群内部&#xff1a;不断跟踪pod的变化&#xff0c;更新deployment中的pod对象&#xff0c;基于pod的ip地址不断变化的一种服务发现机制 &#xff08;2&#xff09;集群外部&#xff1a;类似于负载均衡器&#xff…