《仿盒马》app开发技术分享-- 实现欢迎页与账号校验（84）

## 技术栈

Appgallery connect

开发准备

我们的app功能几乎完成了百分之95了，后续我们还会对细节上做更好的打磨，让它更像是一个商业项目，在商业项目中我们每次打开app都会有一个欢迎页面，他可以加载一些大图、广告横幅、视频广告等信息。我们也要实现这样的一个页面，同时我们在用户表设计的时候添加了是否注销字段，我们在这里也使用起来

功能分析

要实现欢迎页面，我们只需要做好大图的展示和倒计时后的自动跳转以及主动的点击跳转，在进入页面时我们就开始从首选项中拿用户数据，如果用户数据存在，我们就根据用户信息查询云数据库中的数据判断当前账号的状态，如果正常进入首页，如果账号异常，则通知用户当前账号已经注销

代码实现

首先我们实现欢迎页

 @State countdown: number = 4;
  @State isJumping: boolean = false;
  private timer: number | null = null;
  @State user: User|null=null
  @State isRemove:boolean=false
startCountdown() {
    this.timer = setInterval(() => {
      if (this.countdown > 1) {
        this.countdown--;
      } 
  
      else {
          this.toHome();
        }


      }
    }, 1000);
  }

倒计时方法实现之后我们添加关闭的方法和跳转方法

toHome() {
    if (this.isJumping) return;
    this.isJumping = true;
    clearInterval(this.timer!);
    router.replaceUrl({ url: 'pages/Index' });
  }


  aboutToDisappear() {
    if (this.timer) clearInterval(this.timer);
  }

在页面进入的时候，我们拿到用户信息，查询当前账号的状态并启动定时器

  async aboutToAppear() {
    this.startCountdown();

    const value = await StorageUtils.getAll('user');
    if (value!='') {
      let userinfo=JSON.parse(value) as User
      let databaseZone = cloudDatabase.zone('default');
      let condition = new cloudDatabase.DatabaseQuery(user);
      condition.equalTo("user_name",userinfo.user_name)
      let listData = await databaseZone.query(condition);
      let json = JSON.stringify(listData)
      let data1:User[]= JSON.parse(json)
      if (data1.length>0) {
        this.user=data1[0]
      }
    }
  }

根据当前的账号状态判断提醒用户还是跳转到首页

 if (this.user!.is_log_off) {
          promptAction.showDialog({
            title: '提示',
            message: '改账号已经注销',
            buttons: [
              {
                text: '知道了',
                color: '#ffffff'
              },
              {
                text: '关闭',
                color: '#ffffff'
              }
            ],
          })
            .then(data => {
              console.info('showDialog success, click button: ' + data.index);
            })
            .catch((err: Error) => {
              console.info('showDialog error: ' + err);
            })
          clearInterval(this.timer!);
        }else {
          this.toHome();
        }

然后我们实现ui相关的内容

 build() {
    Stack({alignContent:Alignment.TopEnd}) {
      Image($r('app.media.splash'))
        .width('100%')
        .height('100%')
        .objectFit(ImageFit.Cover)
      Row(){
        Text(`${this.countdown}秒 | 跳过`)
          .width(100)
          .height(40)
          .textAlign(TextAlign.Center)
          .borderRadius(20)
          .border({width:1,color:Color.White})
          .fontColor('#FFFFFF')
          .backgroundColor('rgba(0,0,0,0.3)')
         
      }
      .padding(15)

    }
    .width('100%')
    .height('100%')
  }

到这我们就实现了欢迎页面