【鸿蒙 HarmonyOS 4.0】登录流程

news/2024/7/21 11:39:29 标签: harmonyos, 华为

一、背景

登录功能在应用中是一个常用模块，此次使用 HarmonyOS 实现登录流程，包含页面呈现与网络请求。

二、页面呈现

三、实现流程

3.1、创建项目

构建一个ArkTS应用项目(Stage模型)，今天创建流程可查看官网教程：文档中心

目录结构介绍：

3.2、添加静态资源

所需图片：背景图，土拨鼠图片

添加位置：entry > src > main > resources > base > media

备注：icon.png是初始图片，另外两个是新增加的图片资源

3.3、编写登录界面

在pages目录下新建LoginPage页面，用于编写登录界面

具体代码：

@Entry
@Component
struct LoginPage {
  @State tenant:string = ''
  @State account:string = ''
  @State password:string = ''

  build() {
    Column({space:10}){
      Image($r('app.media.Groundhog'))
        .width('100vp')
        .borderRadius(50)
        .margin({top:120})
      Text('欢迎登录土拨鼠')
        .fontColor(Color.Gray)
        .fontSize(20)
      Select([{value:'土拨鼠充电公司'},{value:'钢铁侠充电公司'}])
        .selected(0)
        .value('请选择租户')
        .font({size:16,weight:500})
        .fontColor('#182431')
        .selectedOptionFont({ size: 16, weight: 400 })
        .optionFont({ size: 16, weight: 400 })
        .onSelect((index: number) => {
          this.tenant = (index + 1).toString()
        })
      TextInput({
        placeholder:'请输入用户名'
      })
        .width(300)
        .onChange((val:string) => this.account = val)
      TextInput({
        placeholder:'请输入密码'
      })
        .width(300)
        .onChange((val:string) => this.password = val).type(InputType.Password)
      Button('登录')
        .width("90%")
        .backgroundColor('#0aa671')
      LoadingProgress()
        .color('#0aa671')
        .width(50)
        .height(50)
    }
    .width('100%')
    .height('100%')
    .backgroundImage($r('app.media.rect'))
  }
}