---

---

前言

---

为大家介绍下项目整体情况：本项目基于HarmonyOS API12开发，涵盖大量鸿蒙原生组件、核心特性及权限配置实操。通过本项目，能帮助你快速熟悉鸿蒙应用开发流程，实现高效上手。
源码

一、本期目标

   实现以下界面的开发，通过正则表达式来验证输入合法性，使用自定义组件实现代码的复用，页面跳转的配置以及使用

二、UI界面的实现

1.搭建界面框架

   登录、注册、找回密码三个界面的整体布局和样式高度相似，因此我们先从登录界面入手，完成基础框架的搭建。

   界面采用纵向为主、横向辅助的排列逻辑：整体元素从上到下依次分布，部分区域（如输入框与验证码、按钮组等）为优化显示效果，采用横向排列设计也就是线性布局 (Row/Column)。

示例代码如下：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Text('测试')
      Text('测试')
      Text('账号')
      TextInput({ placeholder: '账号' })
      Text('密码')
      TextInput({ placeholder: '密码' })
      Row() {
        Text('没有账号')
        Text('注册')
      }
    }
  }
}

通过对Row/Column的简单使用我们的框架就搭建好了

2.界面框架美化

以上是最基础的布局框架我们的第一步也就成功迈出了，后续我们在此基础上：加入样式美化（字体大小、颜色、间距等）经过我们的稍稍修改我们的页面就可以装修成如图了
   因为在样式的开发中多使用的是通用样式大家可以阅读官方文档进行学习，我就不一 一赘述了

3.自定义UI组件

   在开发第二个界面(注册)时我们可以看到又是这样还要在复制一遍这也太麻烦了吧！我们有没有什么方法只写一遍后面直接拿来使用的方法呢？那就要请出我们的自定义UI组件了
   那么新的问题来了我们要把上面变为我们的自定义组件呢?我们回到设计图上可以看到，（如输入框、按钮组）存在大量重复我们来通过下面步骤把它们解决掉

步骤1: 提取通用元素

分析登录界面，可抽象出以下可复用组件：

• 输入框组件 (InputField)：包含标签（如“账号”）和TextInput。
• 按钮组组件 (ButtonGroup)：包含横向排列的多个按钮（如“登录”“注册”）。
• 验证码组件 (CaptchaField)：集成TextInput和获取验证码按钮。

步骤2: 创建自定义组件

以InputField组件为例，封装账号/密码输入逻辑：

示例代码如下：

// 定义InputField组件
@Component
struct InputField {
  label: string = ''  // 输入框标签
  placeholder: string = ''  // 占位文本
  @State text: string = ''  // 输入内容

  build() {
    Column() {
      Text(this.label)
        .fontSize(16)
        .margin({ bottom: 8 })
      TextInput({ placeholder: this.placeholder })
        .onChange((value: string) => {
          this.text = value  // 实时更新输入值
        })
        .width('100%')
        .height(40)
        .padding(10)
        .border({ width: 1, color: '#ccc' })
    }
    .margin({ bottom: 20 })
  }
}

步骤3: 在界面中复用组件

修改登录界面，使用自定义组件替代原始元素：

示例代码如下：

@Entry
@Component
struct LoginPage {
  build() {
    Column({ space: 20 }) {
      // 复用InputField组件
      InputField({ label: '账号', placeholder: '请输入手机号/邮箱' })
      InputField({ label: '密码', placeholder: '请输入密码' })
      
      // 添加按钮组
      ButtonGroup()
    }
    .padding(20)
  }
}

// 定义ButtonGroup组件
@Component
struct ButtonGroup {
  build() {
    Row({ space: 10 }) {
      Button('登录')
        .width(120)
        .backgroundColor('#007aff')
      Button('注册')
        .width(120)
        .backgroundColor('#34c759')
    }
    .justifyContent(FlexAlign.Center)
  }
}

优势：

• 代码复用率提升：注册界面直接复用InputField和ButtonGroup，减少重复代码。
• 维护简便：样式或逻辑变更只需修改组件定义。
• 一致性保障：确保所有界面UI风格统一。
  OK这样我们又解决了一个问题让我们的代码更加的优雅了,也让我们少掉两根头发

---

4.输入验证（正则表达式）

   好了这下我们的界面总算是完成了，我想这下总算是大功告成了拿给小美来试试谁知她上来就乱点一气后点击登录，我直接懵了，还能这样操作，这不吹牛*呢吗?还能让你得逞了。
   下面要请出我们的正则表达式来制裁小美
我们以手机号验证为例：

正则表达式规则

• 手机号格式：/^1[3-9]\d{9}$/（以1开头，第二位为3-9，共11位数字）。
• 密码强度：至少8位，包含字母和数字，规则为/^(?=.*[A-Za-z])(?=.*\d).{8,}$/。

在InputField组件中实现验证

扩展InputField组件，添加验证逻辑和错误提示：

示例代码如下：

@Component
struct InputField {
  label: string = ''
  placeholder: string = ''
  regex: RegExp | null = null  // 正则表达式规则
  @State text: string = ''
  @State errorMessage: string = ''  // 错误提示

  build() {
    Column() {
      Text(this.label)
        // ...样式省略
      TextInput({ placeholder: this.placeholder })
        .onChange((value: string) => {
          this.text = value
          if (this.regex && !this.regex.test(value)) {
            this.errorMessage = '输入格式错误'  // 验证失败
          } else {
            this.errorMessage = ''  // 验证通过
          }
        })
      // 错误提示文本
      if (this.errorMessage) {
        Text(this.errorMessage)
          .fontSize(12)
          .fontColor('#ff3b30')
      }
    }
  }
}

// 在登录界面使用带验证的组件
@Entry
@Component
struct LoginPage {
  build() {
    Column() {
      InputField({
        label: '账号',
        placeholder: '请输入手机号',
        regex: /^1[3-9]\d{9}$/  // 应用手机号正则
      })
      // ...其他组件
    }
  }
}

效果：

---

5.页面跳转配置

在制裁完小美后不经让人思考界面是写完了那这些界面怎么相互产生联系呢？
通过查看官网我们可以找到router这个方法虽然官方不推荐使用了但是比较简单如果感兴趣的可以点击这个去了解一下推荐的
我们在此处使用HarmonyOS的路由功能。通过router模块管理页面导航。温馨提示：用router也跳不到她的心里哦

步骤1: 配置路由表

在entry/src/main/resources/base/profile/main_pages.json中定义页面路径：

{
  "src": [
    "pages/LoginPage",
    "pages/RegisterPage",
    "pages/ResetPasswordPage"
  ]
}

步骤2: 实现跳转逻辑

在按钮事件中触发路由跳转。以从登录页跳转到注册页为例：

示例代码如下：

import router from '@ohos.router'

@Entry
@Component
struct LoginPage {
  build() {
    Column() {
      // ...输入框组件
      ButtonGroup({
        onRegister: () => {
          // 跳转到注册页
          router.push({ url: 'pages/RegisterPage' })
        }
      })
    }
  }
}

// 修改ButtonGroup支持回调
@Component
struct ButtonGroup {
  onRegister: () => void  // 注册按钮回调

  build() {
    Row() {
      Button('登录')
      Button('注册')
        .onClick(() => {
          this.onRegister()  // 触发跳转
        })
    }
  }
}

步骤3: 注册页接收参数（可选）

若需传递数据（如预填充账号），使用路由参数：

示例代码如下：

// 登录页传递参数
router.push({ 
  url: 'pages/RegisterPage',
  params: { account: this.account }  // this.account为输入值
})

// 注册页接收参数
@Entry
@Component
struct RegisterPage {
  @State prefillAccount: string = ''

  onPageShow() {
    const params = router.getParams()
    if (params && params['account']) {
      this.prefillAccount = params['account']  // 获取账号参数
    }
  }
}

---

总结

   上述代码仅为示例代码不要忘记,动动小手自己来试试哦！
   点击查看源码和项目最新进度
   通过本阶段开发，您已掌握：

1. 自定义组件封装：提升代码复用率。
2. 正则表达式验证：确保输入合法性。
3. 页面路由跳转：实现无缝导航。
4. HarmonyOS核心特性：包括布局、样式、事件处理。

小码在这里祝您码到成功

下一篇预告：集成后端API实现真实登录，注册，找回密码逻辑。