鸿蒙应用ArkTS开发-实现登录注册功能

标签：ArkTS 鸿蒙登录 HarmonyOS 100% height width placeholder pages

引言：小编也是最近学习的鸿蒙应用开发，把自己的学习心得想法和大家交流，一起探讨！

一、概述

HarmonyOS（鸿蒙操作系统）是华为公司开发的操作系统。它的设计初衷是为了应对当今多设备、多平台（1+8+N）的需求，为各种类型的设备提供一个统一的操作系统。HarmonyOS具有以下几个主要特点：

1. 多设备支持

HarmonyOS的核心理念是构建一个跨设备的操作系统，能够在不同类型的硬件上运行，包括智能手机、智能家居设备、平板电脑、电视、车载系统等。这种跨平台的特性旨在简化用户的设备使用体验，提供无缝的操作界面和功能。

2. 分布式架构

HarmonyOS采用了分布式架构，使得不同设备之间能够无缝协作。例如，当用户在手机上启动一个应用时，能够在其他设备上自动同步或继续操作，创建一个统一的使用体验。

3. 微内核设计

HarmonyOS的微内核设计与传统操作系统有所不同。微内核将系统功能最小化到核心，其他功能如驱动程序、服务等运行在用户空间，这有助于提高系统的安全性和稳定性。微内核的设计也使得操作系统更加灵活，能够适应不同类型的硬件。

4. 开发者生态

华为为HarmonyOS提供了一整套开发工具和平台，鼓励开发者为该系统创建应用。HarmonyOS支持多种编程语言和开发框架，如Java、C++、ArkUI等，开发者可以利用这些工具开发出适配于各种设备的应用程序。

5. 智能特性

HarmonyOS集成了许多智能特性，如语音识别、人工智能助手等，提升用户交互体验。这些功能旨在使设备更加智能、便捷。

6. 与安卓兼容

HarmonyOS在推出初期为安卓应用提供了兼容支持，这使得开发者可以相对轻松地将现有的安卓应用迁移到HarmonyOS平台上。

总的来说，HarmonyOS是华为在推动技术创新、实现设备互联互通方面的重要战略一步，旨在通过统一的操作系统来提升用户体验和设备之间的协同工作。

二、项目实现

接下来我将带着大家一起一个简单的登录注册功能：

1.新建项目

首先我打开DevEco Studio开发工具点击File->New->Create Project:

我们勾选第一个Empty Ability,点击Next:

接下来我们根据需求自行修改项目名称，之后点击Finsh:

官方文档：

Project name：工程的名称，可以自定义，由大小写字母、数字和下划线组成。
Bundle name：标识应用的包名，用于标识应用的唯一性。
Save location：工程文件本地存储路径，由大小写字母、数字和下划线等组成，不能包含中文字符。
Compatible SDK：兼容的最低API Version。
Module name：模块的名称。
Device type：该工程模板支持的设备类型。

至此，项目创建就完成了

目录结构介绍（来自官方文档）：

AppScope > app.json5：应用的全局配置信息，详见app.json5配置文件。
entry：HarmonyOS工程模块，编译构建生成一个HAP包。
src > main > ets：用于存放ArkTS源码。
src > main > ets > entryability：应用/服务的入口。
src > main > ets > entrybackupability：应用提供扩展的备份恢复能力。
src > main > ets > pages：应用/服务包含的页面。
src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。
build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。
hvigorfile.ts：模块级编译构建任务脚本。
obfuscation-rules.txt：混淆规则文件。混淆开启后，在使用Release模式进行编译时，会对代码进行编译、混淆及压缩处理，保护代码资产。详见开启代码混淆。
oh-package.json5：用来描述包名、版本、入口文件（类型声明文件）和依赖项等信息。
oh_modules：用于存放三方库依赖信息。

build-profile.json5：工程级配置信息，包括签名signingConfigs、产品配置products等。其中products中可配置当前运行环境，默认为HarmonyOS。

hvigorfile.ts：工程级编译构建任务脚本。

oh-package.json5：主要用来描述全局配置，如：依赖覆盖（overrides）、依赖关系重写（overrideDependencyMap）和参数化配置（parameterFile）等。

2、代码实现

2.1 页面效果实现

接下来我们正式开始写代码：

打开“Index.ets”文件，进行页面的编写

首先，我们做前端开发，要先对我们将要做的页面进行分析，如组件的布局：

这里我们看到，整个页面的总体是垂直布局，之后子组件的排列时水平的，因此我们的整体布局使用Column（），子组件的布局使用Row（），具体代码如下：

@Entry
@Component
struct Index {

  build() {
    Column() {
      Column() {
        Row() {
        }
        .width('90%')
        .height(60)
        .backgroundColor(Color.Red)
        // 密码输入框
        Row() {

        }
        .width('90%')
        .height(60)
        .backgroundColor(Color.Blue)

        Row() {
        }
        .height(60)
        .width('90%')
        .backgroundColor(Color.Yellow)
      }.width('100%')
    }
  }
}

布局效果：

这样我们的整体布局就写好了，接下来就是往各个布局内加入所需的组件：

以输入框为例子：

输入框组件为TextInput(),具体的属性可参考官方文档（点我跳转）：

具体实现的代码如下：


@Entry
@Component
struct Index {
  @State private inputName: string = ''
  build() {
    Column(){
        //账号输入框，水平布局
        Row(){
          Text('账号：')
            .fontSize(16)
          TextInput({text: this.inputName , placeholder: '输入用户名'})
            // 设置placeholder提示语颜色
            .placeholderColor(Color.Grey)
            // 设置placeholder提示语大小，字体粗细
            .placeholderFont({ size: 14, weight: 400 })
            //设置宽度和高度
            .width('80%')
            .height(40)
            //设置组件的外边距，padding为设置组建的内边距
            .margin(20)
            //设置字体大小和颜色
            .fontSize(14)
            .fontColor(Color.Black)
              //光标颜色
            .caretColor('#1AB095')
              // 输入过滤器正则表达式
        }
        .width('90%')
      }.width('100%')
    }
  }

实现的效果如图（红色框内点击刷新）：

接下来就容易很多了，我们照这个方式一步一步的完善我们的页面，代码如下：

@Entry
@Component
struct Index {
  @State private inputName: string = ''
  @State private inputPassword: string = ''

  build() {
    Column(){
      
      //账号输入框，水平布局
        Row(){
          Text('账号：')
            .fontSize(16)
          TextInput({text: this.inputName , placeholder: '输入用户名'})
            // 设置placeholder提示语颜色
            .placeholderColor(Color.Grey)
              // 设置placeholder提示语大小，字体粗细
            .placeholderFont({ size: 14, weight: 400 })
              //设置宽度和高度
            .width('80%')
            .height(40)
              //设置组件的外边距，padding为设置组建的内边距
            .margin(20)
              //设置字体大小和颜色
            .fontSize(14)
            .fontColor(Color.Black)
              //光标颜色
            .caretColor('#1AB095')
              // 输入过滤器正则表达式
            .inputFilter('[a-z]', (e) => {
              console.log(JSON.stringify(e))
            })
            .onChange((value: string) => {
              this.inputName = value
            })
        }
        .width('90%')
      
        // 密码输入框
        Row() {
          Text('密码：')
            .fontSize(16)
          TextInput({ placeholder: '输入密码',text: this.inputPassword })
            .caretColor('#1AB095')
            .width('80%')
            .height(40)
            .margin(20)
            .type(InputType.Password)
            .maxLength(9)
            .showPasswordIcon(true)
            //将输入框内容赋值给inputPassword
            .onChange((value: string) => {
              this.inputPassword = value
            })
        }
        .width('90%')
      
      // 登录注册按钮
        Row(){
          Button('注册')
            .width(150)
            .height(50)
            .margin(20)
            .backgroundColor('#99FFA8')
              //跳转至注册页面
            .onClick( () => {
              // router.pushUrl({
              //   url:"pages/Register"
              })
          Blank()
          //登录按钮
          Button('登录')
            .width(150)
            .height(50)
            .margin(10)
            .backgroundColor('#1AB095')
            .onClick(() => {
              // this.loginCommit()
            })
        }.width('100%')
      }
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .width('100%')
    }
  }

实现效果图：

接下来我们在上方加两个图片美化一下界面：

Image($r('app.media.green'))
        .width('50%')
        .interpolation(ImageInterpolation.High)
      Image($r('app.media.name'))

        .width('100%')
        .margin({ top: 10})
        .interpolation(ImageInterpolation.High)

加至账号输入框上方：

实现效果如图：

图片在下方：

将图片放置resources->base->media文件夹中：

这样我们就将基本的页面效果实现了，接下来我们将实现页面间跳转。

2.2 页面间跳转

首先我们先在pages文件夹下创建一个新的页面，右键pages->New->ArkTS File（我的名字为Success）：

创建后的代码需要自己写哦：

@Entry
@Component
export struct Success {
  build() {
    Column() {
      Text('登录成功！')
        .fontSize(40)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

第二个页面：

接下来，我们要进行路由的配置，打开resources->base->profile->main_pages.josn，输入新页面的路径：

{
  "src": [
    "pages/Index",
    "pages/Success"
  ]
}

我们返回index.ets,导入：

import { router } from '@kit.ArkUI'

之后在button组件的onclick（）方法中利用router.pushUrl()实现点击跳转：

router.pushUrl({
                url:"pages/success"
              })

进行简单的登录验证：

.onClick(() => {
              if(this.inputName=="admin"&&this.inputPassword=="123456"){
                // this.loginCommit()
                console.log("登录成功")
                router.pushUrl({
                  url:"pages/Success"
                })
              }else {
                promptAction.showToast(
                  {
                    // 提示信息
                    message: "账号或密码错误",
                    // 提示框显示时间
                    duration: 3000,
                  })
              }
            })

效果如图：

2.3完整代码(一定要进行路由的配置！)：

Index.ets :

import { promptAction, router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  @State private inputName: string = ''
  @State private inputPassword: string = ''

  build() {
    Column(){
      Image($r('app.media.green'))
        .width('50%')
        .interpolation(ImageInterpolation.High)
      Image($r('app.media.name'))

        .width('100%')
        .margin({ top: 10})
        .interpolation(ImageInterpolation.High)
      //账号输入框，水平布局
        Row(){
          Text('账号：')
            .fontSize(16)
          TextInput({text: this.inputName , placeholder: '输入用户名'})
            // 设置placeholder提示语颜色
            .placeholderColor(Color.Grey)
              // 设置placeholder提示语大小，字体粗细
            .placeholderFont({ size: 14, weight: 400 })
              //设置宽度和高度
            .width('80%')
            .height(40)
              //设置组件的外边距，padding为设置组建的内边距
            .margin(20)
              //设置字体大小和颜色
            .fontSize(14)
            .fontColor(Color.Black)
              //光标颜色
            .caretColor('#1AB095')
              // 输入过滤器正则表达式
            .inputFilter('[a-z]', (e) => {
              console.log(JSON.stringify(e))
            })
            .onChange((value: string) => {
              this.inputName = value
            })
        }
        .width('90%')


        // 密码输入框
        Row() {
          Text('密码：')
            .fontSize(16)
          TextInput({ placeholder: '输入密码',text: this.inputPassword })
            .caretColor('#1AB095')
            .width('80%')
            .height(40)
            .margin(20)
            .type(InputType.Password)
            .maxLength(9)
            .showPasswordIcon(true)
            .onChange((value: string) => {
              this.inputPassword = value
            })
        }
        .width('90%')
        Row(){
          Button('注册')
            .width(150)
            .height(50)
            .margin(20)
            .backgroundColor('#99FFA8')
              //跳转至注册页面
            .onClick( () => {
              // router.pushUrl({
              //   url:"pages/Register"
              // })
            })
          Blank()
          //登录按钮
          Button('登录')
            .width(150)
            .height(50)
            .margin(10)
            .backgroundColor('#1AB095')
            .onClick(() => {
              if(this.inputName=="admin"&&this.inputPassword=="123456"){
                // this.loginCommit()
                console.log("登录成功")
                router.pushUrl({
                  url:"pages/Success"
                })
              }else {
                promptAction.showToast(
                  {
                    // 提示信息
                    message: "账号或密码错误",
                    // 提示框显示时间
                    duration: 3000,
                  })
              }
            })
        }.width('100%')
      }
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .width('100%')
    }
  }

Success.ets:

@Entry
@Component
export struct Success {
  build() {
    Column() {
      Text('登录成功！')
        .fontSize(40)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

至此，我们的登录跳转就基本实现了，若是想要完整的登录注册功能，实现前后端连接，可以私信小编哦，后续有时间的话我会发布哦。

标签：ArkTS,鸿蒙,登录,HarmonyOS,100%,height,width,placeholder,pages
From： https://blog.csdn.net/lovecspplon/article/details/141883337

鸿蒙应用ArkTS开发-实现登录注册功能

引言：小编也是最近学习的鸿蒙应用开发，把自己的学习心得想法和大家交流，一起探讨！

一、概述

1. 多设备支持

2. 分布式架构

3. 微内核设计

4. 开发者生态

5. 智能特性

6. 与安卓兼容