【鸿蒙实战开发】基于ArkUI的验证码实现

场景描述

场景一：基于自定义键盘的验证码实现，进入页面后直接输入验证码，第一个验证码输入完后可自动跳到下一个，拉起的键盘是自定义数字键盘，验证码的输入框带选中效果。

场景二：基于系统键盘的验证码实现，进入页面后直接输入验证码，第一个验证码输入完后可自动跳到下一个，验证码的输入框带选中效果。

方案描述

场景一：

基于自定义键盘的验证码实现，进入页面后直接输入验证码，第一个验证码输入完后可自动跳到下一个，拉起的键盘是自定义数字键盘，验证码的输入框带选中效果。

方案

每个验证码都是通过text实现的，而不是textInput。
在页面中写一个textInput将其隐藏，通过sendEventByKey方法将textInput的点击事件转移给text，同时给textInput绑定自定义键盘，这样点击text即可拉起自定义键盘。
将输入框的值赋值给text，通过text将其展示出来。

核心代码

1.写一个TextInput将其隐藏，给TextInput设置id后，在Text的点击事件中通过sendEventByKey方法将TextInput的点击事件转移到Text上，这样就可以点击Text拉起软键盘。

2.在onChange中对codeTxt进行赋值，将输入框的值赋给codeTxt，再通过codeTxt的下标进行展示。

3.对codeTxt进行监听，showMouse是一个布尔类型的数组，当前验证码处于输入状态时，将其值改为true，这样就可改变输入框的选中状态。

//展示在页面上的文本
@State @Watch('setValue') codeTxt: string = '';
@State Index: number[] = [0, 1, 2, 3, 4, 5]
//控制选中文本样式
@State showMouse: boolean[] = [];

@Builder
buildAEnterCodeInput() {
  Flex({
    direction: FlexDirection.Row,
    alignItems: ItemAlign.Center,
    justifyContent: FlexAlign.SpaceBetween
  }) {
    Column(){
      Row(){
        //text将拿到的值进行逐个展示
        Text(this.codeTxt[0])
          .fontSize(18)
          .fontWeight(600)
          .textAlign(TextAlign.Center)
          .width(50)
          .height(50)
          .margin({ left: 5, right: 5 })// .border({ width: 0.5, color:  Color.Grey ,style: BorderStyle.Solid })
            //设置验证码选中的样式
          .border(this.showMouse[this.Index[0]] ? this.btnCancelBorderActive : this.btnCancelBorder)
          .borderRadius(5)
        ……
      }
      .onClick(()=>{
        //通过sendEventByKey方法将输入框的点击事件转移给text
        sendEventByKey('TextInput',10,'')
      })
      //写一个输入框，将其隐藏
      TextInput({ controller: this.controller })
        .width('100%')
        .height(100)// .zIndex(1)
        .opacity(0)
        .id('TextInput')
        .customKeyboard(this.CustomKeyboardBuilder())
        .onChange((value) => {
          //将隐藏的输入框的value值赋值给codeTxt 
          this.codeTxt = value
          if (this.codeTxt.length >= 6) {
            return
          }
        })
    }
  }
  .backgroundColor(Color.White)
  .height(50)
  .margin({ left: 15, right: 15 })
  .id("customInput")
  .defaultFocus(false)
}
//对codeTxt进行监听，
setValue() {
  if (this.codeTxt) {
    this.handelInputTxt(this.codeTxt.length, this.codeTxt);
  } else {
    this.handelInputTxt(0, '');
  }
}

//改变输入框选中的值，showMouse是一个布尔类型的数组，当前验证码处于输入状态时，将其值改为true
handelInputTxt(length: number, val: string) {
  length === this.maxLength ? this.showMouse.fill(false) : this.showMouse.fill(false).splice(length - 1, 0, true);
  console.log('----length', length)
  console.info("----this.showMouse", JSON.stringify(this.showMouse));
}

设置的公共页面，点击即可拉起半模态。

//公共页面，点击即可拉起半模态
@Builder
buildTitleName() {
  CommonPage()
    .onClick(() => {
      //模态弹窗是否展示
      this.isShow = true
    })
    .bindSheet($$this.isShow, this.bindSheetBuilder, {
      height: '70%',
      // detents:[SheetSize.MEDIUM,SheetSize.LARGE,500],
      // backgroundColor:Color.Gray,
      blurStyle: BlurStyle.Thick,
      showClose: false,
      // title:{title:""},
      preferType: SheetType.CENTER
    })
  ……

场景二：

基于系统键盘的验证码实现，进入页面后直接输入验证码，第一个验证码输入完后可自动跳到下一个，验证码的输入框带选中效果。

方案

1.验证码均是通过六个text实现。

2.通过输入法框架拉起系统键盘，对系统键盘进行监听，即可做到输入和删除的效果。

3.进行条件判断，符合条件时就对输入法进行绑定和监听，否则就解绑输入法。

核心代码

展示在页面上的六个Text，通过输入法框架拉起键盘。

@Builder
buildAEnterCodeInput() {
  Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
    Text(this.codeTxt[0])
      .fontSize(18)
      .fontWeight(600)
      .textAlign(TextAlign.Center)
      .width((this.screenWidth - 110) / 6)
      .height("100%")
      .margin({ left: 5, right: 5 })
      .border({
        width: 0.5,
        color:  Color.Grey ,
        style: BorderStyle.Solid
      })
      .borderRadius(5)
  }
  .backgroundColor(Color.White)
  .height(50)
  .margin({ left: 15, right: 15 })
  .id("customInput")
  .defaultFocus(false)
  .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
    if (isVisible && currentRatio >= 1.0) {
      //绑定输入法
      this.attachAndListener();
    }
    if (!isVisible && currentRatio <= 0.0) {
      //解绑输入法
      this.dettach()
    }
  })
  //点击即通过输入法的控制拉起键盘
  .onClick(async () => {
    if (this.isAttached && this.keyboardStatus != 2) {
      // 输入法配置项
      let textConfig: inputMethod.TextConfig = {
        inputAttribute: {
          textInputType: inputMethod.TextInputType.NUMBER,
          enterKeyType: inputMethod.EnterKeyType.GO
        }
      };

      // 控件绑定输入法
      await this.inputController.attach(true, textConfig)
      return
    }
  })
}

实现思路：对输入法进行绑定和监听，通过输入法框架拉起软键盘，可以订阅输入法应用插入、删除文本事件等。

//解绑输入法
dettach() {
  this.inputController.off('insertText');
  this.inputController.off('deleteLeft');
  this.inputController.off('sendKeyboardStatus');
  this.inputController.detach((err: BusinessError) => {
    if (err) {
      console.error(`Failed to detach: ${JSON.stringify(err)}`);
      return;
    }
    this.isAttached = false
    console.log('Succeeded in detaching inputMethod.');
  });
}

// 绑定和设置监听
async attachAndListener() {
  // 输入法配置项
  let textConfig: inputMethod.TextConfig = {
    inputAttribute: {
      //拉起数字键盘
      textInputType: inputMethod.TextInputType.NUMBER,
      enterKeyType: inputMethod.EnterKeyType.GO
    }
  };

  // 控件绑定输入法
  await this.inputController.attach(true, textConfig)
  this.isAttached = true
  this.attachListener()
}

/**
 * 订阅输入法回调
 */
attachListener(): void {
  // 订阅输入法应用插入文本事件
  this.inputController.on('insertText', (text) => {
    if (this.codeTxt.length >= 6) {
      return
    }  
    this.codeTxt += text;
    console.info("this.inputText", "insertText this.inputText===" + this.codeTxt)
  })

  // 订阅输入法应用向左删除事件
  this.inputController.on('deleteLeft', (length) => {
    this.codeTxt = this.codeTxt.substring(0, this.codeTxt.length - 1);
    console.info("this.inputText", "deleteLeft  this.inputText===" + this.codeTxt,'length'+length)
  })

  // 订阅输入法应用发送输入法软键盘状态事件
  this.inputController.on('sendKeyboardStatus', (keyboardStatus: inputMethod.KeyboardStatus) => {
    this.keyboardStatus = keyboardStatus
    console.info("ImsaKit this.inputText keyboardStatus= " + this.keyboardStatus)
  })
}

鸿蒙全栈开发全新学习指南

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以要有一份实用的鸿蒙（HarmonyOS NEXT）学习路线与学习文档用来跟着学习是非常有必要的。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。

本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

第三阶段：应用开发中高级就业技术

第四阶段：全网首发-工业级南向设备开发就业技术：gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开发教学：gitee.com/MNxiaona/733GH

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新学习资源，请移步前往小编：gitee.com/MNxiaona/733GH