HarmonyOS学习第六周（实践版）（一）

最新推荐文章于 2025-05-18 08:45:14 发布

超级困~

最新推荐文章于 2025-05-18 08:45:14 发布

阅读量1.5k

点赞数 17

分类专栏： harmonyos 学习笔记文章标签： harmonyos 笔记

本文链接：https://blog.csdn.net/2402_83739313/article/details/138561015

版权

本周是跟着尚硅谷的教程进行了一个实践项目的编写，相比于黑马的项目，我个人觉得尚硅谷的项目会比较的简单，结构比较清晰。更多使用@Builder和@Component，将组件封装在page页面中，好处是更容易寻找，而且不会有那么多的文件，坏处是代码会显得很冗长，而且代码的复用性会比较差。

本周的项目是一个单词打卡项目，包括了登录、打卡、答题等页面，是一个相对完整的项目，但这个项目更像一个纯前端项目，通过调用后端接口，而不是建表和操作数据库来进行数据的交互与存储。

欢迎页

这个页面非常的简单，就是一个背景图片加上一个转场动画。

背景设置

  .backgroundImage($r('app.media.img_splash_bg'))
  .backgroundImageSize({ width: '100%', height: '100%' })

转场动画

转场动画的详细介绍见第三周。

 if(this.flag){
       Image($r('app.media.ic_logo'))
         .logoStyle()
         .transition({type:TransitionType.Insert,opacity:0,translate:{x:-150}})
       Text('快速单词记忆神器')
         .titleStyle()
         .transition({type:TransitionType.Insert,opacity:0,translate:{x:150}})
     }

关键在于调用transition，并设置各种自定义属性。如type可以设置进场动画或者是出场动画。

跳转和动画启动逻辑

 onPageShow(){
    animateTo({duration:1000,onFinish:()=>{
      setTimeout(()=>{
        router.replaceUrl({url:'pages/Index'})
      },200)
    }},()=>{
      this.flag=true;
    })
  }

当我们用transition设置好动画样式后，我们要用animateTo设置动画的运行时间。

onfinish回调函数，用于设置动画完成后的逻辑。动画完成2s后，我们要跳转到到主页，所以用路由router的replaceUrl进行跳转。（用replaceUrl的原因是：欢迎页面一般只有在进入APP时要调用，后续不会再出现）

flag是控制动画开始与否的变量，当flag为true时，才会显示上面的Image和text，动画才会显示。

最外层的onPageShow是生命周期函数，当页面展示时会调用这个函数。