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.hqwc.cn/news/412031.html

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

相关文章

python PyQt5的学习

一、安装与配置 1、环境: python3.7 2、相关模块 pip install pyqt5 pyqt5-tools pyqt5designer 可以加个镜像 -i https://pypi.tuna.tsinghua.edu.cn/simple3、配置设计器 python的pyqt5提供了一个设计器,便于ui的设计 界面是这样的&#xff1a…

redis经典面试题

说说你对Redis的理解 Redis是一个基于Key-Value存储结构的开源内存数据库,也是一种NoSQL数据库。 它支持多种数据类型,包括String、Map、Set、ZSet和List,以满足不同应用场景的需求。 Redis以内存存储和优化的数据结构为基础,提…

adb 配对+无线连接

配对 打开手机开发者选项-无线调试-使用配对码配对设备 出现ip端口和配对码后,电脑输入命令: adb pair ip:端口 eg:adb pair 192.168.137.244:39683 提示输入配对码:就按照手机上的输入。 此时配对成功 连接 再使用命令adb connect ip:port…

【React】组件性能优化、高阶组件

文章目录 React性能优化SCUReact更新机制keys的优化render函数被调用shouldComponentUpdatePureComponentshallowEqual方法高阶组件memo 获取DOM方式refs如何使用refref的类型 受控和非受控组件认识受控组件非受控组件 React的高阶组件认识高阶函数高阶组件的定义应用一 – pro…

Vim命令大全

文章目录 简述:1. **命令模式(Command Mode)**2. **插入模式(Insert Mode)**3. **可视模式(Visual Mode)**4. **末行模式(Ex Mode)** 详细使用案例:1. **文件…

RHCE9学习指南 第21章 用bash写脚本

grep的用法是: grep 关键字 file 意思是从file中过滤出含有关键字的行。 例如,grep root /var/log/messages,意思是从/var/log/messages中过滤出含有root的行。这里很明确的是过滤含有“root”的行。 如果我要是想在/var/log/messages中过滤…

绝地求生:周三不停机维护: 修复BUG,“红面具”天使与恶魔套装上线!

嗨,我是闲游盒~ 本周三没有停机维护,10点退出游戏重新获取一下热更新即可直接进入游戏游玩啦~ *本周不停机维护修复几个问题 * 维护包括以下修复: 修复了与血猎人套装相关的问题修复了烟雾弹的烟雾高度比以前更高的问题修复了在某些游戏模式下&#x…

CSS Day10

10.1 2D位移 属性名:transform 属性值:translateX 水平方向的位移 相对于自身位置移动 translateY 垂直方向的位移 相对于自身位置移动 transform:translate(x,y); 位移和定位搭配使用: position:absolute; top:50%; left:50%; tr…

100天精通鸿蒙从入门到跳槽——第4天:TypeScript 知识储备:变量声明

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通Golang》…

计算机网络-计算机网络的概念 功能 发展阶段 组成 分类

文章目录 计算机网络的概念 功能 发展阶段总览计算机网络的概念计算机网络的功能计算机网络的发展计算机网络的发展-第一阶段计算机网络的发展-第二阶段-第三阶段计算机网络的发展-第三阶段-多层次ISP结构 小结 计算机网络的组成与分类计算机网络的组成计算机网络的分类小结 计…

橘子学Mybatis07之Mybatis关于缓存的设计

很逆天的一件事是,我上一次发mybatis是在2022年10月15号,然后直到今天才开始总结下一篇Mybatis的东西。一年里面忙成那啥了,而且重心都投入在了Elasticsearch的学习上面,基本一年下来都在搞ES,并且考下了ECE认证&#…

记录一下小程序开发遇到的问题。

在开发实名认证的时候,从我的合同页面或则任务详情页面,领取我的任务的地方,没实名的情况,调用第三方平台的接口实名到认证结果页面。有时候进入了认证结果页面,有时候没有进入认证结果页面。这个主要是时间的先后问题…