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

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

创建ArkTS工程

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

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

    点击放大

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

    点击放大

    说明

    支持使用ArkTS低代码开发方式。

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

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

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

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

img

  • AppScope > app.json5：应用的全局配置信息。
  • entry：HarmonyOS工程模块，编译构建生成一个HAP包。
    • src > main > ets：用于存放ArkTS源码。
    • src > main > ets > entryability：应用/服务的入口。
    • src > main > ets > pages：应用/服务包含的页面。
    • src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
    • src > main > module.json5：Stage模型模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。
    • build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。其中targets中可配置当前运行环境，默认为HarmonyOS。
    • hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
  • oh_modules：用于存放三方库依赖信息。关于原npm工程适配ohpm操作，请参考历史工程迁移。
  • build-profile.json5：应用级配置信息，包括签名、产品配置等。
  • hvigorfile.ts：应用级编译构建任务脚本。

构建第一个页面

  1. 使用文本组件。

    工程同步完成后，在“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，打开预览器。第一个页面效果如下图所示：

    img

构建第二个页面

  1. 创建第二个页面。

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

      img

      说明

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

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

      {"src": ["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(() => {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”文件，点击预览器中的img按钮进行刷新。效果如下图所示：

    img

使用真机运行应用

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

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

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

    点击放大

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

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

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

    点击放大

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

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

相关文章

hyper-v ubuntu 3节点 k8s集群搭建

hyper-v ubuntu 3节点 k8s集群搭建

前奏 搭建一主二从的k8s集群，如图所示，准备3台虚拟机。 不会创建的同学，可以看我上上篇博客：https://blog.csdn.net/dawnto/article/details/135086252 和上篇博客：https://blog.csdn.net/dawnto/article/details/135…
阅读更多...
CRM系统的评价和选择：销售管理功能的标准和案例

CRM系统的评价和选择：销售管理功能的标准和案例

很多企业有各种营销方式，但线索良莠不齐，转化率低，成本高；客户数据分散，没法实时掌握客户动态；营销过程控制不了，销售追踪艰难。各类问题都能通过CRM管理系统去解决。什么是CRM系统呢&#xff1…
阅读更多...
ID重新登录后备忘录内容恢复不全怎么办

ID重新登录后备忘录内容恢复不全怎么办

在这个数字化的时代，手机已经成为了我们生活中不可或缺的一部分。然而，当我们需要在不同的手机或设备上切换账号时，有时会遇到数据丢失的尴尬情况。我就曾经亲身经历过这样的烦恼。 那天，我因为工作需要，不得不退出了…
阅读更多...
从零实现一套低代码（保姆级教程） --- 【3】实现Button组件和画布区的拖拽

从零实现一套低代码（保姆级教程） --- 【3】实现Button组件和画布区的拖拽

摘要 目前是每天更新一篇， 因为我不止要写文章，这些代码也是我正在敲的。可能速度没有那么快，但是这个频率感觉还是可以的。 本篇是这个系列的第三篇，如果你是第一次看到这个文章，那你应该会对低代码有那么一丢丢兴趣…
阅读更多...
【虹科干货】Linux越来越容易受到攻击，怎么防御？

【虹科干货】Linux越来越容易受到攻击，怎么防御？

文章速览： Linux难逃高级网络攻击原因分析 Linux自身原因软件供应链的入口其他防御机制 3. 基于移动目标防御技术的Morphisec Knigt for Linux 在数字化时代，网络安全已成为企业不可忽视的重要议题。尤其是对于依赖Linux服务器的组织，面对日…
阅读更多...
机器视觉：AI赋能缺陷检测，铸就芯片产品的大算力与高能效

机器视觉：AI赋能缺陷检测，铸就芯片产品的大算力与高能效

导言：近年来，国内芯片行业快速发展，市场对芯片需求的不断增大，芯片的缺陷检测压力也越来越大。芯片产品在生产制造过程中，需要经历数道工序，每个生产环节的材料、环境、工艺参数等都有可能造成产品缺陷。不…
阅读更多...
ARM GIC（三） gicv2架构

ARM GIC（三） gicv2架构

ARM的cpu，特别是cortex-A系列的CPU，目前都是多core的cpu，因此对于多core的cpu的中断管理，就不能像单core那样简单去管理，由此arm定义了GICv2架构，来支持多核cpu的中断管理 一、gicv2架构 GICv2，支持最大8个core。其框图如下图所示： 在gicv2中，gic由两个大模块组成： …
阅读更多...
《精通开关电源设计》Sanjaya Manlktala 第二版阅读记录——磁芯尺寸与功率吞吐量

《精通开关电源设计》Sanjaya Manlktala 第二版阅读记录——磁芯尺寸与功率吞吐量

经常，当我们拿到一颗磁芯的时候，我们就像想快速感知到这颗磁芯能做多大功率的电源，或者说这个磁芯能传递多少功率。 这节就可以解决这个问题。 下方的公式有一处笔误，应该是Isw
阅读更多...
2023 英特尔On技术创新大会直播 | AI魅力的生活化

2023 英特尔On技术创新大会直播 | AI魅力的生活化

目录 前言正文 前言 依稀记得去年的直播大会，主要展现了其灵活、加速和半集成化的独特优势，广泛应用于人工智能、5G通信、边缘计算以及视觉图像处理等领域，不断提供领先的性能、能效和可编程性的创新。 如今又带来一些不一样的特色&#xf…
阅读更多...
Open3D (C++) 距离计算

Open3D (C++) 距离计算

目录 一、算法原理1、欧氏距离二、代码实现三、结果展示一、算法原理 1、欧氏距离 在数学中，欧几里得距离或欧几里得度量是欧几里得空间中两点间“普通”（即直线）距离。欧几里得距离有时候有称欧氏距离，在数据分析及挖掘中经常会被使用到，例如聚类或计算相似度。 如果我…
阅读更多...
【AI图片故事】AI设计图片-未来机器人的“智慧”与工人的“情感”

【AI图片故事】AI设计图片-未来机器人的“智慧”与工人的“情感”

让我们走进未来，看智能机器与人工作 在一家汽车制造工厂，AI机器人成为了生产线上的新宠。 它们精准、高效，从不疲倦。 一天，工厂里的老工人老张在与AI机器人合作时，不小心把工具掉在了机器人身上。机器人突然停止…
阅读更多...
android开发使用mavlink协议

android开发使用mavlink协议

一、添加依赖库 在工程的build.gradle添加implementation io.dronefleet.mavlink:mavlink:1.1.11。 点击右上角sync 二、接收解析数据 // This example uses a TCP socket, however we may also use a UDP socket by injecting // PipedInputStream/PipedOutputStream to M…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023