详细教程 - 从零开发 鸿蒙harmonyOS应用 第四节 （鸿蒙Stage模型 登录页面 ArkTS版 推荐使用）

在鸿蒙OS中，Ability是应用程序提供的抽象功能，可以理解为一种功能。在应用程序中，一个页面即一种能力，如登录页面，即具有登录功能的能力。以下是对鸿蒙新建项目的登录代码功能的详细解读和工作流程的描述：

  1. 新建Ability：在DevEco Studio中，选择一个Empty Ability工程模板，然后在src/main/ets/entryability目录下生成一个Ability文件EntryAbility.ts。

  2. 新建登录页面：在src/main/ets/pages目录下生成一个Login页面，这是基于Ability实现的应用的入口页面。你可以在Login页面中根据业务需要实现入口页面的功能。

  3. 实现登录功能：在登录页面中，你需要实现用户输入用户名和密码，点击登录按钮后，验证用户名和密码的正确性，如果验证通过，则跳转到主页面。

  4. 页面跳转及传参：页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页面url找到目标页面，从而实现跳转。通过页面路由模块，可以使用不同的url访问不同的页面，包括跳转到Ability内的指定页面、用Ability内的某个页面替换当前页面、返回上一页面或指定的页面等。通过params来传递参数。

  5. Ability生命周期：能力有四种生命周期状态：INITIAL (初始态)、INACTIVE (未激活)、ACTIVE (激活)、BACKGROUND (后台)。在Ability的生命周期中，你需要重写onStart(), onActive(), onInactive(), onBackground(), onForeground(), onStop()等方法，来实现Ability的生命周期回调内容。

当然你可以忽略上面，让我们来直接创建带有登录功能的项目模板【Login Ability】，如下图：在这里插入图片描述
直接next：
在这里插入图片描述
点击finish完成创建，创建成功后，本地预览
在这里插入图片描述

工程目录结构（API Version 8~9）

应用/服务支持API Version 4~9。API Version 4~7和API Version 8~9的构建工具和构建插件不同。其中，API Version 4~7构建体系是由Gradle构建工具和构建插件组成；API Version 8~9构建体系是由Hvigor构建工具和构建插件组成。所以API Version 4~7和API Version 8~9的工程目录结构存在差异。下面按照不同开发语言分别介绍API Version 4~7和API Version 8~9的工程目录结构。

ArkTS工程目录结构（Stage模型）

ArkTS Stage模型支持API Version 9，其工程目录结构如下图所示在这里插入图片描述

  • AppScope > app.json5：应用的全局配置信息。
  • entry：应用/服务模块，编译构建生成一个HAP。
  • src > main > ets：用于存放ArkTS源码。
  • src > main > ets > entryability：应用/服务的入口。
  • src > main > ets > pages：应用/服务包含的页面。
  • src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件的详细说明请参考资源文件的分类。
资源目录资源文件说明
base>element包括字符串、整型数、颜色、样式等资源的json文件。每个资源均由json格式进行定义，例如：boolean.json：布尔型 color.json：颜色 float.json：浮点型 intarray.json：整型数组integer.json：整型 pattern.json：样式 plural.json：复数形式 strarray.json：字符串数组 string.json：字符串值
base>media多媒体文件，如图形、视频、音频等文件，支持的文件格式包括：.png、.gif、.mp3、.mp4等。
rawfile用于存储任意格式的原始资源文件。rawfile不会根据设备的状态去匹配不同的资源，需要指定文件路径和文件名进行引用。

一、目录文件介绍

下面我们对项目代码进行一个详细的分析解读：

（1）src > main > ets > entryability*

import type AbilityConstant from '@ohos.app.ability.AbilityConstant';
import hilog from '@ohos.hilog';
import UIAbility from '@ohos.app.ability.UIAbility';
import type Want from '@ohos.app.ability.Want';
import type window from '@ohos.window';/*** Lift cycle management of Ability.*/
export default class EntryAbility extends UIAbility {onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');}onDestroy(): void {hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');}onWindowStageCreate(windowStage: window.WindowStage): void {// Main window is created, set main page for this abilityhilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');windowStage.loadContent("pages/LoginPage", (err, data) => {if (err.code) {hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');return;}hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');});}onWindowStageDestroy(): void {// Main window is destroyed, release UI related resourceshilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');}onForeground(): void {// Ability has brought to foregroundhilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');}onBackground(): void {// Ability has back to backgroundhilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');}
}

这段代码是鸿蒙应用的入口Ability，它继承自UIAbility类，用于管理Ability的生命周期和窗口阶段。下面是对这段代码的详细解读：

  1. 导入模块：首先，代码导入了必要的模块，包括AbilityConstant、hilog、UIAbility、Want和window。

  2. Ability生命周期管理：EntryAbility类继承自UIAbility类，重写了onCreate、onDestroy、onForeground和onBackground等方法，用于管理Ability的生命周期。

  3. 窗口阶段管理：EntryAbility类还重写了onWindowStageCreate和onWindowStageDestroy方法，用于管理窗口阶段。在onWindowStageCreate方法中，加载了登录页面LoginPage，并在加载成功后打印日志。

  4. 日志打印：在每个方法中，都使用了hilog模块打印了日志，用于调试和跟踪代码执行情况。

这样写的原因是，鸿蒙应用的入口Ability需要管理Ability的生命周期和窗口阶段，以及加载应用的主页面。同时，打印日志可以帮助开发者调试代码和跟踪代码执行情况。
它继承自UIAbility类，用于管理Ability的生命周期和窗口阶段。下面是对这段代码的详细解读：

import type AbilityConstant from '@ohos.app.ability.AbilityConstant';
import hilog from '@ohos.hilog';
import UIAbility from '@ohos.app.ability.UIAbility';
import type Want from '@ohos.app.ability.Want';
import type window from '@ohos.window';

这部分代码导入了必要的模块，包括AbilityConstant、hilog、UIAbility、Want和window。

export default class EntryAbility extends UIAbility {

这里定义了一个名为EntryAbility的类，它继承自UIAbility类。

 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');}

onCreate方法在Ability创建时被调用，这里打印了一条日志。

 onDestroy(): void {hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');}

onDestroy方法在Ability销毁时被调用，这里打印了一条日志。

onWindowStageCreate(windowStage: window.WindowStage): void {// Main window is created, set main page for this abilityhilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');windowStage.loadContent("pages/LoginPage", (err, data) => {if (err.code) {hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');return;}hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');});}

onWindowStageCreate方法在窗口阶段创建时被调用，这里加载了登录页面LoginPage，并在加载成功后打印了一条日志。

onWindowStageDestroy(): void {// Main window is destroyed, release UI related resourceshilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');}

onWindowStageDestroy方法在窗口阶段销毁时被调用，这里打印了一条日志。

onForeground(): void {hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
}
onBackground(): void {hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
}

onForeground和onBackground方法分别在Ability进入前台和后台时被调用，这里分别打印了一条日志。

（2）src > main > pages>

在鸿蒙Login Ability项目中，CustomerServicePage.ets、LoginPage.ets、MinePage.ets、PrivacyPage.ets、RegistrationSuccessPage.ets 都是Ability内的页面12。每个页面都有其特定的功能和作用。具体来说：

  • CustomerServicePage.ets：这个页面用来提供客户服务信息的。用户可以在这个页面上查看和获取客户服务相关的信息，在系统中单击遇见问题按钮跳转到此页面。

  • LoginPage.ets：这个页面是登录页面。它的主要功能是让用户输入他们的登录凭据（如用户名和密码），以便验证他们的身份并允许他们访问应用的其他部分。

  • MinePage.ets：这个页面是用户的个人页面或者个人中心。用户可以在这个页面上查看和管理他们的个人信息和设置。

  • PrivacyPage.ets：这个页面是用来显示应用的隐私政策的。用户可以在这个页面上查看应用如何收集、使用和存储他们的个人数据的信息。

  • RegistrationSuccessPage.ets：这个页面是用户成功注册后显示的页面。它可能会显示一些欢迎信息，或者提供一些关于下一步操作的指导。

具体的功能可能会根据实际的应用需求和设计有所不同。在实际的开发过程中，开发者可以根据需要在这些页面中实现各种功能。例如，页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页面url找到目标页面，从而实现跳转。通过params来传递参数。在使用页面路由之前，需要先导入router模块。页面跳转的几种方式，根据需要选择一种方式跳转即可。具体的实现细节，在评论区互动，我会进一步详细出教程
下面主要我们来介绍一下 LoginPage 页面：

LoginPage
import router from '@ohos.router';
import MediaQueryModel from '../model/MediaQueryModel';
import { CommonConstants } from '../common/constants/CommonConstants';
import { PrivacyStatementComponent } from '../view/PrivacyStatementComponent';
import { LoginComponent } from '../view/LoginComponent';/*** This template implements the Login function.* First register personal details. Log in after entering the username and password.* Click the button at the bottom to ask for help and check the privacy statement.* Developers can save username and password by Preference or Relational Database.*/
@Entry
@Component
struct LoginPage {aboutToAppear() {MediaQueryModel.register();}aboutToDisappear() {MediaQueryModel.unRegister();}build() {Column() {this.Title()Scroll() {Column() {LoginComponent()Blank()PrivacyStatementComponent()}.height(CommonConstants.SCROLL_HEIGHT_PERCENT).constraintSize({ minHeight: $r('app.float.scroll_min_height') }).alignItems(HorizontalAlign.Start).padding($r('app.float.login_operation_area_padding'))}.layoutWeight(CommonConstants.LOGIN_SCROLL_LAYOUT_WEIGHT)}.width(CommonConstants.LOGIN_PAGE_WIDTH_PERCENT).backgroundColor($r('app.color.login_page_background'))}@Builder Title() {Row() {Image($r('app.media.ic_back')).width($r('app.float.image_size')).height($r('app.float.image_size')).margin({left: $r('app.float.image_margin_left'),right: $r('app.float.image_margin_right')}).onClick(() => {router.back();})Text($r('app.string.title')).fontSize($r('app.float.title_text_size')).fontColor($r('app.color.title')).fontWeight(CommonConstants.TITLE_FONT_WEIGHT)}.width(CommonConstants.FULL_WIDTH_PERCENT).height($r('app.float.title_height'))}
}

这段代码是鸿蒙应用的登录页面，它使用了鸿蒙的UI框架来构建用户界面。下面是对这段代码的详细解读：

import router from '@ohos.router';
import MediaQueryModel from '../model/MediaQueryModel';
import { CommonConstants } from '../common/constants/CommonConstants';
import { PrivacyStatementComponent } from '../view/PrivacyStatementComponent';
import { LoginComponent } from '../view/LoginComponent';

这部分代码导入了必要的模块，包括router、MediaQueryModel、CommonConstants、PrivacyStatementComponent和LoginComponent。

@Entry
@Component
struct LoginPage {}

这里定义了一个名为LoginPage的结构体，它被标记为应用的入口组件

aboutToAppear() {MediaQueryModel.register();
}aboutToDisappear() {MediaQueryModel.unRegister();
}

aboutToAppear和aboutToDisappear方法分别在页面即将出现和即将消失时被调用，这里分别注册和注销了媒体查询模型。

//方法用于构建页面的布局。
build() {//创建一个列布局，它的子组件会垂直排列Column() {//添加标题组件，这是通过Title方法创建的。this.Title()//创建一个滚动组件，它的子组件可以滚动。Scroll() {//在滚动组件中创建一个列布局。Column() {//添加登录组件，这是通过LoginComponent方法创建的。LoginComponent()//添加一个空白组件，用于提供间隔。Blank()//添加隐私声明组件，这是通过PrivacyStatementComponent方法创建的。PrivacyStatementComponent()}.height(CommonConstants.SCROLL_HEIGHT_PERCENT).constraintSize({ minHeight: $r('app.float.scroll_min_height') }).alignItems(HorizontalAlign.Start).padding($r('app.float.login_operation_area_padding'))//设置滚动组件的高度、最小高度、子组件的水平对齐方式和内边距。}.layoutWeight(CommonConstants.LOGIN_SCROLL_LAYOUT_WEIGHT)//设置滚动组件的布局权重，这决定了它在父组件中占据的空间比例}.width(CommonConstants.LOGIN_PAGE_WIDTH_PERCENT).backgroundColor($r('app.color.login_page_background'))//设置列布局的宽度和背景颜色。}

build方法用于构建页面的布局，这里构建了一个包含标题、登录组件和隐私声明组件的滚动列。

//这里定义了一个名为Title的方法，它被标记为构建器，用于构建标题组件。
@Builder Title() {//创建一个行布局，它的子组件会水平排列。Row() {//添加一个图片组件，图片的资源路径是从资源文件中获取的。Image($r('app.media.ic_back')).width($r('app.float.image_size')).height($r('app.float.image_size'))//设置图片的宽度和高度，这些值是从资源文件中获取的。.margin({left: $r('app.float.image_margin_left'),right: $r('app.float.image_margin_right')})//设置图片的左右边距，这些值是从资源文件中获取的。.onClick(() => {//设置图片的点击事件，当点击图片时，会调用路由的back方法，返回上一页面。router.back();})//添加一个文本组件，文本的内容是从资源文件中获取的。Text($r('app.string.title')).fontSize($r('app.float.title_text_size')).fontColor($r('app.color.title')).fontWeight(CommonConstants.TITLE_FONT_WEIGHT)//设置文本的字体大小、颜色和粗细，这些值是从资源文件和常量文件中获取的。}.width(CommonConstants.FULL_WIDTH_PERCENT).height($r('app.float.title_height'))//设置行布局的宽度和高度，这些值是从常量文件和资源文件中获取的}

Title方法用于构建页面的标题，这里构建了一个包含返回图标和标题文本的行。

以上就是对这段代码的详细解读。这样写的原因是，鸿蒙的UI框架提供了一种声明式的方式来构建用户界面，使得代码更加简洁和易于理解。

结语

其它版本：详细教程 - 从零开发 Vue 鸿蒙应用 第二节 （鸿蒙Stage模型 登录页面 JS版）
有写的不对的地方，欢迎大家评论区指错批评！！！

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

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

相关文章

C++入门篇

C++入门篇

呀哈喽，我是结衣。 了解完C的发展历程，我们当然也要会用C啊。今天这篇博客就是来帮助我们来入门C的，当然要入门C当然也要先学会C语言啦。在我学习C的过程中我会一直把C博客更新下去的。 C关键字 我们都知道C语言是有32个关键字的&#xff0…
阅读更多...
json JSON.parse()与JSON.stringify()

json JSON.parse()与JSON.stringify()

JSON.parse() 属于解析 JSON.parse()方法解析一个JSON字符串为ECMAScript值，返回解析后的值， JSON.parse({}); // -> {}JSON.parse([]); // -> []JSON.parse(1); // -> {}注意：JSON.parse()解析的JSON字符串不允许以逗…
阅读更多...
Python-数据分析可视化实例图

Python-数据分析可视化实例图

Python-数据分析可视化实例图 一：3D纹理图 运行效果图： Python代码： import math from typing import Unionimport pyecharts.options as opts from pyecharts.charts import Surface3Ddef float_range(start: int, end: int, step: Union[…
阅读更多...
分享66个Java源码总有一个是你想要的

分享66个Java源码总有一个是你想要的

分享66个Java源码总有一个是你想要的 学习知识费力气，收集整理更不易。 知识付费甚欢喜，为咱码农谋福利。 链接：https://pan.baidu.com/s/1hKlZJB3KrHcOuKWyV1xjKw?pwd6666 提取码：6666 项目名称 ava web个人网站项目 ea…
阅读更多...
不是生活有意思，是你热爱生活它才有意思

不是生活有意思，是你热爱生活它才有意思

明制汉服的设计 同样是一款很重工的外套 细节上也是做到了极致 顺毛毛呢面料 领口袖口拼接仿貂毛环保毛条 前胸欧根纱刺绣圆形布 袖子贴民族风珠片刺绣织带 门襟搭配金属子母扣，真盘扣设计 时尚经典，搭配马面裙孩子穿上 真的很有气质奢华富贵 …
阅读更多...
程序人生15年人生感悟

程序人生15年人生感悟

计算机程序员并不是一件什么高大上的职业。而仅仅是一份普通的工作。就像医生能治病救人，我们能治蓝屏救程序，我们都在为这个世界默默的做出自己的贡献。刻意或无意宣扬某个职业高大上，其实质是对其它行业从业者的不公平。但是有些人却常常这…
阅读更多...
Node.js安装教程

Node.js安装教程

虽然网上Node.js的安装教程有很多，但是基本上都是千篇一律。虽然跟着网上内容安装，却总会遇到乱七八糟的问题。为此，我写下这篇文章，除了描述node的安装教程，还会解释这样安装的过程起到一个什么作用。 文章大致上分为…
阅读更多...
【PHP入门】1.2-常量与变量

【PHP入门】1.2-常量与变量

-常量与变量- PHP是一种动态网站开发的脚本语言，动态语言特点是交互性，会有数据的传递，而PHP作为“中间人”，需要进行数据的传递，传递的前提就是PHP能自己存储数据（临时存储） 1.2.1变量基本概…
阅读更多...
微服务实战系列之ZooKeeper（下）

微服务实战系列之ZooKeeper（下）

前言 通过前序两篇关于ZooKeeper的介绍和总结，我们可以大致理解了它是什么，它有哪些重要组成部分。 今天，博主特别介绍一下ZooKeeper的一个核心应用场景：分布式锁。 应用ZooKeeper Q：什么是分布式锁 首先了解一下&…
阅读更多...
04 python函数

04 python函数

4.1 函数的快速开发体验 """ 演示，快速体验函数的开发和使用 """#需求，统计字符串的长度，不使用内置函数len()str1 itheima str2 itcast str3 python#定义一个计数的变量 count 0 for i in str1:count 1…
阅读更多...
FPGA使用乘法的方式

FPGA使用乘法的方式

FPGA使用乘法的方式 方法一：直接使用乘法符“＊” 源代码 module multiply(input [7:0] a,input [7:0] b,output wire [15:0] result);(*use_dsp48 = "yes"*) wire [15:0] result;assign result = a*b; endmodule仿真代码 module multiply_tb();reg [7:0] a; re…
阅读更多...
java minio通过getPresignedObjectUrl设置(自定义)预签名URL下载文件的响应文件名之minio源码改造方案

java minio通过getPresignedObjectUrl设置(自定义)预签名URL下载文件的响应文件名之minio源码改造方案

Minio预签名URL自定义响应文件名之Minio源码改造 需求说明Minio源码改造一、环境准备二、下载Minio源代码三、修改源代码1.修改cmd目录下的api-router.go这个代码文件2.将filename参数值设置到响应头4.修改验证签名时是否需要带入filename参数验证 四、大功告成，编译…
阅读更多...
残差网络中的BN （Batch Normalization 批标准化层）的作用是什么？

残差网络中的BN （Batch Normalization 批标准化层）的作用是什么？

文章目录 什么是BN （Batch Normalization 批标准化层）一、BN层对输入信号进行以下操作:二、BN 层有什么作用？ 什么是BN （Batch Normalization 批标准化层） BN层的全称是Batch Normalization层,中文可以翻译为批标准化…
阅读更多...
如何让.NET应用使用更大的内存

如何让.NET应用使用更大的内存

我一直在思考为何Redis这种应用就能独占那么大的内存空间而我开发的应用为何只有4GB大小左右，在此基础上也问了一些大佬，最终还是验证下自己的猜测。 操作系统限制 主要为32位操作系统和64位操作系统。 每个进程自身还分为了用户进程空间和内核进程空…
阅读更多...
Mybatis-Spring整合原理：MapperFactoryBean和MapperScannerConfigurer的区别及源码剖析

Mybatis-Spring整合原理：MapperFactoryBean和MapperScannerConfigurer的区别及源码剖析

文章目录 引言MapperFactoryBean的用法和优缺点MapperScannerConfigurer的用法和优缺点MapperFactoryBean源码分析MapperScannerConfigurer源码分析Spring容器初始化流程回顾核心方法：postProcessBeanDefinitionRegistryBeanDefinitionRegistryPostProcessor和BeanF…
阅读更多...
Java 并发编程(六)-Fork/Join异步回调

Java 并发编程(六)-Fork/Join异步回调

一、并发编程 1、Fork/Join分支合并框架 Fork/Join它可以将一个大的任务拆分成多个子任务进行并行处理，最后将子任务结果合并成最后的计算结果，并进行输出。Fork/Join框架要完成两件事情： Fork：把一个复杂任务进行分拆&#xff0…
阅读更多...
下午好~ 我的论文【CV边角料】（第三期）

下午好~ 我的论文【CV边角料】（第三期）

文章目录 CV边角料Pixel ShuffleSENetCBAMGlobal Context Block (GC)Criss-Cross Attention modules (CC) CV边角料 Pixel Shuffle Real-Time Single Image and Video Super-Resolution Using an Efficient Sub-Pixel Convolutional Neural Network pixelshuffle算法的实现流…
阅读更多...
EXCEL SUM类函数

EXCEL SUM类函数

目录 一. SUM二. SUMIF三. SUMIFS四. SUMPRODUCT 一. SUM ⏹对一列或一组单元格中的数字进行求和。 基本语法 SUM(number1, [number2], ...)✅统计所有产品的总数量 SUM(C2:C13) 二. SUMIF ⏹按照特定条件对范围内的单元格进行求和的函数。 基本语法 SUMIF(条件区域, 指定…
阅读更多...
山西电力市场日前价格预测【2023-12-16】

山西电力市场日前价格预测【2023-12-16】

日前价格预测 预测说明： 如上图所示，预测明日（2023-12-16）山西电力市场全天平均日前电价为259.00元/MWh。其中，最高日前电价为333.74元/MWh，预计出现在18:00。最低日前电价为0.00元/MWh，预计出…
阅读更多...
C语言训练：三个字符串比较大小，实现两个整数数的交换统计二进制中1的个数

C语言训练：三个字符串比较大小，实现两个整数数的交换统计二进制中1的个数

目录 一、编写程序，输入三个字符串，比较它们的大小，并将它们按由小到大的顺序输出。要求用函数、指针实现。要求:要采用函数调用，并用指向函数的指针作为函数的参数。 1.不使用函数指针作为参数，并自己模拟strcmp。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023