鸿蒙前端开发-构建第一个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模型）

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

  1. 添加按钮。

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

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

构建第二个页面

  1. 创建第二个页面。

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

      说明

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

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

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

  1. 添加文本及按钮。

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

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

    在第二个页面中，返回按钮绑定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%')}
}

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

使用真机运行应用

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

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

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

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

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

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

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

相关文章

docker-compose安装教程

docker-compose安装教程

1.确认docker-compose是否安装 docker-compose -v如上图所示表示未安装，需要安装。 如上图所示表示已经安装，不需要再安装，如果觉得版本低想升级，也可以继续安装。 2.离线安装 下载docker-compose安装包，上传到服务…
阅读更多...
uniapp小程序分享为灰色

uniapp小程序分享为灰色

引用：https://www.cnblogs.com/panwudi/p/17074172.html uniapp开发的微信小程序，没有转发，分享： 创建一个mixin:common/share.js export default {onShareAppMessage(res) { //发送给朋友return {}},onShareTimeline(res) {//…
阅读更多...
人工智能原理复习--机器学习

人工智能原理复习--机器学习

文章目录 上一篇机器学习概述归纳(示例)学习ID3决策树算法K近邻算法下一篇 上一篇 人工智能原理复习–搜索策略（二） 机器学习概述 学习系统的基本结构： #mermaid-svg-JMjIZHjVOirLolvu {font-family:"trebuchet ms",verdana,ari…
阅读更多...
辨析旅行商问题(TSP)与车辆路径问题(VRP)

辨析旅行商问题(TSP)与车辆路径问题(VRP)

目录 前言旅行商问题 (TSP)问题介绍数学模型符号定义问题输入约束条件目标函数问题输出 解的空间解空间大小计算解释 车辆路径问题 (VRP)问题介绍TSP到VRP的过渡数学模型符号定义问题输入约束条件优化目标问题输出 解空间特殊情况一般情况 TSP 与 VRP 对比 前言 计划是通过本文…
阅读更多...
基于JavaWeb+SSM+Vue助农扶贫微信小程序系统的设计和实现

基于JavaWeb+SSM+Vue助农扶贫微信小程序系统的设计和实现

基于JavaWebSSMVue助农扶贫微信小程序系统的设计和实现 源码获取入口Lun文目录前言主要技术系统设计功能截图 源码获取入口 Lun文目录 目 录 第一章 绪论 1 1.1 研究背景 1 1.2 研究意义 1 1.3 研究内容 2 第二章 开发环境与技术 3 2.1 JSP技术 3 2.2 MySQL数据库 3 2.3 Java…
阅读更多...
基于Solr的全文检索系统的实现与应用

基于Solr的全文检索系统的实现与应用

文章目录 一、概念1、什么是Solr2、与Lucene的比较区别1）Lucene2）Solr 二、Solr的安装与配置1、Solr的下载2、Solr的文件夹结构3、运行环境4、Solr整合tomcat1）Solr Home与SolrCore2）整合步骤 5、Solr管理后台1）Dashbo…
阅读更多...
4-Docker命令之docker commit

4-Docker命令之docker commit

1.docker commit介绍 docker commit命令是用于根据docker容器的改变创建一个新的docker镜像 2.docker commit用法 docker commit [参数] container [repository[:tag]] [rootcentos79 ~]# docker commit --helpUsage: docker commit [OPTIONS] CONTAINER [REPOSITORY[:TAG…
阅读更多...
微服务学习:Nacos配置中心

微服务学习:Nacos配置中心

先打开Nacos（详见微服务学习：Nacos微服务架构中的服务注册、服务发现和动态配置&Nacos下载） 1.环境隔离： 新建命名空间： 记住命名空间ID： c82496fb-237f-47f7-91ed-288a53a63324 再配置 就可达成环…
阅读更多...
vue3 创建过程中 运行npm create vue@latest 和 npm install卡住不动的解决方法之一

vue3 创建过程中 运行npm create vue@latest 和 npm install卡住不动的解决方法之一

问题：npm create vuelatest、和npm install 不管是电脑cmd上还是vscode终端上都是卡很久或不动！ 解决： 1、查看npm代理 npm config get registry2、更换npm镜像 npm config set registryhttps://registry.npmmirror.com这里换成淘宝源好像…
阅读更多...
学习 Vue 3 源码

学习 Vue 3 源码

Vue 3 是一款流行的前端框架，它的数据代理和虚拟 DOM 实现是其核心功能之一 Vue 3 的数据代理 在 Vue 3 中，数据代理是指将组件实例的属性代理到其内部状态对象上。这使得开发者可以使用更便捷的方式来访问和修改组件的状态。 Vue 3 的数据代理实现主…
阅读更多...
docker-centos中基于keepalived+niginx模拟主从热备完整过程

docker-centos中基于keepalived+niginx模拟主从热备完整过程

文章目录 一、环境准备二、主机1、环境搭建1.1 镜像拉取1.2 创建网桥1.3 启动容器1.4 配置镜像源1.5 下载工具包1.6 下载keepalived1.7 下载nginx 2、配置2.1 配置keepalived2.2 配置nginx2.2.1 查看nginx.conf2.2.2 修改index.html 3、启动3.1 启动nginx3.2 启动keepalived 4、…
阅读更多...
【HarmonyOS开发】控件开发过程中，知识点记录

【HarmonyOS开发】控件开发过程中，知识点记录

1、问题记录及解决方案 1.1 资源（Icon&i18n）问题 控件：只有一个JS文件，不会将任何资源型文件（图片、字体、默认文字等）打包到SO中。因此，当我们开发控件时，需要将需要使用到的资…
阅读更多...
【机器学习】042_迁移学习

【机器学习】042_迁移学习

一、概述、定义 目的： 迁移学习的目的是将某个领域或任务上学习到的模式、知识应用到不同但相关的领域里，获取更多数据，而不必投入许多时间人力来进行数据的标注。 举例： 已经会下中国象棋，就可以类比着来学习国际…
阅读更多...
Java单元测试：JUnit和Mockito的使用指南

Java单元测试：JUnit和Mockito的使用指南

引言： 在软件开发过程中，单元测试是一项非常重要的工作。通过单元测试，我们可以验证代码的正确性、稳定性和可维护性，帮助我们提高代码质量和开发效率。本文将介绍Java中两个常用的单元测试框架：JUnit和Mockito&#x…
阅读更多...
Navicat连接Oracle数据库

Navicat连接Oracle数据库

Navicat连接Oracle数据库 打开服务里面找到Oracle服务 OracleServerXE或者OracleServerTTL 创建数据库连接 连接名默认自己起 主机选择本地 端口默认 服务名在服务中可以找到输入后缀 用户名默认都是system 密码是创建oracle时候填写的口令 点击测试连接即可
阅读更多...
Spring Boot中的事务是如何实现的？懂吗？

Spring Boot中的事务是如何实现的？懂吗？

SpringBoot中的事务管理，用得好，能确保数据的一致性和完整性；用得不好，可能会给性能带来不小的影响哦。 基本使用 在SpringBoot中，事务的使用非常简洁。首先，得感谢Spring框架提供的Transactional注解&am…
阅读更多...
【金融数据分析】计算沪深300指数行业权重分布并用饼图展示

【金融数据分析】计算沪深300指数行业权重分布并用饼图展示

前言 前面的文章我们已经介绍了如何获取沪深300成分股所述行业以及权重的数据，想要了解这部分内容的小伙伴可以阅读上一篇文章 springbootjdbcTemplatesqlite编程示例——以沪深300成分股数据处理为例-CSDN博客 那么有了上文获取的数据，我们实际上可以…
阅读更多...
【rabbitMQ】rabbitMQ控制台模拟收发消息

【rabbitMQ】rabbitMQ控制台模拟收发消息

目录 1.新建队列 2.交换机绑定队列 3.查看消息是否到达队列 总结： 1.新建队列 2.交换机绑定队列 点击amq.fonout 3.查看消息是否到达队列 总结： 生产者（publisher）发送消息，先到达交换机，再到队列&…
阅读更多...
微信小程序uni-app：常用Form表单组件使用示例

微信小程序uni-app：常用Form表单组件使用示例

目录 input 输入框picker 选择器 input 输入框 https://developers.weixin.qq.com/miniprogram/dev/component/input.htmlhttps://uniapp.dcloud.net.cn/component/input.html <inputclass"input-class"type"text"v-model"value"placeholde…
阅读更多...
Linux下文本三剑客:grep、awk、sed之对比

Linux下文本三剑客:grep、awk、sed之对比

一、grep 主要用于搜索某些字符串&#xff1b;sed、awk 用于处理文本&#xff1a; grep基本是以行为单位处理文本的&#xff1b; 而awk可以做更细分的处理&#xff0c;通过指定分隔符将一行&#xff08;一条记录&#xff09;划分为多个字段&#xff0c;以字段为单位处理文本。…
阅读更多...
最新文章

Copyright @ 2022~2023