ArcTs+UI登录页面路由跳转

登录+跳转功能（携带参数）

前言

承接上篇文章，在登录的基础上增加了假数据库，登录验证和跳转功能
ArcTs
1.定义了用户interface，然后在全局创建了一个数组作为假数据库
2.加入了登录验证逻辑，判断账号密码是否正确
3.加入注册验证逻辑，判断新账号是否已经存在
4.加入跳转（写在了UI组件中），如果账号密码正确，则携带参数（整个user对象）到下一个页面，跳转用到了router包，因为还想直接返回上一个页面，所以用了router的pushUrl方法
5.第二个页面借助钩子函数aboutToAppear接收这个参数，用router.getParam接收，强制转换as为RouterUserInfo（这里可以把上一个页面的user直接单写一个ets或者ts文件，然后导入使用），然后用变量接收，渲染
UI
UI方面对我来说比较新颖的是Blank()组件，这个可以像弹簧一样撑起空白区域
然后就是Text组件也可以包含Span组件，用来定制Text里面的文本，例如UI汇的协议
然后有些图标是SVG格式，SVG可以在尺寸变化的同时不失真，可以在华为官网上下载，也可以在 阿里巴巴图标上下载（推荐）

效果

只可以登录和注册嗷（直接点击注册即可）

代码

登录页面

import { router } from '@kit.ArkUI'

/*
* 1.布局容器+顶部+logo
* 2.输入框和登录区域
* 3.底部模块区域
* 4.预先了解每个模块的尺寸
*
* 思路分析
* 1.布局容器：整体从上往下-colom
* 2.布局背景 backgroundImage
* 3.顶部左右布局 -Row、SpaceBetween
* 4.logo Image图片
 * */

// 数据库
interface User {
  name: string
  username: string
  password: string
}

//返回的处理信息
interface R {
  flag: boolean
  message: string
}

let users: User[] = [
  { name: '军哥', username: 'admin', password: '123' }]

// 用户登录方法
function login(username: string, password: string) {
  let exit: boolean = false
  let index: number = 0
  for (let i = 0; i < users.length; i++) {
    if (username == users[i].username) {
      exit = true
      index = i
    }
  }
  if (exit == false) {
    let r: R = { flag: false, message: `该用户不存在，请注册` }
    return r
  }
  if (exit && password == users[index].password) {
    let r: R = { flag: true, message: `欢迎登录，${users[index].name}` }
    return r
  } else {
    let r: R = { flag: false, message: `${users[index].name},您的密码错了` }
    return r
  }
}

// 用户注册方法
function register(username: string, password: string) {
  let exit: boolean = false
  for (let i = 0; i < users.length; i++) {
    if (username == users[i].username) {
      exit = true
    }
  }
  if (exit) {
    let r: R = { flag: false, message: `该用户已经存在` }
    return r
  }
  let user: User = { name: username, username: username, password: password }
  users.push(user)
  let r: R = { flag: true, message: `注册成功` }
  return r
}

//返回用户的name
function getName(username: string) {
  for (let i = 0; i < users.length; i++) {
    if (username == users[i].username) {
      return users[i].name
    }
  }
  return 'default name'
}

@Entry
@Component
struct loginPage {
  //测试 钩子函数
  onPageShow(): void {
    console.log('loginPage----onPageShow')
  }
  onPageHide(): void {
    console.log('loginPage----onPageHide')
  }
  aboutToDisappear(): void {
    console.log('loginPage----aboutToDisappear')
  }
  aboutToAppear(): void {
    console.log('loginPage----aboutToAppear')
  }
  @State name: string = ''
  @State username: string = ''
  @State password: string = ''
  @State flag: boolean = false
  @State r: R = { flag: false, message: '' }

  build() {
    Column() {
      //顶部区域
      Row() {
        Image($r('app.media.ic_public_cancel'))
          .width(20)
        Text('帮助')
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)

      // logo
      Image($r('app.media.head'))
        .width(250)
        .height(250)
        .borderRadius(125)

      Row() {
        TextInput({
          placeholder: '请输入用户名'
        })
          .onChange(value => {
            this.username = value
          })
          .placeholderColor('#666')
          .height(40)
          .borderRadius(20)
          .backgroundColor('#fff')
      }
      .width('100%')
      .height(40)
      .backgroundColor('#fff')
      .borderRadius(20)
      .margin({ top: 10 })

      //密码
      TextInput({
        placeholder: '请输入密码'
      })
        .onChange(value => {
          this.password = value
        })
        .type(InputType.Password)
        .placeholderColor('#666')
        .height(40)
        .borderRadius(20)
        .backgroundColor('#fff')
        .margin({ top: 20 })
      //复选框
      Row() {
        Checkbox()
          .width(10)
          .margin({ top: 7 })
          .onChange(value => {
            this.flag = value
          })
        Text() { //如果有文本需要单独定制，可以用text包裹span
          Span('我已阅读并同意')
          Span('《海草用户服务协议》')
            .fontColor('#3274f6')
          Span('和')
          Span('《海草隐私政策》')
            .fontColor('#3274f6')
          Span('未注册的手机号将自动创建海草账号')
        }
        .fontSize(12)
        .fontColor('#666')
        .lineHeight(20)
      }
      .alignItems(VerticalAlign.Top)
      .margin({ top: 20 })

      //登录和注册链接
      Button('登录')
        .width('100%')
        .backgroundColor('#bf2838')
        .margin({ top: 25 })
        .onClick(() => {
          // 判断账号密码是否为空
          if (!this.username || !this.password) {
            AlertDialog.show({
              message: '用户名和密码不能为空'
            })
            return
          }
          // 判断是否勾选
          if (this.flag == false) {
            AlertDialog.show({
              message: '请勾选协议'
            })
            return
          }

          // 登录并且验证结果
          this.r = login(this.username, this.password)
          if (this.r.flag) {
            this.name = getName(this.username)
            router.pushUrl({
              url: 'pages/RouterDemoPage',
              params: {
                name: this.name,
                username: this.username,
                password: this.password
              }
            })
          } else {
            AlertDialog.show({
              message: this.r.message
            })
          }
        })
      //注册链接
      Row({ space: 25 }) {
        Text('新用户注册').fontSize(14).fontColor('#666')
          .onClick(() => {
            let re: R = register(this.username, this.password)
            AlertDialog.show({
              message: re.message
            })
          })
        Text('手机号登录').fontSize(14).fontColor('#666')
        Text('无法登录').fontSize(14).fontColor('#666')
      }
      .margin({ top: 20 })

      //填充空白区域（像弹簧）
      Blank()
        .margin({ top: 15 })
      //其他登录链接
      /*
       * 1.整体Colum列
       * 2.标题text
       * 3.三方登录Row->image
       * 4.底部居底：blank（）填充组件
       * */
      Column() {
        Text('其他登录方式')
          .fontColor('#666')
          .height(22)
          .fontSize(14)
          .margin({ bottom: 28 })
        Row() {
          Image($r('app.media.huawei')).width(34)
          Image($r('app.media.wechat')).width(34)
          Image($r('app.media.QQ')).width(34)
          //Image($r('app.media.zhifubao')).width(34)
        }
        .width('100%')
        .margin({ bottom: 30 })
        .justifyContent(FlexAlign.SpaceAround)
      }
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .backgroundImage($r('app.media.ying_and_shenlilinghua'))
    .backgroundImageSize(ImageSize.Cover)
    .backgroundBlurStyle(BlurStyle.Thick) //设置虚化背景的样式
  }
}

跳转后的页面

这个页面em，dddd

import { router } from '@kit.ArkUI'
interface RouterUserInfo {
  name: string
  username: string
  password: string
}

@Entry
@Component
struct RouterDemoPage {
  userInfo:RouterUserInfo = {name:'',username:'',password:''}

  //在页面展示之前获取
  aboutToAppear(): void {
    const user = router.getParams() as RouterUserInfo
    this.userInfo = user
  }

  build() {
    Column(){
      //渲染传递过来的数据
      Text(`name:${this.userInfo.name}`)
        .fontSize(20)
      Text(`username:${this.userInfo.username}`)
        .fontSize(20)
      Text(`password:${this.userInfo.password}`)
        .fontSize(20)
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

跟着黑马敲的登录页面