ShortVideoApp用户注册登录模块二

一、解析本地图片资源列表准备头像图片资源数据及JSON数据---放在\ArkTSShortVideo\entry\src\main\resources\rawfile\portrait路径下；传递头像数据给头像相册页面PortraitAlbumPage

css 复制代码

PORTRAIT_INFO_ARR : PortraitInfo [] = [
  {
    "id":0,
    "portraitPath": "/portrait/portrait_00.jpg"
  }]

developer.huawei.com/consumer/cn... 二、传递头像数据给头像相册页面PortraitAlbumPage 通过路由方式传递数据头像相册上设置点击事件--通过路由参数把数据传回注册页面

php 复制代码

头像相册
Image($rawfile(portraitInfo.portraitPath))
  .width('100%')
  .height('100%')
  .onClick(()=>{
    //点击选择头像
    //返回注册登录页面
    router.back({
      url:'pages/RegisterPage',
      params:{'selectedPortraitInfo': portraitInfo}
    })
  })

三、通过onPageShow方式获取头像选择的结果 1.在onPageShow里来获得头像选择的结果；2.显示获取到的头像

csharp 复制代码

@State selectedPortraitInfo:PortraitInfo = new PortraitInfo();
//页面显示时候的生命周期
onPageShow(): void {
  //从路由参数中获取选中的头像
  let params = router.getParams();
  //判断路由参数对象是否存在，存在再获取头像数据
  if (params != null) {
    this.selectedPortraitInfo = (params as Record<string,PortraitInfo>) [`${Constants.PARAM_SELECTED_PORTRAIT_INFO_KEY}`];
  }
}

四、用户登录校验及页面跳转 1.获取注册用户的账号和密码；2.账号、密码的非空校验，有任何一项是空的则登录失败。3.登录成功导航到首页-index页面；登录失败导航弹出提示框

kotlin 复制代码

//提交
Button('注册/登录',{type:ButtonType.Normal})
  .width(320)
  .height(50)
  .borderRadius(8)
  .margin({top:'10'})
  .backgroundColor((this.username != '' && this.password != '')?'#ff3333':'#ffd0da')//用户名和密码都不为空时，按钮变色
  .fontSize(24)
  .onClick(()=>{
    if (this.username != '' && this.password != ''
    && this.selectedPortraitInfo.portraitPath != null) {
      let userInfo:UserInfo = new UserInfo(0,this.username,this.password,this.selectedPortraitInfo.portraitPath);
      router.replaceUrl({
        url:'pages/Index',
        params:{'loggedUserInfo':userInfo}
        // params:{[`${Constants.PARAM_LOGGED_USER_INFO_KEY}`]: userInfo}
      })
    }
    else{
      //校验不通过
      promptAction.showToast({
        message:'账号、密码、头像不能为空！', // 提示信息
        duration:2000 //持续2秒
      })
    }
  })

五、设置应用启动默认页面

在onWindowStageCreate()方法里修改默认启动页面 ` onWindowStageCreate(windowStage: window.WindowStage): void { // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

javascript 复制代码

// 默认启动页面，改为注册登录页面
windowStage.loadContent('pages/RegisterPage', (err, data) => {
  if (err.code) {
    hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
    return;
  }
  hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});