HarmonyOS鸿蒙Next开发中的闪屏页（广告页）技术解析

HarmonyOS鸿蒙Next开发中的闪屏页（广告页）技术解析

1. 什么是闪屏页？ 闪屏页是启动页过后手动添加的一个页面，在启动页过后，有可能要做过一些操作，比如同意协议才能进主页面，但是这个时候不能白屏，可以弄一个和启动页一样的页面顶上，这就要求闪屏页和启动页要一样，且完美过渡。

2. 如何设置闪屏页面？ 创建一个SplashPage.ets页面,在页面里进行这样页局，就可以完美过渡

   build() {
       Column() {
           Image($r("app.media.startIcon"))
               .width('100%')
               .height('100%')
               .objectFit(ImageFit.None)
               .syncLoad(true) // 设置图片为同步加载，避免出现闪烁
               .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
       }
       .height('100%')
       .width('100%')
       .justifyContent(FlexAlign.Center)
       .backgroundColor($r('app.color.L_11'))
       .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
   

   关键参数：

   • objectFit：图片的显示模式。
   • syncLoad：设置图片为同步，避免出现闪烁。
   • expandSafeArea：去除上下安全区，让图片过大时可以全屏显示。

3. 闪屏页总结

   • 核心价值：通过开发这个页面可以在应用不能直接进主页面之前出现白屏，或者加载广告页面之前白屏。
   • 适用场景：在应用刚下载，没有同意协议不能进主页面之前的弹框背景，或者加载广告页引导页之前的缓冲。
   • 最佳实践：设置一个全屏启动页，然后在splashPage里加载一张一样的图片。
   • 调试技巧：在不同屏幕大小的设备上调试验证

示例场景：

• 第一次启动后加载协议弹框，作为背景。
• 冷启动后加载广告页之前的缓冲。