本周是跟着尚硅谷的教程进行了一个实践项目的编写,相比于黑马的项目,我个人觉得尚硅谷的项目会比较的简单,结构比较清晰。更多使用@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是生命周期函数,当页面展示时会调用这个函数。
答题页
(细心的友友可能发现这个页面的停止测试的止不见了,还有一个奇怪的答案灌,这个我也不太清楚是为什么,在预览器的时候是正常的,但是用模拟器跑的时候就会这样,其他项目也没有问题。知道是为什么的友友麻烦评论区跟我说一下,谢谢大家!)
在这个页面中,我们可以看到底部又有熟悉的tabbar页面切换,这应该是每个手机软件的标配了。用于切换不同的主要页面。除此之外主要有三个部分,统计部分,单词部分,选项部分。
统计部分
由图可见&#x