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. ……

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Intel Quartus II IP之DP1.4 工程的创建与使用

前述: Win10电脑安装了Quartus 21.4,这可以满足绝大多数工程,特别是对于简单调用fifo/ram等的工程,但是想要学习Quartus的HDMI/DP等高速接口类IP,首先需要创建HDMI/DP IP的设计demo工程,此时还需要安装Ecl…

android studio从空白开始

对我来说,真正的第一步是清理电脑C盘。从剩余8G清理到25G,把原来看不顺眼又不敢删的文件夹和软件全删了,删爽了的后果就是,用两天的时间在把一些环境配置慢慢装回来,node.js,jdk,npm。努力把它们…

SG3225HBN(晶体振荡器)

SG3225HBN晶体振荡器是一款低抖动、HCSL输出晶振,频率范围100MHz ~ 325MHz,3.2 2.5 1.05mm封装常规有源晶振,具有小尺寸,高稳定性,可以在G:-40℃至 85℃,H:-40℃至 105℃ 的温度内…

网页版短信平台主要功能有哪些|短信系统开发搭建源码

网页版短信平台主要功能有哪些|短信系统开发搭建源码 网页版短信平台是一种方便用户进行在线短信管理和发送的工具。它具有多项实用的功能,使用户能够更高效地进行短信通讯。以下是网页版短信平台的主要功能: 1. **短信发送和接收:** 用户可…

linux第一个小程序 --- 进度条【简洁】

行缓冲区的概念 结果:先输入hello world然后休眠三秒后结束 当去掉’\n“ 后,结果就变成了先休眠三秒,然后打印hello world后结束。 该现象就证明了缓冲区的存在。 当缓冲区中遇到’‘\n’或者缓冲区被写满后才会被打印出来,在第…

vue2项目导入高德地图

1、看官网新手入门链接导入原生高德地图: 展示地图-入门教程-地图 JS API 2.0 | 高德地图API 2、uniapp开发h5,使用map组件,使用高德地图: 在配置文件中配置地图为高德,(默认使用的是腾讯)&am…

港科夜闻|香港科大团队研发多功能,可重构和抗破坏单线感测器阵列

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大团队研发多功能、可重构和抗破坏单线感测器阵列。研究人员开发出一种受人类听觉系统启发的感测器阵列设计技术。透过模仿人耳根据音位分布来区分声音的能力,这种新型感测器阵列方法可能优化感测器阵列…

SpringBoot-基础篇

学了好久springBoot但是每一次使用都没有一个固定的方法或者是代码的模版,于是乎使用的时候吗,每次都会遇到很多的问题,所以,总结一篇博客用于日后方便自己开发使用,其中包含项目创建,坐标导入,…

一篇综述洞悉医学大型语言模型的原理,应用和挑战

在过去的一年中,随着 GPT-4、LLaMA、Mistral,PaLM 等先进技术的突飞猛进,大型语言模型(Large Language Models)已经引领全球人工智能进入了一个全新的基础模型时代,这一时代不仅开启了技术创新的新篇章&…

[足式机器人]Part2 Dr. CAN学习笔记- Kalman Filter卡尔曼滤波器Ch05-5+6

本文仅供学习使用 本文参考: B站:DR_CAN Dr. CAN学习笔记 - Kalman Filter卡尔曼滤波器 Ch05-56 5. An Example 2D例子6. Extended Kalman Filter扩展卡尔曼滤波器(EKF) 5. An Example 2D例子 6. Extended Kalman Filter扩展卡尔曼…

postman测试文件上传接口设置说明

Postman介绍及下载链接地址 Download Postman | Get Started for Free 打开postman 选择POST方法,然后设置goform 设置Header参数 设置Body参数,选择数据form-data 添加文件, 选择为文件属性 添加需要上传的文件

Electron Apple SignIn 登录

本人写博客,向来主张:代码要完整,代码可运行,文中不留下任何疑惑。 最讨厌写博客,代码只留下片段,文中关键的东西没写清楚。之前看了那么多文章,就是不告诉我clientId从哪来的。 官方资料地址&…

c++学习笔记-STL案例-机房预约系统4-管理员模块

前言 衔接上一篇“c学习笔记-STL案例-机房预约系统3-登录模块”,本文主要设计管理员模块,从管理员登录和注销、添加账号、显示账号、查看机房、清空预约五个功能进行分析和实现。 目录 7 管理员模块 7.1 管理员登录和注销 7.1.1 构造函数 ​编辑7.1.2…

【算法】队列+bfs算法 解决树的相关算法题(C++)

文章目录 1. 前言2. 算法题429.N叉树的层序遍历103.二叉树的锯齿形层序遍历662.二叉树最大宽度515.在每个树行中找最大值 1. 前言 队列 与 宽度优先算法(BFS)是解决很多算法问题的常见工具。 BFS通过逐层遍历图或树的节点来寻找解决问题的最短路径或最…

画图案例分享

案例 1 from scipy.misc import derivative from scipy.integrate import quad import matplotlib.pyplot as plt import numpy as np import pandas as pd from scipy.stats import norm import warningsplt.style.use(ggplot) np.random.seed(37) warnings.filterwarnings(i…

《Linux C编程实战》笔记:出错处理

这一节书上把它放到线程这一章,按理说应该在前面就讲了 头文件errno.h定义了变量errno,它存储了错误发生时的错误码,通过错误码可以得到错误的信息 程序开始执行时,变量errno被初始化为0。很多库函数在执行过程中遇到错误时就会…

排序算法9----计数排序(C)

计数排序是一种非比较排序,不比较大小 。 1、思想 计数排序又称为鸽巢原理,是对哈希直接定址法的变形应用。 2、步骤 1、统计数据:统计每个数据出现了多少次。(建立一个count数组,范围从[MIN,MAX],MAX代表arr中…

关于gltf模型格式文件的学习

目录 glTF模型 小黄鸭的gltf模型 字段分析 scene nodes meshes primitives attributes indices mode material accessors bufferView byteOffset count componentType type materials textures images samplers magFilter与minFilter wrapS与wrapT 进行…

10个用于Android开发的有用的Kotlin库及示例

10个用于Android开发的有用的Kotlin库及示例 在Android开发领域,Kotlin已成为一门领先的语言,带来了现代语法和功能的浪潮。随着Kotlin的崛起,涌现出了许多专为其定制的库,进一步增强了开发体验。本文将深入介绍其中的10个库&…

2024年美赛数学建模思路 - 案例:异常检测

文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 建模资料 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常…