#HarmonyOS NEXT体验官#HarmoneyOSNext项目实战实现用户欢迎页面原创

小黄要努力

发布于 2024-7-31 13:08

浏览

0收藏

什么是app的脸面？

#HarmonyOS NEXT体验官#HarmoneyOSNext项目实战实现用户欢迎页面-鸿蒙开发者社区

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

#HarmonyOS NEXT体验官#HarmoneyOSNext项目实战实现用户欢迎页面-鸿蒙开发者社区

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

品牌形象展示：

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

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

提升用户体验：

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

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

技术优化：

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

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

营销和推广：

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

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

用户留存：

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

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

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

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

看图

#HarmonyOS NEXT体验官#HarmoneyOSNext项目实战实现用户欢迎页面-鸿蒙开发者社区

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

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

#HarmonyOS NEXT体验官#HarmoneyOSNext项目实战实现用户欢迎页面-鸿蒙开发者社区

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

来定义一个初始值

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

#HarmonyOS NEXT体验官#HarmoneyOSNext项目实战实现用户欢迎页面-鸿蒙开发者社区

接下来我们需要实现字符串的倒计时方法，并且在倒计时为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);
  };

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

#HarmonyOS NEXT体验官#HarmoneyOSNext项目实战实现用户欢迎页面-鸿蒙开发者社区

那我们肯定还需要用户主动的去触发跳转，毕竟不是每个人都想要等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)
  }

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

#HarmonyOS NEXT体验官#HarmoneyOSNext项目实战实现用户欢迎页面-鸿蒙开发者社区