鸿蒙项目云捐助第三讲鸿蒙App应用的启动页实现

鸿蒙项目云捐助第三讲鸿蒙App应用的启动页实现

对于移动端的应用,一般启动app的时候,首先显示启动页,启动页中显示出该应用一些介绍内容,通过这个介绍内容可以了解这个应用具体处理的内容。

进入启动后,通过滑动启动页,然后在最后的启动页点击后,进入到系统的登录页,当登录成功后进入到app的首页,在首页中会出现该应用的具体模块。整个app的具体流程如下图所示。

对于云捐助项目来说,前端采用鸿蒙Next技术,后端使用华为云技术,不过这里需要说明的是,鸿蒙Next项目的入口地址是EntryAbility.ets文件。

在这个项目架构中,项目文件夹的src是整个项目的顶级代码管理目录,main是主模块的文件夹,ets下面的内容包括entryability表示程序页面的入口地址,上图中右侧windowStage.loadContent会加载启动时显示的页面,项目初始化建立后启动页默认为pages中的index.ets页面。ets下面的pages文件夹中包含有可以显示出来的所有页面文件。

在项目架构文件夹的src中还有一个resources文件夹,其存储应用使用的资源文件,在资源文件中,media文件夹保存有项目app中需要的图片,element文件夹中有两个文件,一个是color.json文件,表示颜色的json文件,一个是string.json文件,表示项目中出现的文本内容定义,这里的中文内容可以放在zh_CN目录中。

这里需要强调的是,在resources目录下的profile文件夹中的main_pages.json需要定义显示在app中的页面定义,所有在pages文件夹中可以显示的页面都必须在main_pages中做出引用,没有经过引用的页面是不能在app应用中显示的。具体文件位置如下图所示。

这里可以把关键点总结如下。

(1)多页面的app中的页面都放在pages的文件夹下。
(2)在app中,不论哪一个应用, app启动的第一个显示的页面在entryAbility.ets中进行定义。
(3)项目app中的所有图片都存放在resources的media目录下.
(4)如果app中涉及到多个页面是可以显示的,这里的页面需要引入到profile的main_pages.json的文件中。

接下来就进入云捐助的项目实战过程中。对于app,首先完成启动页的开发。

一、鸿蒙Next云捐助启动页的开发

首先创建一个云捐助的项目,创建的项目名称可以命名为myheart,输入一个默认的包名。新建项目的配置内容如下图所示。

在图中输入的项目名称就是myheart,存储的目录Save location指示到了D盘的指定位置,设备类型Device type这里以Phone为准。配置输入后,点击“Finish”完成项目的创建和配置。

配置后,这里需要启动页的相关素材,可以从百度图库中搜索“启动页”找到对应的素材。如下图所示。

找到启动页后,这里找到两张图,一张图是start1.png,一张图是start2.png。如下图所示。

准备好启动页素材后,下面开始开发启动页,这里创建启动页的ets文件,由于启动页码也是需要显示的,按照鸿蒙Next开发的关键点,所有显示的内容需要存放在pages的文件夹下,我们在pages的文件夹下创建新的ArkTS文件,如下图所示。

图中的操作是在pages中使用鼠标右键,选择New操作,然后点击“ArkTS”创建一个新的ets文件,也就是启动页的文件。

初始建立的启动页文件显示空白,这里需要使用两个注解,一个是@Component表示我们需要实现一个组件,现在的前端需要的开发方式都是组件式开发,鸿蒙Next恰恰采用了组件式开发的思维,@Component就是其中的组件注解。还有一个注解表征显示页面的入口方法,有入口注解的内容就是可以显示的内容,这个注解是@Entry。由于启动页也是需要显示的页面,@Entry和@Component这两个注解都是需要使用的。使用方法如下所示。

//入口指令,入口表示当前这个页面可以显示
@Entry
//现在前端都是组件式开发,这里需要组件的指令是Component
@Component

这里的@Entry和@Component的解释如下。

@Entry 表明当前组件是否在模拟器中是可视的,如果去掉这个注解,这个组件就是不可见的。
@Component 表明当前的ets文件是一个组件,这个注解是必须需要的。

这样建立启动页start.ets的基本ArkTS文件结构如下图所示。

在这个基本结构中,struct关键字指明start启动页的结构,具体的页面布局写在build()的方法中。在这个页面中可以使用鸿蒙Next的Swiper实现滑动组件,当滑动的内容是一幅全屏的图片时就显示出滑动的启动页面。具体代码如下图所示。

代码中build()的方法中使用一个组件元素Flex,这是前端做弹性布局时使用的盒子,在移动端页面布局时需要使用Flex的弹性盒子,在弹性盒子中加入Swiper的滑动组件,滑动组件中加入两个Image图片组件,图片组件分别指向资源文件app.media.start1和app.media.start2,这两个图片组件都使用了width和height属性设置宽和高,这里的width宽设置为100%,表示全部长度的屏幕,这里的height高设置为110%,表示高度设置为全屏。注意backgroundImageSize 的属性方法表示当图片不能覆盖整个背景时通过ImageSize.Contain属性实现整个图片对背景的拉伸。

整体的Swiper滑动组件还设置一下上部top的外边距,这里的外边距上移了-50的长度,目的是使整个手机屏幕显示没有空白的部分。

代码最终显示的“Preview”的预览图如下。

这里完成云捐助的启动页实现,后面持续完成首页、捐助页等相关的功能页面,请持续关注。

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

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

相关文章

flink sink kafka的事务提交现象猜想

现象 查看flink源码时 sink kafka有事务提交机制,查看源码发现是使用两阶段提交策略,而事务提交是checkpoint完成后才执行,那么如果checkpoint设置间隔时间比较长时,事务未提交之前,后端应该消费不到数据&#xff0c…

Mumu模拟器12开启ADB调试方法

在使用安卓模拟器进行开发或调试时,ADB(Android Debug Bridge)是一项不可或缺的工具。大多数模拟器默认开启了ADB调试功能,但在安装最新版的 Mumu模拟器12 时,可能会遇到 adb devices 无法识别设备的问题。 问题描述 …

C/C++中的宏定义

在C程序中,可以用宏代码提高执行效率。宏代码本身不是函数,但使用起来像函数。预处理器用复制宏代码的方式代替函数调用,省去了参数压栈、生成汇编语言的CALL调用、返回参数、执行return等过程,从而提高了速度,避免函数…

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(二)

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(二) 你好,我是拉依达。 感谢所有阅读关注我的同学支持,目前博客累计阅读 27w,关注1.5w人。其中博客《最全Linux驱动开发全流程详细解析(持续更新)-CSDN博客》已经是 Linux驱动 相关内容搜索的推荐首位,感谢大家支持。 《拉…

批量导出工作簿中高清图片-Excel易用宝

我同事在工作簿中做了三个图表,现在需要将工作簿中的图标导出保存为高清图片,通过右键另存为保存的图片并非高清图片,其实要把Excel工作簿中的图表或图片对象导出为高清图片也很简单。 单击Excel易用宝 Plus,导出高清图片。 在导出…

测试工程师八股文05|功能测试、业务测试

一、基础概念 1、软件测试分类 1️⃣按照软件产生的阶段划分 单元测试:针对程序源代码进行测试【开发自测】集成测试:针对模块之间功能交互进行测试系统测试:对整个系统(功能、非功能)进行全面测试验收测试&#xff…

“AI全网络深度学习系统:开启智能时代的新篇章

嘿,大家好!今天咱们来聊聊一个特别前沿的话题——AI全网络深度学习系统。这名字听起来是不是有点像科幻电影里的玩意儿?但其实,它已经悄悄地走进了我们的生活,而且正在改变我们的工作方式。 首先,咱们得搞清…

【Linux|计算机网络】HTTPS工作原理与安全机制详解

目录 1、HTTPS是什么? 2、概念准备 2.1.什么是加密、解密、密钥 2.2.为什么要加密 2.3.常见的加密方式 1.对称加密 2.非对称加密 2.4.数据摘要 && 数据指纹 2.5. 数字签名 3.HTTPS 的工作过程探究 方案 1 - 只使用对称加密 方案 2 - 只使用非对…

shell脚本自动发布Java应用

单体项目或定制化小应用,频繁发布会有些麻烦,用脚本实现git提交完代码自动发布,并完成jar包备份 1.前提条件:linux安装了JDK、Maven、Git 安装参考链接: jdk安装 https://blog.csdn.net/weixin_44904239/article/de…

搭建自己的wiki知识库(重新整理)

写在前面: 之前写过一篇,因为这次修改的内容比较多,所以不想在原基础上修改了,还是重新整理一篇吧。搭建wiki知识库,可以使用在线文档,如xx笔记、xx文档、xx博客、git仓库(如:GitHu…

【Python网络爬虫笔记】10- os库存储爬取数据

os库的作用 操作系统交互:os库提供了一种使用Python与操作系统进行交互的方式。使用os库来创建用于存储爬取数据的文件夹,或者获取当前工作目录的路径,以便将爬取的数据存储在合适的位置。环境变量操作:可以读取和设置环境变量。在…

MySQL:表的内置函数

目录 一. 日期函数 二. 字符串函数 三. 数学函数​编辑 四. 其他函数 博客开始为各位读者介绍一个投递简历的平台:万码优才 专属于程序员的投递平台,大家快去试试吧!!! 此篇博客讲解MySQL中关于表的内置函数。…

亚马逊云科技2024 re:Invent大会亮点:Nova大模型与AI基础设施全面升级

引言 作为云计算领域的年度盛会,亚马逊云科技(AWS)的re:Invent大会一直是业界瞩目的焦点。2024年的大会不负众望,推出了一系列重磅产品和服务,尤其是在人工智能和大模型方面的创新令人印象深刻。本文将为您深入解析此次大会的主要亮点,探讨AWS在AI时代的最新布局及其对行业的潜…

(九)机器学习 - 多项式回归

多项式回归(Polynomial Regression)是一种回归分析方法,它将自变量 xx 和因变量 yy 之间的关系建模为 nn 次多项式。多项式回归的目的是找到一个 nn 次多项式函数,使得这个函数能够最好地拟合给定的数据点。 多项式回归的数学表达…

米家智能设备接入苹果HomeKit,使用NAS部署『Homebridge』

米家智能设备接入苹果HomeKit,使用NAS部署『Homebridge』 哈喽小伙伴们好,我是Stark-C~ 说起HomeKit很多苹果用户都不陌生,作为苹果自己的智能家居生态控制系统,我们可以通过苹果自家应用【家庭】,无论是在家中还是远…

docker入门实践---虚拟机环境配置

文章目录 1.检查内核版本2.确定centos7可以上网3.关闭防火墙4.关闭防火墙5.更换阿里云6.安装gcc7.设置镜像仓库(阿里云)8更新软件包9.安装docket-ce10.启动docker11.普通用户权限设置 1.检查内核版本 2.确定centos7可以上网 3.关闭防火墙 下面的这个表示…

day11 性能测试(3)——Jmeter 断言+关联

【没有所谓的运气🍬,只有绝对的努力✊】 目录 1、复习 2、查看结果树 多个http请求原因分析 3、作业 4、Jmeter断言 4.1 响应断言 4.1.1 案例 4.1.2 小结 4.2 json断言 4.2.1 案例 4.2.2 小结 4.3 断言持续时间 4.3.1 案例 4.3.2 小结 4.…

卫生人员评审专家申报系统|Java|SSM|VUE| 前后端分离

【技术栈】 1⃣️:架构: B/S、MVC 2⃣️:系统环境:Windowsh/Mac 3⃣️:开发环境:IDEA、JDK1.8、Maven、Mysql5.7 4⃣️:技术栈:Java、Mysql、SSM、Mybatis-Plus、VUE、jquery,html 5⃣️数据库可…

TortoiseGit 图标覆盖设置

TortoiseGit 图标覆盖设置 图标覆盖设置隐藏图标覆盖切换样式 我们安装了小海龟后,它会在仓库目录下给所有图标覆盖上状态标记。 图标覆盖设置 右键菜单打开 :设置 》 图标覆盖。 隐藏图标覆盖 如果不想图标上出现小乌龟的状态标记。直接点这里可以…

Redis是什么?Redis和MongoDB的区别在那里?

Redis介绍 Redis(Remote Dictionary Server)是一个开源的、基于内存的数据结构存储系统,它可以用作数据库、缓存和消息中间件。以下是关于Redis的详细介绍: 一、数据结构支持 字符串(String) 这是Redis最…