鸿蒙开发编写登录页面

1.鸿蒙开发项目

2.首先需要创建一个登录(Login.ets)页面和首页(Index.ets)页面来编写登录页面和首页media文件夹来储存所需要的图片

3.登录页的代码（Login）

import promptAction from '@ohos.promptAction'
import router from '@ohos.router'
@Entry
@Component
struct Login {
  // 创建用户的账号密码
  @State username:string = 'admin'
  @State password: string = '123456'

  build() {
    Column() {
      //用户头像(导入所需图片)
      Image($r('app.media.avatar'))
        .width(80)
        .height(80)
        .margin({top:100})
      // TextInput来完成用户名认证
      TextInput({placeholder:'请输入用户名',text:this.username })
        .margin({top:20})
        .onChange((value) => {
          this.username = value
        })
      // TextInput来完成密码名认证
      TextInput({placeholder:'请输入密码',text:this.password})
        .type(InputType.Password)
        .margin({top:20})
        .onChange((value) => {
          this.password = value
        })
      // 账号密码输入成功后我们需要在点击登录按钮的情况下进行判断判断账号密码是否正确
      Button('登录')
        .width('80%')
        .margin({top: 30})
        // 点击登录按钮触发某些条件完成路径跳转
        .onClick(() => {
          if(this.username === 'admin' &&  this.password === '123456') {
            router.pushUrl({
              // 需要跳转的路径
              url: 'pages/Index'
            })
          }
          else {
            // 账号密码不符弹出警告
            promptAction.showToast({
              message:'账号或密码错误'
            })
          }
        })
        Text('注册账号').fontColor('#0078fd')
          .margin({top: 10})
    }.width('100%').height('100%').padding(20)
  }
}

4.首页代码（Index）

import router from '@ohos.router'
@Entry
@Component
struct Index {
  @State message: string = 'admin'

  build() {
    Row() {
      Column() {
        // 我们将账号的用户名获取到首页并展示
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 点击退出按钮返回到登录页面
        Button('退出')
          .onClick(() => {
            if(this.message === 'admin') {
              router.pushUrl({
                // 登录页面路径
                url: 'pages/Login'
              })
            }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}