devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：从前慢现在也慢 | 2024-05-20 15:25:10

赞

踩

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的源代码文件，打开它，会看到类似下面的代码：

  1. @Entry  
  2. @Component  
  3. struct MyPage {  
  4.   build() {  
  5.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {  
  6.       Text('Hello World')  
  7.         .fontSize(50)  
  8.         .fontWeight(FontWeight.Bold)  
  9.     }  
  10.   }  
  11. }

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

  1. import router from '@ohos.router';
  2. import promptAction from '@ohos.promptAction';
  3. import web_webview from '@ohos.web.webview';
  4. @Entry
  5. @Component
  6. struct Page1 {
  7.   @State message: string = 'Hello World'
  8.   @State paramsFromIndex: object = router.getParams()
  9.   @State activities: object[] = this.paramsFromIndex?.['activities']
  10.   @State newActivity : object=
  11.     {
  12.       title: '',  
  13.       type: "",    
  14.       description: "",
  15.       time: "",
  16.       where: '',
  17.       flag:''
  18.     }
  19.   build() {
  20.  
  21.     Column() {
  22.       Column() {
  23.         Button("返回")
  24.           .width("71.45vp")
  25.           .height("47.01vp")
  26.           .offset({ x: "-126.85vp", y: "-289.57vp" })
  27.           .onClick(() => {
  28.             router.replaceUrl({
  29.               url: "pages/one",
  30.               params: {
  31.                 activities:this.activities
  32.               }
  33.             })
  34.           });
  35.         Text("活动创建")
  36.           .width("200vp")
  37.           .height("60vp")
  38.           .offset({ x: "73.54vp", y: "-341.74vp" })
  39.           .fontSize("24fp")
  40.           .margin({right:"10%"})
  41.         Stack() {
  42.           Text("时间：")
  43.             .width("64.84vp")
  44.             .height("39.78vp")
  45.             .offset({ x: "-117.83vp", y: "-206.26vp" })
  46.             .fontSize("18fp")
  47.           Text("标题：")
  48.             .width("64.84vp")
  49.             .height("39.78vp")
  50.             .offset({ x: "-116.66vp", y: "-257vp" })
  51.             .fontSize("18fp")
  52.           //标题
  53.           TextInput()
  54.             .onChange((val: string) => {
  55.               this.newActivity['title']=val
  56.             })
  57.             .width("197.88vp")
  58.             .height("37.65vp")
  59.             .offset({ x: "18.58vp", y: "-256.73vp" })
  60.           // 地点
  61.           TextInput()
  62.             .onChange((val: string) => {
  63.               this.newActivity['where']=val
  64.             })
  65.             .width("197.88vp")
  66.             .height("37.65vp")
  67.             .offset({ x: "18.96vp", y: "-154.02vp" })
  68.           // 活动描述
  69.           TextInput()
  70.             .onChange((val: string) => {
  71.               this.newActivity['description']=val
  72.             })
  73.             .width("189.36vp")
  74.             .height("37.65vp")
  75.             .offset({ x: "19.1vp", y: "-103.98vp" })
  76.           // 活动类型
  77.           TextInput()
  78.             .onChange((val: string) => {
  79.               this.newActivity['type']=val
  80.             })
  81.             .width("189.36vp")
  82.             .height("37.65vp")
  83.             .offset({ x: "20.65vp", y: "-47.76vp" })
  84.  
  85.           // 照片
  86.           TextInput()
  87.             .width("351.09vp")
  88.             .height("39.78vp")
  89.             .offset({ x: "20.36vp", y: "68.43vp" })
  90.           // 时间
  91.           TextInput()
  92.             .onChange((val: string) => {
  93.               this.newActivity['time']=val
  94.             })
  95.             .width("200vp")
  96.             .height("37.65vp")
  97.             .offset({ x: "18.87vp", y: "-206.59vp" })
  98.           Text("活动照片url：")
  99.             .width("139.34vp")
  100.             .height("41.91vp")
  101.             .offset({ x: "-98.11vp", y: "4.09vp" })
  102.             .fontSize("18fp")
  103.           Text("活动类型：")
  104.             .width("98.9vp")
  105.             .height("39.78vp")
  106.             .offset({ x: "-119vp", y: "-50.91vp" })
  107.             .fontSize("18fp")
  108.           Text("活动描述：")
  109.             .width("98.9vp")
  110.             .height("39.78vp")
  111.             .offset({ x: "-123.28vp", y: "-101.03vp" })
  112.             .fontSize("18fp")
  113.           Text("地点：")
  114.             .width("64.84vp")
  115.             .height("39.78vp")
  116.             .offset({ x: "-120.1vp", y: "-152.71vp" })
  117.             .fontSize("18fp")
  118.           Button("提交")
  119.             .width("133.17vp")
  120.             .height("52.33vp")
  121.             .offset({ x: "0vp", y: "190.96vp" })
  122.             .fontSize("19fp")
  123.             .onClick(() => {
  124.               this.activities.push(this.newActivity);
  125.               this.newActivity =
  126.               {
  127.                 title: '',  
  128.                 type: "",   
  129.                 description: "",
  130.                 time: "",
  131.                 where: ''
  132.               }
  133.               router.replaceUrl({
  134.                 url: "pages/one",
  135.                 params: {
  136.                   activities:this.activities
  137.                 }
  138.               })
  139.             })
  140.         }
  141.         .width("100%")
  142.         .height("567.16vp")
  143.         .offset({ x: "0vp", y: "-330.68vp" })
  144.       }
  145.       .width("100%")
  146.       .height("100%")
  147.       .offset({ x: "0vp", y: "285.38vp" })
  148.       .justifyContent(FlexAlign.Center)
  149.     }
  150.     .width("100%")
  151.     .height("100%")
  152.  
  153.   }
  154. }
  155.

注册页面

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

  1. "pages": [  
  2.   {  
  3.     "name": "pages/MyPage/MyPage",  
  4.     "label": "MyPage"  
  5.   }  
  6. ]

运行应用

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

最后

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/598215
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号