HarmonyOS开发之ArkTS使用：新建活动页面

目录

目录

引言

关于ArkTS

开发环境准备

新建项目

新建活动页面

编写ArkTS代码

注册页面

运行应用

最后

引言

随着HarmonyOS（鸿蒙操作系统）的不断发展，越来越多的前端开发者投入到这个全新的生态系统中。而在HarmonyOS的开发中，ArkTS作为一种新的声明式UI编程语言，也就是HarmonyOS的声明式UI编程语言，为开发者提供了一种全新的开发体验，尤其是对于前端开发者入手鸿蒙OS开发来说更是如鱼得水。那么本文就来分享如何使用ArkTS新建一个活动页面，并在HarmonyOS应用中进行基本的页面展示。

关于ArkTS

先来详细了解一下ArkTS，其实ArkTS是鸿蒙生态的应用开发语言，它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。而且ArkTS提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。尤其是ArkTS提供了简洁自然的声明式语法、组件化机制、数据-UI自动关联等能力，实现了贴近自然语言，书写效率更高的编程方式，为开发者带来易学、易懂、极简开发的优质体验。

还有就是ArkCompiler运行时在HarmonyOS上提供了Worker API支持并发编程，在运行时实例内存隔离的基础上，ArkCompiler通过共享运行实例中的不可变或者不易变的对象、内建代码块、方法字节码等技术手段，优化了并发运行实例的启动性能和内存开销。

开发环境准备

在开始之前，请确保已经安装了DevEco Studio（华为开发者联盟提供的官方IDE）以及HarmonyOS SDK，并且已经配置好了HarmonyOS的开发环境。与此同时，还需要对ArkTS的基本语法和组件有一定的熟悉和了解，这样才能更好的快速入手体验。

新建项目

  1. 打开DevEco Studio，选择“File” -> “New” -> “HarmonyOS Project”；
  2. 然后按照向导填写项目信息，并选择使用ArkTS作为开发语言，在项目模板中选择“Empty Feature Ability (ArkTS)”；
  3. 填写项目信息，比如项目名称、保存位置等，这里就不再过多介绍，具体以实际情况填写即可，然后点击“Finish”即可。

新建活动页面

HarmonyOS项目创建完成之后，就是具体的活动页面实现，具体步骤如下所示：

  1. 在项目目录中，找到“entry” -> “src” -> “main” -> “js” -> “default” -> “pages”。
  2. 右键点击“pages”文件夹，选择“New” -> “HUAWEI Page”。
  3. 输入页面名称，例如“MyPage”，然后点击“Finish”。

到此为止，DevEco Studio会自动生成一个包含ArkTS代码和对应资源文件的页面。

编写ArkTS代码

接下来在生成的“MyPage”文件夹中，会看到一个名为“MyPage.ets”的文件，这是ArkTS的源代码文件，打开它，会看到类似下面的代码：

@Entry  
@Component  
struct MyPage {  build() {  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {  Text('Hello World')  .fontSize(50)  .fontWeight(FontWeight.Bold)  }  }  
}

这是一个简单的ArkTS页面，其中包含一个居中的“Hello World”文本，可以根据需要修改这个页面，添加更多的组件和样式。这里分享一个完整的代码示例，具体如下所示：

import router from '@ohos.router';
import promptAction from '@ohos.promptAction';
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct Page1 {@State message: string = 'Hello World'@State paramsFromIndex: object = router.getParams()@State activities: object[] = this.paramsFromIndex?.['activities']@State newActivity : object={title: '',  type: "",    description: "",time: "",where: '',flag:''}build() {Column() {Column() {Button("返回").width("71.45vp").height("47.01vp").offset({ x: "-126.85vp", y: "-289.57vp" }).onClick(() => {router.replaceUrl({url: "pages/one",params: {activities:this.activities}})});Text("活动创建").width("200vp").height("60vp").offset({ x: "73.54vp", y: "-341.74vp" }).fontSize("24fp").margin({right:"10%"})Stack() {Text("时间：").width("64.84vp").height("39.78vp").offset({ x: "-117.83vp", y: "-206.26vp" }).fontSize("18fp")Text("标题：").width("64.84vp").height("39.78vp").offset({ x: "-116.66vp", y: "-257vp" }).fontSize("18fp")//标题TextInput().onChange((val: string) => {this.newActivity['title']=val}).width("197.88vp").height("37.65vp").offset({ x: "18.58vp", y: "-256.73vp" })// 地点TextInput().onChange((val: string) => {this.newActivity['where']=val}).width("197.88vp").height("37.65vp").offset({ x: "18.96vp", y: "-154.02vp" })// 活动描述TextInput().onChange((val: string) => {this.newActivity['description']=val}).width("189.36vp").height("37.65vp").offset({ x: "19.1vp", y: "-103.98vp" })// 活动类型TextInput().onChange((val: string) => {this.newActivity['type']=val}).width("189.36vp").height("37.65vp").offset({ x: "20.65vp", y: "-47.76vp" })// 照片TextInput().width("351.09vp").height("39.78vp").offset({ x: "20.36vp", y: "68.43vp" })// 时间TextInput().onChange((val: string) => {this.newActivity['time']=val}).width("200vp").height("37.65vp").offset({ x: "18.87vp", y: "-206.59vp" })Text("活动照片url：").width("139.34vp").height("41.91vp").offset({ x: "-98.11vp", y: "4.09vp" }).fontSize("18fp")Text("活动类型：").width("98.9vp").height("39.78vp").offset({ x: "-119vp", y: "-50.91vp" }).fontSize("18fp")Text("活动描述：").width("98.9vp").height("39.78vp").offset({ x: "-123.28vp", y: "-101.03vp" }).fontSize("18fp")Text("地点：").width("64.84vp").height("39.78vp").offset({ x: "-120.1vp", y: "-152.71vp" }).fontSize("18fp")Button("提交").width("133.17vp").height("52.33vp").offset({ x: "0vp", y: "190.96vp" }).fontSize("19fp").onClick(() => {this.activities.push(this.newActivity);this.newActivity ={title: '',  type: "",   description: "",time: "",where: ''}router.replaceUrl({url: "pages/one",params: {activities:this.activities}})})}.width("100%").height("567.16vp").offset({ x: "0vp", y: "-330.68vp" })}.width("100%").height("100%").offset({ x: "0vp", y: "285.38vp" }).justifyContent(FlexAlign.Center)}.width("100%").height("100%")}
}

注册页面

为了让应用能够加载和显示这个页面，需要在应用的配置文件中注册它，打开“entry” -> “src” -> “main” -> “js” -> “default” -> “app.ets”文件，找到app.json配置部分，将新建的页面添加到pages数组中，具体如下所示：

"pages": [  {  "name": "pages/MyPage/MyPage",  "label": "MyPage"  }  
]

运行应用

最后，点击DevEco Studio的运行按钮（通常是一个绿色的三角形图标），选择模拟器或连接的真机，然后运行应用，如果一切正常无报错，应该能够在设备上看到新页面。上面示例代码具体运行效果如下所示：

最后

通过本文的分享，介绍了如何使用ArkTS在HarmonyOS中新建一个活动页面，又通过简单的步骤和示例代码，可以快速掌握ArkTS的基本用法，并开始在HarmonyOS上进行应用开发。虽然文中示例代码不难，但是详细展示了一种以声明式方式构建用户界面的方法，采用了组件化的设计理念，同时处理了状态、事件和导航等方面的功能，这种风格的代码通常更易读、易于维护，并且有助于提高开发效率，尤其是刚入门鸿蒙OS的开发者来讲是比较好的练手代码示例，也可以在文中示例代码中做二次修改，希望这篇文章对你有所帮助，分享给有需要的人！

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

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

相关文章

线上副业新选择：宅家工作，4个项目助力增收！

线上副业新选择：宅家工作，4个项目助力增收！

在这个繁华世界，财富与智慧并驾齐驱。越来越多的人意识到，除了主业外，开拓一份副业是实现财富增长的重要途径。在此，我为大家精心挑选了几个值得一试的网上赚钱副业。 1，参与网络调查与问卷填写 随着大数据时代的到来…
阅读更多...
kkkkkkkkkkkk564

kkkkkkkkkkkk564

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起探讨和分享Linux C/C/Python/Shell编程、机器人技术、机器学习、机器视觉、嵌入式AI相关领域的知识和技术。 人工智能与机器学习 📝人工智能相关概念☞什么是人工智能、机器学习、深度学习☞人工智能发…
阅读更多...
YOLOv8 Tensorrt Python/C++部署详解

YOLOv8 Tensorrt Python/C++部署详解

按照大佬的方法进行部署，但是中间出现了很多问题，这里进行一下总结。 YOLOv8 Tensorrt Python/C部署教程_yolo 安装tensorrt-CSDN博客https://blog.csdn.net/weixin_45747759/article/details/130341118 Monday-Leo/Yolov5_Tensorrt_Win10: A simple i…
阅读更多...
Kafka从0到消费者开发

Kafka从0到消费者开发

安装ZK Index of /zookeeper/zookeeper-3.9.2 下载安装包 一定要下载-bin的，不带bin的是源码，没有编译的，无法执行。-bin的才可以执行。 解压 tar -zxvf apache-zookeeper-3.9.2-bin.tar.gz 备份配置 cp zoo_sample.cfg zoo_sample.cfg-b…
阅读更多...
物流集成商巨头-员工薪酬PK：今天国际、音飞存储，诺力股份

物流集成商巨头-员工薪酬PK：今天国际、音飞存储，诺力股份

语 大家好，我是智能仓储物流技术研习社的社长，老K。专注分享智能仓储物流技术、智能制造等内容。 新书《智能物流系统构成与技术实践》 以下内容为根据上市财报和公开数据整理，若有偏差，请联系小编修改。注意：各公司员…
阅读更多...
ZYNQ实验--裸机程序固化

ZYNQ实验--裸机程序固化

参考资料 正点原子《领航者 ZYNQ 之嵌入式 SDK 开发指南》详细的配置资料中都有介绍，本文只针对个人实验需求进行简要说明 固化流程 调试阶段是通过 JTAG 接口将 FPGA 配置文件和应用程序下载到 ZYNQ 器件中。但在实际应用中需要程序在上电或者复位时让程序自动运…
阅读更多...
Adversarial Synthesis of Human Pose From Text # 论文阅读

Adversarial Synthesis of Human Pose From Text # 论文阅读

URL https://arxiv.org/pdf/2005.00340 TD;DR 20 年 5 月来自高校的一篇论文，任务是用 GAN 生成 pose，目前 7 引用。 Model & Method 输入的是描述动作的 text，通过 text encoder（本文用的是叫做 fastText 的方法&#…
阅读更多...
迷宫中离入口最近的出口

迷宫中离入口最近的出口

题目链接 迷宫中离入口最近的出口 题目描述 注意点 maze[i][j] 要么是 ‘.’ ，要么是 ‘’entrance.length 2entrance 一定是空格子出口的含义是 maze 边界上的空格子entrance格子不算出口 解答思路 广度优先遍历找到走i步时所能到达的所有节点位置&#xff0…
阅读更多...
认识 Pixel 8a：这款 Google AI 手机拥有无与伦比的价值。

认识 Pixel 8a：这款 Google AI 手机拥有无与伦比的价值。

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…
阅读更多...
html+css-Day1(盒子模型)

html+css-Day1(盒子模型)

一、常用属性 1、字体设置font "line-height" 是 CSS 中的一个属性，用于设置文本行之间的距离，也就是行间距。它影响着段落、行内元素或者任何包含文本的元素的可读性。"line-height" 可以设置为数字、长度单位（如 px、e…
阅读更多...
数据结构——希尔排序

数据结构——希尔排序

基本思想： 希尔排序法又称缩小增量法。希尔排序法的基本思想是：先选定一个整数，把待排序文件中所有记录分成个组，所有距离为的记录分在同一组内，并对每一组内的记录进行排序。然后，取，重复上述…
阅读更多...
【图文教程】PyCharm安装配置PyQt5+QtDesigner+PyUic+PyRcc

【图文教程】PyCharm安装配置PyQt5+QtDesigner+PyUic+PyRcc

这里写目录标题 PyQt5、Qt Designer、PyUic、PyRcc简介（1）下载安装PyQt5（2）打开designer.exe所在位置（3）在PyCharm中配置QtDesigner（4）验证QtDesigner是否配置成功（5&…
阅读更多...
通过编写dockerfile部署python项目

通过编写dockerfile部署python项目

docker命令总览 docker通过dockerfile构建镜像常用命令 # 创建镜像（进入dockerfile所在的路径） docker build -t my_image:1.0 .# 查看镜像 docker images# 创建容器 docker run -dit --restartalways -p 9700:9700 --name my_container my_image:1.0 #…
阅读更多...
阿里发布通义千问2.5：一文带你读懂通义千问！

阿里发布通义千问2.5：一文带你读懂通义千问！

大家好，我是木易，一个持续关注AI领域的互联网技术产品经理，国内Top2本科，美国Top10 CS研究生，MBA。我坚信AI是普通人变强的“外挂”，所以创建了“AI信息Gap”这个公众号，专注于分享AI全维度知识…
阅读更多...
就业班 第三阶段（zabbix） 2401--5.9 day1 普通集zabbix 5.0部署 nginx部署+agent部署

就业班 第三阶段（zabbix） 2401--5.9 day1 普通集zabbix 5.0部署 nginx部署+agent部署

文章目录 环境一、zabbix 5.0 部署1、安装yum源2、安装相关软件3、数据库安装和配置mariaDB数据库mysql57数据库 安装mysql万能卸载mysql代码：启动mysql并初始化4、数据表导入5、修改配置，启动服务6、配置 web GUI7、浏览器访问注意数据加密的选项不要勾…
阅读更多...
分享四种免费获取SSL的方式

分享四种免费获取SSL的方式

SSL证书目前需要部署安装的网站很多，主要还是基于国内目前对证书的需求度在不断的升高，网站多了、服务器多了之后。网络安全问题就成为了大家不得不面对的一个重要的问题了。SSL证书的作用有很多，这里就不一一详述了，本期作品主要…
阅读更多...
RSAC 2024现场：谷歌展望大模型在网络安全领域的前景

RSAC 2024现场：谷歌展望大模型在网络安全领域的前景

人类距离将网络安全的控制权交给生成式AI还有多远？ 前情回顾RSAC2024动态 伪造内容鉴别厂商Reality Defender斩获2024 RSAC创新沙盒冠军 RSAC 2024上值得关注的10款网络安全产品 RSAC 2024创新沙盒十强出炉，谁能夺冠？ 安全内参5月8日消息…
阅读更多...
table表格 如何加卡片 实现？

table表格 如何加卡片 实现？

实现非常简单 代码 const columnsinsu [{dataIndex: nowdate,key: nowdate,render: (text, record) ><Cardhoverablestyle{{width: 97%,height: 90,}}// cover{<img alt"example" src"https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png&…
阅读更多...
浅析安全用电监控系统在工厂的研究与应用论述

浅析安全用电监控系统在工厂的研究与应用论述

摘 要&#xff1a;随着社会时代的发展&#xff0c;人们的安全意识越来越强烈&#xff0c;在人们生活和工作中离不开各种用电设备&#xff0c;用电设备的安全使用是保障人们生命安全的重要内容。工厂因自身厂内工作环境的特殊性&#xff0c;用电设备的种类多且复杂&#xff0c;如…
阅读更多...
指针的奥秘（二）：指针与数组的联系+字符指针+二级指针+指针数组+《剑指offer》笔试题

指针的奥秘（二）：指针与数组的联系+字符指针+二级指针+指针数组+《剑指offer》笔试题

指针 一.指针与数组的联系1.数组名的理解2.使用指针访问数组3.一维数组传参的本质 二.字符指针1.字符指针隐藏秘密2.常量字符串3.《剑指offer》笔试题 三.二级指针四.指针数组1.指针数组模拟二维数组 一.指针与数组的联系 1.数组名的理解 也许大部分人认为数组名就是一个名称&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站