购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

第1章
ArkTS声明式UI开发规范

本章将带领读者走进HarmonyOS NEXT的精彩世界。首先,我们将详细讲解这一操作系统的独特之处,探讨它令人眼前一亮的功能特性。接着,剖析它的内部结构,就像打开一块精密的机械手表,展示系统内部的各个“齿轮”是如何高效运转的。随后,一步一步指导读者在该系统上开发应用程序,就像教人做菜一样,会说明需要哪些材料、步骤,以及如何避免烹饪过程中可能遇到的问题。此外,还将分享一些实用的小技巧和开发规则,帮助读者提高效率,减少试错。

在开始实际开发之前,本章会带领读者搭建适合HarmonyOS NEXT应用开发的环境,就像准备一间设备齐全的厨房,让读者可以大展厨艺——让开发过程更加顺畅。最后,将通过编写一个经典的“Hello World”程序,迈出HarmonyOS编程的第一步。这一实践既简单又经典,能够让读者体验到编程的乐趣,并为将来开发更复杂的应用程序奠定基础。

无论读者是初学者,还是有经验的开发者,本章都能提供宝贵的知识和启发,使其更好地融入HarmonyOS NEXT的生态,开启智能应用开发的新旅程。

1.1 HarmonyOS NEXT的介绍与特点

在数字化浪潮中,操作系统不仅是硬件与用户之间的桥梁,更是驱动设备智能化的核心所在。华为推出的HarmonyOS NEXT,不仅展现了对未来智能生活的憧憬,更是华为技术创新的经典之作。

1.1.1 HarmonyOS NEXT概览

HarmonyOS NEXT是华为精心研发的一款操作系统,秉承“全场景、全连接、全智能”的设计理念,为全球用户描绘了全新的数字生活图景。基于微内核架构,这一系统以卓越的性能、安全性和可扩展性,出色地适配多种设备和应用场景。

1.1.2 核心亮点

HarmonyOS NEXT的核心亮点如下:

1)微内核架构

HarmonyOS NEXT采用微内核设计,与传统宏内核相比,具备更高的安全性和更快的响应速度,让系统更轻盈而不失强大。

2)全场景覆盖

支持从智能手机到平板电脑,再到智能电视和穿戴设备的多种场景,HarmonyOS NEXT实现了跨设备的无缝体验,确保用户在不同设备上的操作感受始终如一。

3)分布式创新

分布式能力是HarmonyOS NEXT的核心特色之一,它支持设备间资源共享和任务协同,无论是数据传输还是应用执行,均可在设备间顺畅衔接,为用户带来便捷的使用体验。

4)性能流畅

通过先进的内存管理和任务调度技术,HarmonyOS NEXT确保用户获得流畅的系统体验。此外,系统支持多语言编程,为开发者提供了更大的“创作”空间和自由。

5)安全至上

从设计阶段起,HarmonyOS NEXT便将安全置于核心位置,采用多层次的防护措施,如数据加密、安全启动等,全面保障用户的数据安全。

6)开放生态

华为致力于构建开放的生态系统。HarmonyOS NEXT提供丰富的API和开发工具,激励全球开发者与合作伙伴共同探索新可能性,为生态注入更多活力。

1.1.3 深远影响

HarmonyOS NEXT的问世标志着华为产品生态的一次重大飞跃,也将在全球操作系统市场中掀起波澜。它不仅有望重塑用户对智能设备的使用习惯,还将推动行业技术不断向前发展。

1)设备智能化加速

HarmonyOS NEXT的普及将加速设备智能化进程,更好地满足用户的个性化需求,提升使用体验。

2)技术创新激发

系统的开放性和分布式架构将激发开发者的创新潜能,催生出新技术和新应用。

3)市场竞争重塑

HarmonyOS NEXT的加入可能重塑操作系统市场的竞争格局,为用户提供更加多元化的选择,推动行业健康发展。

1.1.4 开发者机遇

对于开发者而言,HarmonyOS NEXT不仅是一个强大的平台,更是一个孕育创新与成长的广阔舞台。

1)全栈自研能力

HarmonyOS NEXT提供的全栈自研优势,能够助力开发者降低开发成本,提高开发效率,实现高效创新。

2)原生应用开发

借助系统级AI能力,开发者可以轻松构建智能功能,为用户带来原生应用的体验。

3)统一生态部署

通过“一次开发,多端适配”的生态能力,HarmonyOS NEXT简化了跨设备开发流程,提升了应用开发效率与资源利用率。

4)安全与隐私保障

在以安全为核心的平台上开发,有助于提升用户对应用的信任度。

5)开放合作生态

华为秉持开放合作的理念,积极鼓励开发者加入,共同推动生态繁荣发展。

6)技术支持与社区资源

华为提供全面的开发支持和活跃的社区资源,助力开发者快速成长。

HarmonyOS NEXT是华为推出的新一代操作系统,其创新理念和强大功能充分展现了华为对未来智能生活的深刻洞察和技术实力。随着技术的不断完善和市场认可度的逐步提升,HarmonyOS NEXT有望成为推动智能设备发展的重要引擎。

1.2 整体架构

了解操作系统架构设计对于学习应用开发至关重要,主要体现在以下几个方面:

1)资源管理与优化

操作系统是计算机系统的核心,负责管理计算机的硬件和软件资源。深入理解操作系统架构设计有助于开发者掌握如何高效地利用这些资源,如内存管理、进程调度、文件系统等。这种理解能够促使开发者编写出更加高效、稳定且资源占用更少的代码。

2)并发与并行处理

操作系统的并发控制机制和并行处理策略对多任务处理和数据并行处理的应用开发至关重要。掌握这些知识有助于开发者设计出响应更快、性能更优的应用程序。

3)系统调用与接口

操作系统为上层应用提供了丰富的系统调用接口(System Call Interface)和应用程序编程接口(Application Programming Interface,API),这些接口是应用与操作系统交互的桥梁。了解操作系统的架构设计有助于开发者深入理解系统调用的工作原理和性能特性,从而更准确地使用这些接口来满足应用的需求。

4)安全与稳定性

操作系统架构的设计直接决定了系统的安全性和稳定性。掌握操作系统的安全机制(如权限管理、访问控制等)以及稳定性保障措施(如错误处理、故障恢复等),有助于开发者在开发应用中有效地考虑这些因素,编写出更加安全可靠的应用。

5)深入理解技术栈

在软件开发领域,操作系统是整个技术栈的基础层。深入了解操作系统架构的设计有助于开发者全面理解技术栈的整体结构和核心逻辑,从而更好地把握应用开发的方向和关键技术点。

因此,了解操作系统架构设计对于学习应用开发意义重大。这不仅能显著提高开发效率和代码质量,还能培养开发者的系统思维能力和跨平台开发能力。

图1-1展示了HarmonyOS NEXT操作系统的整体架构。

图1-1 HarmonyOS NEXT整体架构图

具体说明如下:

● 声明式UI前端:提供了UI开发范式的基础语言规范,内置丰富的UI组件、布局和动画,同时支持多种状态管理机制,为应用开发者提供完善的接口支持。

● 语言运行时:基于ArkTS语言(即方舟语言)的运行时(runtime,也称为运行时库),具备对UI范式语法的解析能力,支持跨语言调用,并提供高性能的TypeScript语言运行环境。

● 声明式UI后端引擎:后端引擎兼容多种开发范式,提供强大的UI渲染管线支持,包括基础组件、布局计算、动效处理、交互事件管理,以及状态管理和绘制能力。

● 渲染引擎:提供高效的绘制能力,可将渲染管线生成的渲染指令快速呈现至屏幕。

● 平台适配层:提供对系统平台的抽象接口,具备接入不同系统的能力,包括支持系统渲染管线的整合与生命周期的调度管理。

1.3 开发流程

使用UI开发框架开发应用时,主要涉及以下开发流程:

(1)ArkTS:包括ArkTS的语法、状态管理和渲染控制的应用场景。

(2)开发布局:包括常用的布局方式及其使用场景。

(3)添加组件:包括内置组件、自定义组件以及通过API支持的界面元素。

(4)设置组件导航和页面路由:配置组件间的导航及页面的路由功能。

(5)显示图形:显示图片、绘制自定义几何图形,以及使用画布绘制自定义图形。

(6)使用动画:包括组件和页面动画的典型应用场景及实现方法。

(7)绑定事件:包括事件的基本概念,以及使用通用事件和手势事件的方法。

(8)使用自定义能力:理解自定义能力的基本概念,并实现相关功能。

(9)主题设置:进行应用级和页面级的主题设置与管理。

(10)使用NDK接口构建UI:通过ArkUI提供的NDK接口,创建和管理UI界面。

(11)使用镜像能力:了解镜像能力的基本概念,并掌握其使用方法。

1.4 通用规则

通用规则是指开发应用时,系统默认的处理方式。熟悉这些规则可以帮助开发者提高开发效率,并编写出更高质量的代码。

在当前的HarmonyOS NEXT应用开发中,通用规则主要包含以下两个方面。

1)默认单位

表示长度的输入参数的单位默认为vp,即number类型的参数。对于以number类型值表示的Length类型的参数,以及以number类型值表示的Dimension类型的参数,其数值单位默认为vp。

vp是虚拟像素(Virtual Pixel)的缩写,指设备相对于应用的虚拟尺寸(区别于屏幕硬件像素单位)。vp是一种灵活的单位,能够根据不同屏幕的像素密度进行缩放,从而在各种屏幕上保持统一的尺寸显示效果。这种单位提供了一种灵活的方式,使得UI元素在不同像素密度的屏幕上保持一致大小的视觉效果。

2)异常值处理

当输入参数为异常值(undefined、null或无效值)时,系统处理规则如下:

(1)对应参数有默认值,则按默认值处理。

(2)对应参数无默认值,则该参数对应的属性或接口不生效。

1.5 开发环境搭建

本节主要介绍HarmonyOS NEXT开发环境的搭建过程,包括安装和配置HUAWEI DevEco Studio。

1.5.1 概述

HUAWEI DevEco Studio基于IntelliJ IDEA Community开源版本构建,为在HarmonyOS NEXT系统上运行的应用和服务提供了一站式开发平台。

作为一款专业的开发工具,DevEco Studio除了具备代码开发、编译构建、调测等功能外,还具备如下特点:

(1)高效智能代码编辑:支持ArkTS、JavaScript、C/C++等多种语言,提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能,大幅提升代码编写效率。

(2)多端双向实时预览:支持UI界面代码的双向预览、实时预览、动态预览、组件预览及多端设备预览,便于开发者快速查看代码运行效果。

(3)多端设备模拟仿真:提供HarmonyOS NEXT本地模拟器,支持iPhone等设备的模拟仿真,便捷获取调试环境。

(4)DevEco Profiler性能调优:提供实时监控能力和场景化调优模版,支持全方位的设备资源监测和多维度数据采集,帮助开发者实现高效的性能调优和快速定位问题代码行。

1.5.2 工具准备

从HarmonyOS Developer官网下载最新版的DevEco Studio安装包。

1.5.3 安装DevEco Studio

DevEco Studio支持Windows和macOS系统,下面将针对这两种操作系统分别介绍DevEco Studio软件的安装。

1.Windows环境下安装DevEco Studio

1)运行环境要求

为保证DevEco Studio正常运行,建议计算机配置满足以下要求:

● 操作系统:Windows 10 64位、Windows 11 64位。

● 内存:推荐16GB或以上,最低8GB。

● 硬盘:100GB或以上。

● 分辨率:1280×800像素或更高。

2)安装DevEco Studio

Windows环境下安装DevEco Studio的操作步骤如下:

步骤01 双击下载的deveco-studio-xxxx.exe文件,启动DevEco Studio安装向导,如图1-2所示。

步骤02 单击“下一步”按钮,进入“选择安装位置”界面。默认安装路径在C:\Program Files下,也可单击“浏览”按钮指定其他安装路径,然后单击“下一步”按钮,如图1-3所示。

图1-2 安装向导界面

图1-3 Windows环境下DevEco Studio的“选择安装位置”界面

步骤03 在如图1-4所示的“安装选项”界面中勾选DevEco Studio后,单击“下一步”按钮。

图1-4 Windows环境下DevEco Studio的“安装选项”界面

步骤04 按照提示依次单击“下一步”按钮,直至安装完成,最后单击“完成”按钮,如图1-5所示。

图1-5 Windows环境下DevEco Studio安装完成时的界面

2.macOS环境下安装DevEco Studio

1)运行环境要求

为保证DevEco Studio正常运行,建议计算机配置满足以下要求:

● 操作系统:macOS(X86) 10.15/11/12/13/14;macOS(ARM) 11/12/13/14。

● 内存:推荐16GB或以上,最低8GB。

● 硬盘:100GB或以上。

● 分辨率:1280×800像素或更高。

2)安装DevEco Studio

macOS环境下安装DevEco Studio的操作步骤如下:

步骤01 在安装界面中,将DevEco-Studio.app拖曳到Applications文件夹中,等待安装完成,如图1-6所示。

图1-6 macOS环境下DevEco Studio的安装界面

步骤02 安装完成后,按照提示配置代理并检查开发环境。

1.5.4 诊断开发环境

为了确保开发者在应用或服务开发过程中拥有良好的体验,DevEco Studio提供了开发环境诊断功能,可帮助开发者检查开发环境是否配置完备。开发者可以在欢迎页面单击Diagnose按钮进行诊断,如图1-7所示。如果已经打开了工程开发界面,也可以在菜单栏中依次单击Help→Diagnostic Tools→Diagnose Development Environment选项进行诊断。

图1-7 Windows环境下DevEco Studio进入开发环境诊断时的界面

DevEco Studio开发环境诊断项包括计算机的配置、网络的连通情况、依赖的工具是否安装等。如果检测结果为未通过,则根据检查项的描述和修复建议进行处理,如图1-8所示。

图1-8 Windows环境下DevEco Studio开发环境显示诊断结果时的界面

1.5.5 启用中文化插件

步骤01 在工程开发界面的主菜单栏中,依次单击File→Settings→Plugins选项,选择Installed标签,在搜索框中输入Chinese,搜索结果里将出现Chinese(Simplified),在右侧单击Enable按钮,再单击右下角的OK按钮,如图1-9所示。

图1-9 Windows环境下DevEco Studio启用简体中文设置时的界面

步骤02 在弹出的对话框中单击Restart按钮(见图1-10),重启DevEco Studio后设置即可生效。

图1-10 插件设置完成后提示是否立刻重启DevEco Studio的对话框

1.6 编写HarmonyOS入门程序

本节将带领读者编写一个简单的HarmonyOS NEXT入门程序——Hello World,让读者对HarmonyOS NEXT有一个初步的体验。

1.6.1 案例说明

1.UI框架

HarmonyOS NEXT提供了一套UI开发框架,即方舟开发框架(ArkUI框架)。方舟开发框架为开发者提供了UI开发所需的能力,如多种组件、布局计算、动画能力、UI交互、绘制功能等。

方舟开发框架针对不同目的和技术背景的开发者,提供了两种开发范式:基于ArkTS的声明式开发范式和兼容JavaScript的类Web开发范式。这两种开发范式的对比如表1-1所示。

表1-1 两种开发范式的对比

2.应用模型

应用模型是HarmonyOS NEXT为开发者提供的应用程序所需的抽象提炼,提供了应用程序必备的组件和运行机制。通过应用模型,开发者可以基于统一的框架进行应用开发,使应用开发变得更简单和高效。

随着系统的演进,HarmonyOS NEXT先后提供了两种应用模型:

● Stage模型:HarmonyOS API 9开始新增的模型,是目前主推并将长期演进的模型。该模型通过提供AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”,因此被称为Stage模型。接下来的Hello World程序就是使用Stage模型开发的。

● FA(Feature Ability)模型:HarmonyOS API 7开始支持的模型,当目前已不再主推了。

本案例将提供一个含有两个页面的开发实例,并基于Stage模型构建第一个ArkTS应用,以便于读者理解上述概念及应用开发流程。

1.6.2 创建ArkTS工程

创建ArkTS工程的步骤如下:

步骤01 如果是首次打开DevEco Studio,那么单击Create Project按钮创建工程。如果已经打开了一个工程,则在菜单栏中依次单击File→New→Create Project来新建一个工程。

步骤02 在新建工程界面选择Application类型的应用开发,选择Empty Ability模板,单击Next按钮进入下一步配置,如图1-11所示。

图1-11 DevEco Studio新建工程界面

工程模板支持的开发语言及模板说明如表1-2所示。

表1-2 工程模板支持的开发语言及模板说明

步骤03 进入工程配置界面,将Compatible SDK设置为5.0.0(API 12),将Model设置为Stage,其他参数保持默认设置即可,如图1-12所示。

图1-12 DevEco Studio工程配置界面

步骤04 配置完成后,单击Finish按钮,DevEco Studio会自动生成示例代码和相关资源,用户只需等待工程创建完成即可。

1.6.3 ArkTS工程目录结构(Stage模型)

新建ArkTS工程后的目录结构如图1-13所示。

图1-13 DevEco Studio新建工程的目录结构

目录说明如下:

(1)AppScope > app.json5:应用的全局配置信息。

(2)entry:HarmonyOS工程模块,编译构建生成一个HAP包。

(3)src > main > ets:用于存放ArkTS源码。

(4)src > main > ets > entryability:应用/服务的入口。

(5)src > main > ets > pages:应用/服务包含的页面。

(6)src > main > resources:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。

(7)src > main > module.json5:Stage模型模块配置文件,主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。

(8)build-profile.json5:当前的模块信息,包括编译信息配置项(如buildOption和targets配置等)。其中,targets可配置当前运行环境,默认为HarmonyOS。

(9)hvigorfile.ts:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。

(10)oh_modules:用于存放第三方库依赖信息。

(11)build-profile.json5:应用级配置信息,包括签名、产品配置等。

(12)hvigorfile.ts:应用级编译构建任务脚本。

1.6.4 构建第一个页面

1.使用文本组件

工程同步完成后,在Project窗口中依次单击entry→src→main→ets→pages选项,打开Index.ets文件。该文件定义的页面由Text组件构成,它的代码如文件1-1所示。

文件1-1 Index.ets文件中的代码

代码说明如下:

● @Entry:这是一个装饰器(decorator),在ArkTS中用于标记当前组件为应用程序的入口点。当运行应用程序时,该组件会首先被加载和显示。

● @Component:这是另一个装饰器,用于声明后面的struct是一个组件,可包含状态、方法和UI布局。

● struct Index { ... }:定义了一个名为Index的结构体,代表应用程序的主界面。

● @State message: string = 'Hello World':定义了一个状态变量message,类型为string,初始值为'Hello World'。@State装饰器表示该变量的变化可以被追踪,当它变化时,会触发UI的自动更新。

● build() { ... }:这是一个方法,用来构建组件的UI布局。ArkTS使用声明式的方式来构建UI,开发者只需描述所需界面,不必关心具体实现。

● Row() { ... }:Row是一个布局组件,用来水平排列子组件。这里的Row()创建了一个水平布局。

● Column() { ... }:Column是一个布局组件,用来垂直排列子组件。这里的Column嵌套在Row内部,表示垂直布局会以水平方式排列。

● Text(this.message):Text是一个UI组件,用于显示文本。这里显示的内容是this.message,即状态变量message的值。

● fontSize(50):这是一个方法调用,用来设置文本的字体大小为50。

● fontWeight(FontWeight.Bold):这也是一个方法调用,用来设置文本的字体样式为加粗。

● width('100%'):设置Column的宽度为100%,意味着它将占据其父组件(这里是Row)的全部宽度。

这段代码创建了一个应用程序的主界面,包含一个水平布局,该布局中有一个垂直排列的文本组件,文本内容是“Hello World”,字体大小为50磅,加粗,它的宽度占满整个父容器。

2.添加按钮

在默认页面的基础上,通过添加Button组件,实现按钮的单击响应功能,用于跳转到另一个页面。修改后的Index.ets文件内的代码如文件1-2所示。

文件1-2 修改后的Index.ets

下面来解释一下添加按钮的代码片段的含义:

● Button() { ... }:创建一个按钮组件。按钮内部可以包含文本或其他组件。

● Text('Next'):在按钮内部添加一个文本组件,显示文本“Next”。

● fontSize(30):设置按钮内部文本的字体大小为30。

● fontWeight(FontWeight.Bold):设置按钮内部文本的字体样式为加粗。

● type(ButtonType.Capsule):设置按钮的类型为胶囊形状。

● margin({ top: 20 }):设置按钮的上外边距为20。

● backgroundColor('#0D9FFB'):设置按钮的背景颜色为#0D9FFB。

● width('40%'):设置按钮的宽度为父组件宽度的40%。

● height('5%'):设置按钮的高度为父组件高度的5%。

在ArkTS中,注释的写法与JavaScript或TypeScript相同,因为它们都是基于JavaScript的语法。以下是几种常见的注释方式:

(1)单行注释:以两个斜杠(//)开始,从注释开始到行尾的所有内容均为注释内容,都会被忽略,即不会被程序执行。例如:

// 这是一个单行注释
let value = 10; // 这行代码后面也有一个单行注释

(2)多行注释:以斜杠加星号(/*)开始,以星号加斜杠(*/)结束,包围的内容为注释内容。例如:

/*
  这是一个多行注释的例子
  所有这些行都不会被执行
*/
let value = 20;

(3)HTML风格的注释:虽然HTML风格的注释不是JavaScript或TypeScript的官方注释方式,但在HTML中嵌入JavaScript代码时,有时会使用HTML注释(<![CDATA[]]>)来避免被HTML解析器错误解释。例如:

<!-- 这不是 JavaScript 的官方注释方式,但可以在 HTML 中使用 --><script>
<!--
let value = 30;
// -->
</script>

在ArkUI框架中编写UI组件时,可以通过在组件代码中添加注释来提高代码的可读性和可维护性。

接下来,可在编辑窗口右上角的侧边工具栏中单击Previewer,打开预览器。第一个页面的效果如图1-14所示。

图1-14 Hello World页面在预览器中的显示效果

1.6.5 构建第二个页面

1.新建第二个页面

在Project窗口中依次单击entry→src→main→ets选项,选择pages文件夹并右击,在弹出的快捷菜单中依次选择New→ArkTS File选项,新建一个ArkTS页面,并命名为Second,最后单击Finish按钮。此时,文件目录结构如图1-15所示。

图1-15 添加Second.ets后的文件目录结构

说明

开发者也可以在右击pages文件后,在弹出的快捷菜单中依次选择New→Page选项,这样可以免去手动配置相关页面路由的步骤。

2.配置第二个页面的路由

在Project窗口中依次单击entry→src→main→resources→base→profile选项,打开main_pages.json文件。在src字段中为第二个页面配置路由路径pages/Second,代码如文件1-3所示。

文件1-3 main_pages.json文件中的代码

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

这段代码是一个JSON对象,定义了一个包含两个元素的数组,每个元素都是指向页面路径的字符串。在Web开发或移动应用开发中,这类配置通常用于指定应用程序的页面路由。

● "pages/Index":通常指向应用程序的主页,可能是一个名为Index的页面组件。在单页应用程序(SPA)或多页应用程序中,这可能是用户加载应用时看到的第一个页面。

● "pages/Second":指向应用程序的第二个页面,可能是一个名为Second的页面组件。通常在用户导航到此页面时加载。

3.添加文本及按钮

参照第一个页面,在第二个页面中添加Text组件、Button组件等,并设置其样式。Second.ets文件中的代码如文件1-4所示。

文件1-4 Second.ets文件中的代码

以上代码的说明如下:

● struct Second { ... }:定义了一个名为Second的结构体,它包含了组件的状态和UI布局。

● @State message: string = 'Hi there':定义了一个状态变量message,其初始值为'Hi there'。状态变量用于存储动态数据,该数据变化时UI会自动更新。

● build() { ... }:这是组件的构建函数,用于定义组件的UI布局。

● Row() { ... }:创建了一个Row组件,用于水平排列子组件。

● Column() { ... }:创建了一个Column组件,用于垂直排列子组件,它被放置在Row内部。

● Text(this.message):在Column内部创建了一个Text组件,用于显示状态变量message的值。

● fontSize(50):设置文本组件的字体大小为50。

● fontWeight(FontWeight.Bold):将文本组件的字体样式设置为加粗。

● Button() { ... }:在Column内部创建了一个Button组件,用于响应用户单击事件。

● Text('Back'):在按钮内部添加文本'Back'。

● fontSize(25):设置按钮内部文本的字体大小为25。

● fontWeight(FontWeight.Bold):设置按钮内部文本的字体为加粗。

● type(ButtonType.Capsule):设置按钮的样式为胶囊型。

● margin({ top: 20 }):设置按钮的上外边距为20。

● backgroundColor('#0D9FFB'):设置按钮的背景颜色为#0D9FFB。

● width('40%'):设置按钮的宽度为父组件宽度的40%。

● height('5%'):设置按钮的高度为父组件高度的5%。

● Column().width('100%'):设置Column组件的宽度占满其父组件的宽度。

● Column().height('100%'):设置Column组件的高度占满其父组件的高度。

● Row().height('100%'):设置Row组件的高度占满其父组件的高度。

这段代码定义了一个包含欢迎信息和返回按钮的页面。当用户单击Back按钮时,通常会触发一个事件,允许用户返回到上一个页面。然而,这段代码中并未实现按钮单击事件的处理逻辑。若需要支持返回功能,可通过添加事件监听器并定义相应的处理函数来完成。

1.6.6 实现页面间的跳转

页面间的导航可以通过页面路由router来实现。页面路由router根据页面URL找到目标页面,从而完成跳转。使用页面路由需要导入router模块。

1.第一个页面跳转到第二个页面

在第一个页面中,为跳转按钮绑定onClick事件,这样单击该按钮时即可跳转到第二个页面。修改后的Index.ets文件中的代码如文件1-5所示。

文件1-5 Index.ets文件中的代码

关键代码的解释如下:

● import { router } from '@kit.ArkUI':导入ArkUI框架中的router模块,用于页面路由管理。

● import { BusinessError } from '@kit.BasicServicesKit':导入BusinessError类,用于错误处理。

● onClick(() => { ... }):为按钮添加单击事件监听器。

● console.info(...):在控制台输出信息,表示按钮单击事件被成功接收。

● router.pushUrl({ url: 'pages/Second' }):调用路由模块的pushUrl方法,尝试跳转到pages/Second页面。

● then(() => { ... }):路由跳转成功后执行的回调函数,输出跳转成功的信息。

● catch((err: BusinessError) => { ... }):路由跳转失败后执行的回调函数,用于捕获错误并输出错误代码和消息。

2.第二个页面返回到第一个页面

在第二个页面中,为返回按钮绑定onClick事件,单击该按钮时将返回到第一个页面。修改后的Second.ets文件中的代码如文件1-6所示。

文件1-6 Second.ets文件中的代码

关键代码的解释如下:

● onClick(() => { ... }):为按钮添加单击事件监听器。

● console.info(...):在控制台输出信息,表示按钮单击事件被成功接收。

● router.back():调用路由模块的back方法,尝试返回到前一个页面。

● console.info('成功返回到第一个页面。'):如果成功返回,则输出信息到控制台。

● catch (err) { ... }:如果返回时发生错误,则捕获错误并处理。

● let code = (err as BusinessError).code:从错误对象中获取错误代码。

● let message = (err as BusinessError).message:从错误对象中获取错误消息。

● console.error(...):如果返回失败,则输出错误信息到控制台。

打开Index.ets文件,先单击预览器中的 按钮进行刷新,然后在预览器中单击第一个页面中的Next按钮,即可跳转到第二个页面;单击第二个页面中的Back按钮,将返回到第一个页面,如图1-16所示。

图1-16 预览器中页面显示效果

1.7 本章小结

华为推出的HarmonyOS NEXT是一款面向未来的智能操作系统,具有微内核架构、全场景覆盖、分布式创新、性能流畅、安全至上、开放生态的特点。

HarmonyOS NEXT的深远影响包括加速设备智能化进程,激发技术创新活力和重塑市场竞争格局。对于开发者而言,它不仅是一个平台,更是一个充满机遇的创新舞台,提供了全栈自研能力、原生应用开发、统一生态部署、安全与隐私保障、开放合作生态和丰富的技术支持与社区资源。

在开发环境搭建方面,本章介绍了如何从HarmonyOS Developer官网下载并安装DevEco Studio,配置开发环境,并启用中文化插件。

通过入门程序示例,本章展示了创建ArkTS工程的基本流程,包括构建页面、添加组件和实现页面间跳转的具体方法。

HarmonyOS NEXT的普及将推动智能设备的快速发展,为开发者提供更广阔的创新空间,进一步促进智能生态的繁荣。

1.8 本章习题

(1)HarmonyOS NEXT的核心设计理念包括哪些方面?

(2)HarmonyOS NEXT的声明式UI前端提供了哪些功能?

(3)在HarmonyOS NEXT中,使用ArkTS开发UI应用时,开发者需要关注哪些主要的开发步骤?

(4)在HarmonyOS NEXT开发中,如果输入的参数为异常值(如undefined、null或无效值),系统将如何处理?

(5)安装DevEco Studio时,有哪些主要步骤? sEoEzpgtF691pZKiE9n7ST3I7QA7HjMINst4N7/x7KQ419bGKjvpmEPIF+HhNRID

点击中间区域
呼出菜单
上一章
目录
下一章
×

打开