HarmonyOS实现登录页面

1、新建登录页面Login.ets

ps: 选择Page!!! 请注意 这类不要选择ArkTsFile  因为你的登录页面是需要显示在页面的入口文件（这类的入口文件并不是前一章说的index.ets的项目入口文件  这个入口文件是....自己理解吧） 如果你创建的页面是个组件（那就可以直接选择ArkTsFile）如果你不小心选择了ArkTsFile 就在下图吧你的页面路径加进去

2、代码

import { GetToken } from  '../api/passport/index'
import router from '@ohos.router'
@Entry
@Component
struct Login {
  // 选择的登录类型
  @State loginType: number = 0
  // 输入的手机号
  @State userPhone: string = ''
  // 输入的密码
  @State userPassWord: string = ''
  // 点击登录的回调
  private loginUser = async () => {
    if (!this.userPhone || !this.userPassWord) {
      // 弹框组件 自带的 不需要引入
      AlertDialog.show(
        {
          title: '温馨提示',
          message: '请输入手机号或者密码',
          autoCancel: true,
          alignment: DialogAlignment.Center,
          gridCount: 3,
          confirm: {
            value: '确认',
            action: () => {
              console.info('Button-clicking callback')
            }
          },
          cancel: () => {
            console.info('Closed callbacks')
          }
        }
      )
    } else {
      // 发送请求
      // const res = await GetToken('123')GetDict
      AppStorage.Set<string>('token', '')
      PersistentStorage.PersistProp('token', 'eyJhbGciOiJSUzI1NiIsImtpZCI6IjYwNDI2RUQ3MDhDRTdFNEEzRjY0MDE4Q0ZDREY1N0QyIiwidHlwIjoiYXQrand0In0.eyJpc3MiOiJodHRwczovL2FwaS1kZXYua2FuZ2Z4LmNvbS9wYXNzcG9ydCIsIm5iZiI6MTcwMzU4NTAwNywiaWF0IjoxNzAzNTg1MDA3LCJleHAiOjE3MDQ4ODEwMDcsImF1ZCI6WyJiZmYiLCJjYXJvdXNlbCIsImNsb3VkaW5mcmEiLCJjb21tdW5pdHkiLCJjb25zdWx0IiwiY29udGVudCIsImRpY3Rpb25hcnkiLCJnZW5lcmF0b3IiLCJpZGVudGl0eSIsImltdjIiLCJpb3RtYW5hZ2VyIiwibWVzc2FnZSIsIm9yZGVyIiwicmVjb3JkIiwicmVmZXJyYWwiLCJzYXRpc2ZhY3RvcnkiLCJzaG9wIiwic3VwZXJ2aXNpb24iLCJzdXBwb3J0IiwidGVuYW50LWhic3p5eSIsInRyYWluaW5nIiwidmlzaXQiLCJodHRwczovL2FwaS1kZXYua2FuZ2Z4LmNvbS9wYXNzcG9ydC9yZXNvdXJjZXMiXSwic2NvcGUiOlsiYmZmIiwiY2Fyb3VzZWwiLCJjbG91ZGluZnJhIiwiY29tbXVuaXR5IiwiY29uc3VsdCIsImNvbnRlbnQiLCJkaWN0aW9uYXJ5IiwiZ2VuZXJhdG9yIiwiaWRlbnRpdHkiLCJpbXYyIiwiaW90bWFuYWdlciIsIm1lc3NhZ2UiLCJvcGVuaWQiLCJvcmRlciIsInByb2ZpbGUiLCJyZWNvcmQiLCJyZWZlcnJhbCIsInNhdGlzZmFjdG9yeSIsInNob3AiLCJzdXBlcnZpc2lvbiIsInN1cHBsaWVyLWVicmFpbiIsInN1cHBvcnQiLCJ0ZW5hbnQtaGJzenl5IiwidHJhaW5pbmciLCJ2aXNpdCIsIm9mZmxpbmVfYWNjZXNzIl0sImFtciI6WyJwd2QiXSwiY2xpZW50X2lkIjoiUGxhdGZvcm1PZldlYiIsInN1YiI6ImVmM2NkMDQ3LWJlYTgtNGYzMS1hOTMwLWFjYzUwMTM0ZGU2ZiIsImF1dGhfdGltZSI6MTcwMzU4NTAwNywiaWRwIjoibG9jYWwiLCJnZW5kZXIiOiJcdTc1MzciLCJiaXJ0aGRhdGUiOiIiLCJwaWN0dXJlIjoiIiwidXNlcl9uYW1lIjoiYWRtaW4iLCJwaG9uZV9udW1iZXIiOiIxODIyNzYxNTY4MSIsIm5hbWUiOiJcdThEODVcdTdFQTdcdTdCQTFcdTc0MDZcdTU0NTgiLCJuaWNrbmFtZSI6IlVzZXJfVTgzVlJKRTMxIiwicm9sZSI6WyJzdXBlck9wZXJhdGUiLCJzdG9yYWdlIiwib3BlcmF0aW9ucyIsInByb21vdGVyIiwic2FsZXMiLCJhc3Npc3RhbnQiLCJmaW5hbmNlIiwiYXNzaXN0RG9jdG9yIiwic3VwZXJBZG1pbiJdLCJqdGkiOiIwODEwNzQ4QjIwMEVERDA4MkFDRjFFOUU1MTVDNURFNiJ9.YngHWl3qbi8TVhUqNSxbdqypVWYm0VZ7mxyQOgva549ztTcZqV9Q9_n0wQ3-Ey6JpTsc3EsGf0BiWGb5MOdYUg_5_Cp7L2d5B3h9E1NV7L4Ehs1595DTEHfDbFj0sXvvv77-5zp26AlivxA629k_bA4gwzszdaHkf4ktCb_IdUEObxocoe-WFxxMWcDKg1BuBb6sTSyC2HqkKi1UfGSP8-Py4Ejzk6ZK-BSinMfzI2OhjlDS0Y8vDLGadXmaDGWo_VGW58cO4M3uBS1dShhj80EMaGb7nzNv14Jj-8JSK70vsXHX3Ebw-1jC-CbAdPOtgj1pUMyqAi8-y_OeAcx4ow')
      router.replaceUrl({ url: 'pages/Home' })
    }
  }
  build() {
    // Column 列布局
    Column() {
      // Row 行布局
      Row() {
        // Text 文本组件
        Text('注册')
          .fontColor('#29B7A3')
          .fontSize(20)
      }
      .margin({
        top: 10
      })
      .alignSelf(ItemAlign.End)

      // Image 图片组件
      Image($r('app.media.logo'))
        .width(106)
        .height(106)
        .margin({
          top: 60,
          bottom: 10
        })
      Text('康复行')
        .fontSize(20)
        .fontColor('#333333')

      Row() {
        Column() {
          Text('密码登录')
            .fontColor('#333333')
            .fontWeight(this.loginType === 0 ? FontWeight.Bold : '')
            .fontSize(22)
          if (this.loginType === 0) {
            Row().width(40).backgroundColor('#29B7A3').height(5)
          }
        }
        .onClick(() => {
          this.loginType = 0
        })
        .margin({
          right: 60
        })

        Column() {
          Text('验证码登录')
            .fontColor('#333333')
            .fontWeight(this.loginType === 1 ? FontWeight.Bold : '')
            .fontSize(22)
          if (this.loginType === 1) {
            Row().width(40).backgroundColor('#29B7A3').height(5)
          }
        }
        .onClick(() => {
          this.loginType = 1
        })
      }
      .margin({
        top: 20
      })
      .alignItems(VerticalAlign.Top)

      Column({space: 10}) {
        // TextInput 输入框组件
        TextInput({ text: this.userPhone, placeholder: '请输入手机号'})
          .width('80%')
          .height(40)
          .type(InputType.PhoneNumber)
          .onChange((e) => { // 必须要写这个才能实现啊数据绑定
            this.userPhone = e
          })
        TextInput({ text: this.userPassWord, placeholder: '请输入密码'})
          .width('80%')
          .height(40)
          .type(InputType.Password)
          .onChange((e) => {
            this.userPassWord = e
          })
      }
      .margin({
        top: 30
      })

      Row() {
        Button('登录', { type: ButtonType.Normal, stateEffect: true })
          .borderRadius(8)
          .backgroundColor(0x317aff)
          .type(ButtonType.Capsule)
          .width('80%')
          .backgroundColor('#29B7A3')
          .onClick(this.loginUser)
      }
      .margin({
        top: 60
      })

      Blank()

      Row() {
        Text('我已阅读并同意')
        Text('用户协议').fontColor('#29B7A3')
          .decoration({
            type: TextDecorationType.Underline,
            color: '#29B7A3'
          })
      }

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

3、效果：

上一章： HarmonyOS初体验-CSDN博客

下一章: HarmonyOS发送请求-CSDN博客