我们在HarmonyOS开发中，如何一个简单的登录界面？

Question

我们在HarmonyOS开发中，如何一个简单的登录界面？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

参考下面的代码，包含登录、注册、密码及用户名校验

//Index.ets

import { router } from '@kit.ArkUI';

import {UserPreferences} from '../Preferences/PreferencesManager'

class routerParams{
  username:string

  constructor(str:string) {
    this.username = str
  }
}

@CustomDialog
struct registSuccess{
  controller?:CustomDialogController
  build() {
    Column(){
      Text("登录成功").fontSize(16)
    }
  }
}
@Entry
@Component
struct Index {
  @State UserName:string = ''
  @State PassWord:string = ''
  @State AlertTextColor:string = '#ffffff'
  @State AlertText:string = ''
  Textcontroller1: TextInputController = new TextInputController()
  Textcontroller2: TextInputController = new TextInputController()

  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: registSuccess(),
    openAnimation: {
      duration: 500,
      curve: Curve.Friction,
      delay: 0,
      playMode: PlayMode.Alternate,
      onFinish: () => {
        this.dialogController?.close()
        router.pushUrl({
          url:'MainPage/MainPage',
          params:new routerParams(this.UserName)
        })
      }
    },
    autoCancel: true,
    alignment: DialogAlignment.Top,
    offset: { dx: 0, dy: 100 },
    gridCount: 4,
    customStyle: false,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 10,
    maskColor:Color.Transparent
  })

  build() {
    Row() {
      Column() {
        Scroll(){
          Column(){
            TextInput({text:this.UserName,placeholder:"Input user name",controller:this.Textcontroller1})
              .onChange((value1:string)=>{
                this.UserName = value1
              })
              .margin(20)

            TextInput({text:this.PassWord,placeholder:"Input PassWord",controller:this.Textcontroller2})
              .type(InputType.Password)
              .margin(20)
              .onChange((value2:string)=>{
                this.PassWord = value2
              })
            Row(){
              Column(){
                Text(this.AlertText)
                  .fontColor(this.AlertTextColor)
                Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }){
                  Button("登录").onClick((event: ClickEvent) => {
                    if (UserPreferences()?.hasSync(`${this.UserName}`) && (this.PassWord == UserPreferences()?.getSync(`${this.UserName}`,null))) {
                      console.info("登录成功");
                      this.AlertTextColor = '#00ffffff'
                      if (this.dialogController!=null){
                        this.dialogController.open()
                      }
                    } else if (UserPreferences()?.hasSync(`${this.UserName}`) && (this.PassWord !== UserPreferences()?.getSync(`${this.UserName}`,null))){
                      console.info("密码错误");
                      this.AlertText = "密码错误!"
                      this.AlertTextColor = '#9e2927'

                    }else if (!UserPreferences()?.hasSync(`${this.UserName}`) ){
                      console.log("用户名不存在，请注册新用户")
                      this.AlertText = "用户名不存在，请注册新用户!"
                      this.AlertTextColor = '#9e2927'
                    }
                  })
                  Button("注册").onClick((event: ClickEvent) => {
                    this.AlertText = ''
                    router.pushUrl({
                      url:'pages/RegistPage'
                    })
                  })
                }
              }
            }
          }
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

//RegistPage.ets

import { router } from '@kit.ArkUI';
import {UserPreferences} from '../Preferences/PreferencesManager'

@CustomDialog
struct LoginSuccess{
  controller?:CustomDialogController
  build() {
    Column(){
      Text("注册成功!正在返回登录页").fontSize(16)
    }
  }
}

@Entry
@Component
struct RegistPage {
  Textcontroller1: TextInputController = new TextInputController()
  Textcontroller2: TextInputController = new TextInputController()
  Textcontroller3: TextInputController = new TextInputController()
  @State UserName:string = ''
  @State PassWord1:string = ''
  @State PassWord2:string = ''
  @State AlertTextColor:string = '#ffffff'
  @State AlertText:string = ''

  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: LoginSuccess(),
    openAnimation: {
      duration: 500,
      curve: Curve.Friction,
      delay: 0,
      playMode: PlayMode.Alternate,
      onFinish: () => {
        this.dialogController?.close()
        router.pushUrl({
          url:'pages/Index'
        })
      }
    },
    autoCancel: true,
    alignment: DialogAlignment.Top,
    offset: { dx: 0, dy: 100 },
    gridCount: 4,
    customStyle: false,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 10,
    maskColor:Color.Transparent
  })

  build() {
    Column() {
      Row() {
        Text("请输入用户名 ：")
        TextInput({text:this.UserName,placeholder:"Input user name",controller:this.Textcontroller1})
          .onChange((value1:string)=>{
            this.UserName = value1
          })
          .width('60%')
      }
      .margin(5)
      Row() {
        Text("请输入密码    ：")

        TextInput({text:this.PassWord1,placeholder:"Input PassWord",controller:this.Textcontroller2})
          .type(InputType.Password)
          .margin(20)
          .onChange((value2:string)=>{
            this.PassWord1 = value2
          })
          .width('60%')
      }
      Row(){
        Text("请确认密码    ：")
        TextInput({text:this.PassWord2,placeholder:"Input PassWord",controller:this.Textcontroller2})
          .type(InputType.Password)
          .margin(20)
          .onChange((value3:string)=>{
            this.PassWord2 = value3
          })
          .width('60%')
      }
      .margin(5)
      Text(this.AlertText)
        .fontColor(this.AlertTextColor)
      Button('注册').onClick((event: ClickEvent) => {
        if (this.PassWord1 != this.PassWord2){
          this.AlertText = "两次密码不一致，请重新输入！"
          this.AlertTextColor = '#9e2927'
        }else if (UserPreferences()?.getSync(`${this.UserName}`,'')){
          this.AlertText = "用户名已存在"
          this.AlertTextColor = '#9e2927'
        }
        else if ((this.PassWord1 = this.PassWord2) && this.dialogController != null){
          this.dialogController?.open()
          UserPreferences()?.putSync(`${this.UserName}`, `${this.PassWord1}`);
          UserPreferences()?.flush()
          this.AlertText = ''
        }
      })
    }.justifyContent(FlexAlign.Center).height("100%")
  }
}

//PreferencesManager.ets
import { preferences } from '@kit.ArkData';
import { common } from '@kit.AbilityKit';

class PreferencesManager{
  private dataPreferences: preferences.Preferences | null = null;
  private context: common.UIAbilityContext;
  private storeName: string;
  constructor(context: common.UIAbilityContext, storeName: string) {
    this.context = context;
    this.storeName = storeName;
  }

  // 初始化 Preferences
  public initPreferences(): void {
    const options: preferences.Options = { name: this.storeName };
    this.dataPreferences = preferences.getPreferencesSync(this.context, options);
  }

  // 获取 Preferences 实例
  public getPreferences(): preferences.Preferences | null {
    return this.dataPreferences;
  }
}
const context = getContext(this) as common.UIAbilityContext

export function UserPreferences(){
  const preferencesManager = new PreferencesManager(context,'myStore')
  preferencesManager.initPreferences()
  let dataPreferences = preferencesManager.getPreferences()
  return dataPreferences
}

export function ScorePreferences(){
  const preferencesManager = new PreferencesManager(context,'Score')
  preferencesManager.initPreferences()
  let dataPreferences = preferencesManager.getPreferences()
  return dataPreferences
}