ShortVideoApp用户注册登录模块一

一、ArkUI UI:用户界面 组件：UI构建与显示的最小单位 基于ArkTS的声明式开发范式：组件、动画、状态管理 基础组件、媒体组件、绘制组件、容器组件、画布组件

媒体组件：Video

画布组件：Canvas--绘制图表

二、优化注册登录页面 用ArkUI的组件来设计注册登录页面；实现相册页面；解析本地图片资源列表；选取本地图片资源作为用户头像--图像路径；获取头像选择的结果--存储，页面交互；用户登录校验：用户名&密码--成功or失败--导航到注册登录页面或者首页；设置应用启动默认页面

三、基于TextInput组件搭建用户注册的前台 1.TextInput作为账号密码输入框 2.增加Image作为头像 3.修改Button样式

/*注册登录页面*/
@Entry
@Preview
@Component
export struct RegisterPage{
  @State message:string = 'Register Page';//组件内实时渲染
  build() {
    Row(){
      Column(){
        //头像
        Image($rawfile('portrait/ic_portraitmaleplus.png'))
          .height(96)
          .width(96)

        //账号输入框
        TextInput({placeholder:'请输入账号'})
          .width(320)
          .height(50)
          .backgroundColor('#f9f9f9')
          .borderRadius(8)
          .type(InputType.Normal)//可以输入字母数字等等
          .margin({top:'10'})
          .fontSize(27)
        //密码输入框
        TextInput({placeholder:'请输入密码'})
          .width(320)
          .height(50)
          .backgroundColor('#f9f9f9')
          .borderRadius(8)
          .type(InputType.Password)//pwd输入框
          .margin({top:'10'})
          .fontSize(27)
        //提交
        Button('注册/登录',{type:ButtonType.Normal})
          .width(320)
          .height(50)
          .borderRadius(8)
          .margin({top:'10'})
          .backgroundColor('#ffd0da')
          .fontSize(24)

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

四、基于Grid组件和GridItem组件实现头像相册页面 创建头像数据模型portraitInfo 创建常量类Constants 创建头像相册页面PortraitAlbumPage--在这个页面里使用Grid组件和GridItem组件

export class PortraitInfo {
  id?:number;
  portraitPath?:string;
}

/*
 * 头像相册
 **/
import { PortraitInfo } from '../model/PortraitInfo'
import router from '@ohos.router';
import Constants from '../common/Constants';

@Entry
@Component
struct PortraitAlbumPage{
  @State portraitInfoArr : PortraitInfo [] =  (router.getParams() as Record<string, Array<PortraitInfo>>)[`${Constants.PRARM_PORTRAIT_INFO_ARR_KEY}`];
  build() {
    //导航组件，支持返回
    Navigation(){
      //网格
      Grid(){
        //网格数据GridItem
        ForEach(this.portraitInfoArr,(portraitInfo:PortraitInfo)=>{
          GridItem(){
            Image($rawfile(portraitInfo.portraitPath))
              .width('100%')
              .height('100%')
          }
          .width('100%')
        })
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')//4列
      .rowsGap(2)
      .columnsGap(2)
    }
    .title('头像相册')
    .titleMode(NavigationTitleMode.Mini)
    .hideBackButton(false)//显示返回按钮
  }
}