探索 HarmonyOS 开发：用 ArkTS 构建个人主页和活动管理系统【HarmonyOS 5.0（Next）】

2024-12-22
内蒙古
本文字数：4462 字
阅读完需：约 15 分钟

探索 HarmonyOS 开发：用 ArkTS 构建个人主页和活动管理系统【HarmonyOS 5.0（Next）】

一、一个系统，统一生态

口号：“一个系统，统一生态”，旨在全面突破操作系统核心技术，实现系统架构由内到外的焕然一新。流畅度提升：相比前代，HarmonyOS 5.0（Next）的流畅度提升了 30%，系统运行更加丝滑。续航增强：手机续航提升 56 分钟，有效提升了设备的续航时间。全新设计：采用“和谐美学”设计，将光引入到鸿蒙设计中，通过算法模拟按钮光照效果，实现文字卡片与背景相互融合，令界面更加灵动惊艳。同时，新增了几套主题和锁屏实况窗，支持多功能卡片显示，使信息展示更加丰富和便捷。分布式软总线：搭载全新分布式软总线，实现多设备之间无缝流传与共享，支持跨设备互通扫描、互通图库、跨设备剪贴板、应用内视频投播等功能。小艺助手升级：搭载全新小艺助手，基于盘古大模型打造系统级 AI，支持更多智能应用场景，如文档快速形成论文摘要、思维导图等。安全性能提升：禁止应用获取 9 大不合理权限，所有应用均使用华为数据安全访问机制，采用星盾架构保护用户隐私。同时，支持文件加密分享，能够指定用户打开，且无法录屏、截图等。方舟引擎升级：包括图形、多媒体、内存、调度、存储、低功耗、Web 七大引擎都迎来提升，使得系统运行更加高效。

1.1 项目背景

HarmonyOS（鸿蒙操作系统）是华为公司推出的一种分布式操作系统。它被设计为一种全场景、全连接的操作系统，旨在实现在各种设备之间的无缝协同和共享，包括智能手机、平板电脑、智能穿戴、智能家居、车载系统等。HarmonyOS 的目标是构建一个统一的、开放的、全场景的操作系统生态系统。

1.2 ArkTS 详解

ArkTS 是鸿蒙生态的应用开发语言。它在保持 TypeScript（简称 TS）基本语法风格的基础上，对 TS 的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式 UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。自然简洁语法 ArkTS 提供了简洁自然的声明式语法、组件化机制、数据-UI 自动关联等能力，实现了贴近自然语言，书写效率更高的编程方式，为开发者带来易学、易懂、极简开发的优质体验。轻量化并发机制 ArkCompiler 运行时在 HarmonyOS 上提供了 Worker API 支持并发编程。在运行时实例内存隔离的基础上，ArkCompiler 通过共享运行实例中的不可变或者不易变的对象、内建代码块、方法字节码等技术手段，优化了并发运行实例的启动性能和内存开销。

二.HarmonyOS 应用开发实战—开箱即用的个人主页页面详情

2.1 ArkTS 页面源码

import router from '@ohos.router';import promptAction from '@ohos.promptAction';import web_webview from '@ohos.web.webview';@Entry@Componentstruct Page1 {  @State message: string = 'Hello World'  @State paramsFromIndex: object = router.getParams()  @State activities: object[] = this.paramsFromIndex?.['activities']  @State newActivity : object=    {      title: '',  // Assuming val is the title for the new activity      type: "",    // Assign a type for the new activity      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(() => {              console.log(String(this.newActivity['title']))              console.log(String(this.activities))
              this.activities.push(this.newActivity);
              this.newActivity =              {                title: '',  // Assuming val is the title for the new activity                type: "",    // Assign a type for the new activity                description: "",                time: "",                where: ''              }              // this.flag1=              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%")


  }}

复制代码

2.2 代码解析

这段代码看起来是用一种声明式语法编写的，用于定义用户界面（UI）组件。代码似乎创建了一个应用程序的 UI 页面，可能是为移动设备或 Web 环境设计的。

导入模块：
代码使用import语句导入各种模块或库，如router、promptAction和web_webview。这可能用于处理路由、用户提示和 Web 视图。
组件声明：
@Entry和@Component很可能是装饰器或注解，用于声明以下结构（struct Page1）是一个组件。
状态管理：
@State装饰器用于定义状态。例如，message是一个字符串状态，paramsFromIndex是通过router.getParams()获取的参数，activities是从paramsFromIndex中提取的活动数组，newActivity是一个对象，表示新活动的各个属性。
UI 构建：
build方法定义了用户界面的结构。代码使用Column、Button、Text等组件来构建页面布局和元素。其中包括返回按钮、活动创建标题、文本输入框等。
事件处理：
使用.onClick和.onChange等方法来定义按钮和输入框等组件的交互行为。例如，当提交按钮被点击时，会将新活动添加到activities数组中，并重定向到另一个页面。

2.3 心得

通过对这段代码的解析，可以得到以下心得：

语言特性： 代码中使用了一种具有声明式语法的编程语言，它可能是为了构建用户界面而设计的。这种语法看起来更贴近描述界面的结构和交互，而非直接操作 DOM 或 UI 元素。
组件化： 通过@Component和struct Page1，代码采用了组件化的设计思路。这种方式有助于将用户界面划分为可重用的独立部分，提高了代码的可维护性和可扩展性。
状态管理： 使用@State来定义组件的状态，例如message、paramsFromIndex和activities。这种状态管理的方式使得组件能够在不同的用户交互和事件中保持一致的状态。
事件处理： 通过.onClick和.onChange等事件处理方法，代码实现了用户界面元素的交互行为。例如，在按钮点击时执行路由切换操作，在文本输入框变化时更新相应的活动属性。
路由和导航： 代码中引入了router模块，表明应用可能涉及页面之间的导航和路由。这是构建多页面应用或单页面应用时常见的功能。
布局和样式： 通过组合使用Column、Button、Text等组件，代码定义了页面的布局结构，并通过.width、.height、.offset等属性设置了各个组件的样式和位置。
异步和回调： 代码中可能涉及异步操作，例如在按钮点击时执行的路由操作，这可能是因为路由切换是一个可能耗时的操作。

总体而言，这段代码展示了一种以声明式方式构建用户界面的方法，采用了组件化的设计理念，同时处理了状态、事件和导航等方面的功能。这种风格的代码通常更易读、易于维护，并且有助于提高开发效率。

发布于: 14 小时前阅读数: 2

原文链接:【http://xie.infoq.cn/article/9fcef939daf80d28a6bd41d89】。文章转载请联系作者。

申公豹

关注

申公豹本豹 2023-06-05 加入

🏆2022年InfoQ写作平台-签约作者 🏆

发布

暂无评论

创作场景

探索 HarmonyOS 开发：用 ArkTS 构建个人主页和活动管理系统【HarmonyOS 5.0（Next）】

探索 HarmonyOS 开发：用 ArkTS 构建个人主页和活动管理系统【HarmonyOS 5.0（Next）】

一、一个系统，统一生态

1.1 项目背景

1.2 ArkTS 详解

二.HarmonyOS 应用开发实战—开箱即用的个人主页页面详情

2.1 ArkTS 页面源码

2.2 代码解析

2.3 心得

申公豹

评论