鸿蒙开发（十二）实战训练：账号注册、登录——界面搭建

鱼刺0314
653 阅读2分钟

账号注册登录是我们日常应用的标准配置，本节我们就来做一个账号注册登录的功能，把之前学的知识点串联起来巩固一下。

示例服务器下载链接（解压后双击运行即可使用，可以自行设置端口号，默认8080）

示例服务器支持的接口：

  • 注册（/register)

Body参数（JSON格式）

字段名类型注释
accountstring账号
nicknamestring昵称
passwordstring密码
  • 账密登录（/login）

Body参数（JSON格式）

字段名类型注释
accountstring账号
passwordstring密码
  • token登录

Header参数

字段名类型注释
AuthorizationstringTOKEN
  • 设置签名

Header参数

字段名类型注释
AuthorizationstringTOKEN

Body参数（JSON格式）

字段名类型注释
signaturestring签名

-------------------------------------------------我是分割线--------------------------------------------------

首先我们需要搭建页面，我们共搭建4个页面，分别是欢迎页面，登录页面，注册页面和首页：

1. 欢迎页面，根据当前时间显示不同欢迎语，通过改变Column的主轴对齐方式来产生动画效果

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

@Entry
@Component
struct Welcome {
  @State words:string = '晚上好'
  @State columnFlexAlign:FlexAlign = FlexAlign.SpaceBetween

  aboutToAppear(): void {
    const date = new Date();
    const hours = date.getHours();
    if (hours < 6) {
      this.words = '早晨好';
    } else if (hours < 12){
      this.words = '上午好'
    } else if (hours < 18){
      this.words = '下午好'
    }
  }

  build() {
    Column({space:30}){
      Image($r('app.media.startIcon')).width(100)
      Text(this.words).fontSize(50).fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
    .justifyContent(this.columnFlexAlign)
    .animation({
      duration:2000,
      curve:Curve.EaseOut,
    })
    .onAppear(()=>{
      this.columnFlexAlign = FlexAlign.Center;
    })
  }
}

PixPin_2024-12-19_14-49-56.gif

  • 搭建完欢迎页后记得在EntryAbility.ets将默认加载页修改为欢迎页：

image.png

2. 登录页面，可进行账号登录功能

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

  build() {
    Column({ space: 30 }) {
      Image($r('app.media.startIcon')).width(100)
      Text('账号登录').fontSize(30)
      TextInput({placeholder:'请输入账号', text:$$this.account}).type(InputType.USER_NAME)
      TextInput({placeholder:'请输入密码', text:$$this.password}).type(InputType.Password)
      Row() {
        Button('注册').btnExtend()
        Button('登录').btnExtend()
      }
      .width('100%')
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Extend(Button)
function btnExtend() {
  .type(ButtonType.Normal)
  .borderRadius(5)
  .layoutWeight(1)
  .margin(30)
}

image.png

3. 注册页面，可进行账号注册功能

@Entry
@Component
struct Register {
  @State account: string = ''
  @State nickname: string = ''
  @State password: string = ''
  @State againPassword: string = ''

  build() {
    Column({ space: 30 }) {
      Image($r('app.media.startIcon')).width(100)
      Text('账号注册').fontSize(30)
      TextInput({ placeholder: '请输入账号', text: $$this.account }).type(InputType.USER_NAME)
      TextInput({ placeholder: '请输入昵称', text: $$this.nickname }).type(InputType.USER_NAME)
      TextInput({ placeholder: '请输入密码', text: $$this.password }).type(InputType.Password)
      TextInput({ placeholder: '请再次输入密码', text: $$this.againPassword }).type(InputType.Password)
      Button('注册')
        .type(ButtonType.Normal)
        .borderRadius(5)
        .width('80%')
        .margin(30)
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

image.png

4. 首页，显示昵称和签名，可以点击按钮设置签名
@Entry
@Component
struct Index {
  @State nickname: string = ''
  @State signature: string = ''
  @State newSignature: string = ''
  @State editMode: boolean = false

  build() {
    RelativeContainer() {
      Text('你好，' + (this.nickname == '' ? '请先登录' : this.nickname))
        .fontSize(50)
        .fontColor(Color.Blue)
        .alignRules({
          bottom: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
      Text(this.signature == '' ? '未设置签名' : this.signature)
        .fontSize(30)
        .fontColor(Color.Green)
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
      Button(this.editMode ? '确定修改' : '点击设置签名')
        .id('signatureBtn')
        .type(ButtonType.Normal)
        .borderRadius(5)
        .alignRules({
          bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.editMode = !this.editMode;
        })
      TextArea({ placeholder: '请输入签名', text: $$this.newSignature })
        .height(120)
        .margin(10)
        .visibility(this.editMode ? Visibility.Visible : Visibility.Hidden)
        .alignRules({
          bottom: { anchor: 'signatureBtn', align: VerticalAlign.Top }
        })
    }
    .height('100%')
    .width('100%')
  }
}

PixPin_2024-12-19_17-39-20.gif

这样基础的页面我们就搭建好了。接下来我们来逐一增加我们想要实现的功能。首先是页面跳转，我们期望欢迎页面显示3秒后自动跳转到首页且不能后退回欢迎页，所以我们在Column的onAppear()方法中增加一个定时器调用router.replaceUrl()进行跳转：

image.png

PixPin_2024-12-20_11-26-56.gif

由于首页、登录页、注册页需要共享昵称、签名、token等状态数据，因此我们使用Navigation方式来支持这几个页面间的跳转。

我们希望首页在特定情况下能跳转注册页，比如尚未登录或者token过期需要重新登录，为了测试方便我们先使用后退按钮进行跳转操作：

  • Index.ets

image.png

登录页点击注册按钮能够跳转到注册页：

  • Login.ets

image.png

注册页除了返回登录页之外暂无其他页面跳转：

  • Register.ets

image.png

最后别忘了配置路由映射表：

  • module.json5

image.png

  • router_map.json（src/main/resources/base/profile/router_map.json)
{
  "routerMap": [
    {
      "name": "login",
      "pageSourceFile": "src/main/ets/pages/Login.ets",
      "buildFunction": "loginBuilder"
    },
    {
      "name": "register",
      "pageSourceFile": "src/main/ets/pages/Register.ets",
      "buildFunction": "registerBuilder"
    }
  ]
}

这样页面间的主动跳转我们就配置好了。运行项目到模拟器看下效果：

PixPin_2024-12-20_18-15-07.gif

avatar
文章
阅读
粉丝