HarmonyOS 鸿蒙实现用户欢迎页面

什么是app的脸面？

如何通过一瞬间吸引到用户？从而留住用户？

没错，就是我们的····欢迎页（也称为启动页、引导页或启动画面）对于应用程序来说是非常重要的，尤其是在用户体验设计方面。欢迎页通常是用户第一次启动应用程序时看到的第一个界面。以下是欢迎页对于应用程序重要性的几个方面：

品牌形象展示：

视觉印象：欢迎页可以帮助建立第一印象，通过色彩、字体、图像等元素来传达应用的品牌形象。

品牌一致性：保持与应用整体设计风格一致的设计，强化品牌形象。

提升用户体验：

减少等待感：当应用程序启动时，可能需要一些时间来加载资源。一个精心设计的欢迎页可以减轻用户的等待感。

引导用户：对于初次使用应用的用户，欢迎页可以用作简单的介绍或教程，帮助用户快速了解应用的主要功能。

技术优化：

加载优化：在欢迎页期间，应用可以预加载重要的资源或数据，提高后续操作的速度。

性能提升：通过在后台处理启动过程中的计算密集型任务，可以让主界面更快地呈现给用户。

营销和推广：

推广信息：可以在欢迎页中展示应用的最新特性或促销活动，吸引用户进一步探索应用。

收集数据：某些情况下，欢迎页也可以用于收集用户的基本信息或偏好设置。

用户留存：

增加吸引力：一个吸引人的欢迎页可以提高用户对应用的好感度，进而增加用户留存率。

可想而知一个好的欢迎页面对我们的应用有多重要，那妥妥的应用门面啊，能不能吸引用户去探索应用，全看你的欢迎页有没有心意。

现在我们知道了欢迎页面的重要性，那我们如何在鸿蒙开发中去实现一个欢迎页面呢？要实现这个页面我们都需要掌握那些技术呢？

现在就跟随我的步伐，教你如何在HarmoneyOS开发中实现欢迎页面，给你的鸿蒙开发技术添砖加瓦，让你快人一步

看图

这样一个页面就是我们的欢迎页面，在这个页面上元素比较简单，仅有图片和跳转按钮。

当然我们仅有这两个ui组件很显然是不够的，我们还需要书写一定的方法去调用他，让他能够在5秒后自动的关闭，引导用户进入我们的应用首页

首先我们使用text组件进行填充，设置好属性让他在布局上方偏右的地方，然后我们通过鸿蒙的

@State countDownSeconds: number = 5;

来定义一个初始值

然后通过this.countDownSeconds 的方式填充进我们的text组件中实现效果如下

接下来我们需要实现字符串的倒计时方法，并且在倒计时为0的时候通过router 进行页面的跳转

首先定义一个跳转方法，方便我们去使用

  /**

   *  调转到登陆页面

   */

  jumpToAppHomePage() {

    router.pushUrl({

      url: “pages/login/LoginPage”

    }).catch((error) => {

    });

  }

然后我们使用setInterval 函数：

setInterval 是 js中 的全局对象的一个方法，用于周期性地（每隔一定的时间间隔）执行一个函数或指定的代码段。

同时需要创建一个

private timeId: number;

timeId 是一个变量，它被赋值为 setInterval 返回的 ID。这个 ID 可以用来稍后取消定时器，然后我们在组件的生命周期函数onPageShow中去调用

  onPageShow() {

    this.timeId = setInterval(() => {

      if (this.countDownSeconds == 0) {

        this.jumpToAppHomePage();

      } else {

        this.countDownSeconds–;

      }

    }, 1000);

  };

这时候在执行我们就发现已经实现了倒计时跳转功能了

那我们肯定还需要用户主动的去触发跳转，毕竟不是每个人都想要等5秒，这时候需要在text组件的点击事件中调用我们的跳转方法

onClick(() => {

          this.jumpToAppHomePage();

        })

同时在组件销毁时把定时器取消掉

onPageHide() {

    clearInterval(this.timeId);

    router.clear()

  }

定时器实现完成之后我们放入背景图片代码如下

  Stack({ alignContent: Alignment.Top }) {

      //背景图

      Image(“https://img.zcool.cn/community/0110a9585f82dea8012060c88fe75c.jpg@1280w_1l_2o_100sh.jpg”)

        .width(CommonConstants.FULL_WIDTH)

        .height(CommonConstants.FULL_HEIGHT)

      //右上角文本

      Text($r(‘app.string.advertising_text_title’, this.countDownSeconds))

        .fontColor(Color.White)

        .fontSize($r(‘app.float.advertising_text_font_size’))

        .letterSpacing(CommonConstants.ADVERTISING_TITLE_TEXT_LETTER_SPACING)

        .backgroundColor($r(‘app.color.advertising_text_background_color’))

        .border({

          radius: $r(‘app.float.advertising_text_radius’),

          width: $r(‘app.float.advertising_text_border_width’),

          color: Color.White

        })

        .margin({

          top: $r(‘app.float.advertising_title_text_margin_top’),

          left: $r(‘app.float.advertising_title_text_margin_left’)

        })

        .padding({

          left: $r(‘app.float.advertising_text_padding_left’),

          top: $r(‘app.float.advertising_text_padding_top’),

          right: $r(‘app.float.advertising_text_padding_left’),

          bottom: $r(‘app.float.advertising_text_padding_bottom’)

        })

        .onClick(() => {

          this.jumpToAppHomePage();

        })

    }

    .width(CommonConstants.FULL_WIDTH)

    .height(CommonConstants.FULL_HEIGHT)

  }

运行后可以看到我们想要的效果已经实现