鸿蒙项目云捐助第三讲鸿蒙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"的预览图如下。
