鸿蒙开发(四)：使用ArkTS开发鸿蒙应用：注册页面的实现

🌟 使用ArkTS开发鸿蒙应用：注册页面的实现

在开发鸿蒙应用时，注册页面是一个关键的功能模块。通过注册页面，用户可以创建新的账号，从而使用应用的更多功能。以下是一个完整的注册页面实现，包括用户输入账号和密码、调用后端接口完成注册，并根据返回结果提示用户。

代码解析

1. 导入模块

import { router } from '@kit.ArkUI';
import prompt from '@ohos.promptAction';
import { httpRequestPost } from '../Utils/HttpUtils';
import { RegisterModel, RegisterModelUser } from '../model/RegisterModel';

• 导入了多个模块，用于实现路由跳转、提示框、HTTP请求等功能。

2. 定义注册页面组件

@Entry
@Component
struct Register {
  @State username: string = "";
  @State password: string = "";
  private registerurl: string = "******";//换成自己的接口

• 定义了一个名为 Register 的注册页面组件。
• 使用 @State 装饰器定义了 username 和 password，用于存储用户输入的账号和密码。
• 定义了 registerurl，用于存储注册接口的URL。

3. 注册逻辑

async register() {
  if (this.username == "" || this.password == "") {
    prompt.showToast({
      message: "输入内容不能为空"
    });
  } else {
    const jsonData = JSON.stringify({
      username: this.username,
      password: this.password
    });
    console.log("jsonData --> ", jsonData);

    try {
      const response = await httpRequestPost(this.registerurl, jsonData);
      const data = response.toString();
      console.log("注册返回的数据", data);

      let registerModel: RegisterModel = JSON.parse(data);
      let msg = registerModel.msg;

      if (registerModel.code === 200) {
        prompt.showToast({
          message: "注册成功！",
          duration: 2000
        });

        router.back();
      } else {
        prompt.showToast({
          message: msg
        });
      }
    } catch (error) {
      console.error("注册请求失败", error);
      prompt.showToast({
        message: "注册失败，请稍后再试"
      });
    }
  }
}

• 定义了 register 方法，用于处理用户注册逻辑。
• 检查用户输入的账号和密码是否为空，如果为空，显示提示信息。
• 将用户输入的账号和密码封装成JSON格式的数据。
• 使用 httpRequestPost 发送POST请求到后端接口。
• 如果注册成功（返回码为200），显示成功提示，并返回到上一个页面。
• 如果注册失败，显示失败提示。

4. 页面布局

build() {
  Column() {
    Image($r('app.media.app_icon'))
      .width(100)
      .height(100)
      .margin({ top: 200 })
    Text("注册页面")
      .fontColor(Color.Black)
      .fontWeight(700)
      .margin({ top: 10 })
      .fontSize(24)
    TextInput({ placeholder: "请输入账号" })
      .type(InputType.Normal)
      .margin({ left: 20, right: 20, top: 10 })
      .onChange((value) => {
        this.username = value;
      })
    TextInput({ placeholder: "请输入密码" })
      .type(InputType.Password)
      .margin({ left: 20, right: 20, top: 10 })
      .onChange((value) => {
        this.password = value;
      })
    Row({ space: 20 }) {
      Button("注册")
        .newLocalFancy()
        .onClick(() => {
          this.register();
        })
      Button("返回")
        .newLocalFancy()
        .onClick(() => {
          router.back();
        })
    }
    .margin({ top: 10 })
  }
  .height('100%')
  .width('100%')
}

• 使用 Column 和 Row 布局组件，构建注册页面的UI。
• 包含一个图片、一个文本提示、两个输入框（账号和密码）以及两个按钮（注册和返回）。
• 通过 onChange 事件监听输入框的值变化，更新 username 和 password。
• 注册按钮点击时调用 register 方法，返回按钮点击时返回到上一个页面。

5. 样式定义

@Styles
newLocalFancy() {
  .backgroundColor(Color.Blue)
  .width('40%')
}

• 定义了一个样式方法 newLocalFancy，用于设置按钮的背景颜色和宽度。

6. RegisterModel：提供类型安全和结构化的数据处理方式

export class RegisterModel {
  msg?: string = "";
  code?: number = 0;
  user?: RegisterModelUser = new RegisterModelUser();
  token?: string = "";
}
export class RegisterModelUser {
  id?: number = 0;
  username?: string = "";
  password?: string = "";
  phone?: string = "";
  sex?: string = "";
}

7. 图片展示

总结

通过上述代码，我们实现了一个完整的注册页面，包括用户输入账号和密码、调用后端接口完成注册，并根据返回结果提示用户。用户注册成功后将返回到上一个页面，注册失败则显示失败提示。