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

 弁言：小编也是迩来学习的鸿蒙应用开辟，把本身的学习心得想法和各人交换，一起探究！
  一、概述

   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（），详细代码如下：

1. @Entry
2. @Component
3. struct Index {
5.   build() {
6.     Column() {
7.       Column() {
8.         Row() {
9.         }
10.         .width('90%')
11.         .height(60)
12.         .backgroundColor(Color.Red)
13.         // 密码输入框
14.         Row() {
16.         }
17.         .width('90%')
18.         .height(60)
19.         .backgroundColor(Color.Blue)
21.         Row() {
22.         }
23.         .height(60)
24.         .width('90%')
25.         .backgroundColor(Color.Yellow)
26.       }.width('100%')
27.     }
28.   }
29. }

复制代码

布局效果：

如许我们的团体布局就写好了，接下来就是往各个布局内加入所需的组件：
以输入框为例子：
输入框组件为TextInput(),详细的属性可参考官方文档（点我跳转）：

详细实现的代码如下：

1. ​
2. @Entry
3. @Component
4. struct Index {
5.   @State private inputName: string = ''
6.   build() {
7.     Column(){
8.         //账号输入框，水平布局
9.         Row(){
10.           Text('账号：')
11.             .fontSize(16)
12.           TextInput({text: this.inputName , placeholder: '输入用户名'})
13.             // 设置placeholder提示语颜色
14.             .placeholderColor(Color.Grey)
15.             // 设置placeholder提示语大小，字体粗细
16.             .placeholderFont({ size: 14, weight: 400 })
17.             //设置宽度和高度
18.             .width('80%')
19.             .height(40)
20.             //设置组件的外边距，padding为设置组建的内边距
21.             .margin(20)
22.             //设置字体大小和颜色
23.             .fontSize(14)
24.             .fontColor(Color.Black)
25.               //光标颜色
26.             .caretColor('#1AB095')
27.               // 输入过滤器正则表达式
28.         }
29.         .width('90%')
30.       }.width('100%')
31.     }
32.   }
34. ​

复制代码

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

接下来就轻易许多了，我们照这个方式一步一步的美满我们的页面，代码如下：

1. @Entry
2. @Component
3. struct Index {
4.   @State private inputName: string = ''
5.   @State private inputPassword: string = ''
7.   build() {
8.     Column(){
9.       
10.       //账号输入框，水平布局
11.         Row(){
12.           Text('账号：')
13.             .fontSize(16)
14.           TextInput({text: this.inputName , placeholder: '输入用户名'})
15.             // 设置placeholder提示语颜色
16.             .placeholderColor(Color.Grey)
17.               // 设置placeholder提示语大小，字体粗细
18.             .placeholderFont({ size: 14, weight: 400 })
19.               //设置宽度和高度
20.             .width('80%')
21.             .height(40)
22.               //设置组件的外边距，padding为设置组建的内边距
23.             .margin(20)
24.               //设置字体大小和颜色
25.             .fontSize(14)
26.             .fontColor(Color.Black)
27.               //光标颜色
28.             .caretColor('#1AB095')
29.               // 输入过滤器正则表达式
30.             .inputFilter('[a-z]', (e) => {
31.               console.log(JSON.stringify(e))
32.             })
33.             .onChange((value: string) => {
34.               this.inputName = value
35.             })
36.         }
37.         .width('90%')
38.       
39.         // 密码输入框
40.         Row() {
41.           Text('密码：')
42.             .fontSize(16)
43.           TextInput({ placeholder: '输入密码',text: this.inputPassword })
44.             .caretColor('#1AB095')
45.             .width('80%')
46.             .height(40)
47.             .margin(20)
48.             .type(InputType.Password)
49.             .maxLength(9)
50.             .showPasswordIcon(true)
51.             //将输入框内容赋值给inputPassword
52.             .onChange((value: string) => {
53.               this.inputPassword = value
54.             })
55.         }
56.         .width('90%')
57.       
58.       // 登录注册按钮
59.         Row(){
60.           Button('注册')
61.             .width(150)
62.             .height(50)
63.             .margin(20)
64.             .backgroundColor('#99FFA8')
65.               //跳转至注册页面
66.             .onClick( () => {
67.               // router.pushUrl({
68.               //   url:"pages/Register"
69.               })
70.           Blank()
71.           //登录按钮
72.           Button('登录')
73.             .width(150)
74.             .height(50)
75.             .margin(10)
76.             .backgroundColor('#1AB095')
77.             .onClick(() => {
78.               // this.loginCommit()
79.             })
80.         }.width('100%')
81.       }
82.       .height('100%')
83.       .justifyContent(FlexAlign.Center)
84.       .width('100%')
85.     }
86.   }

复制代码

实现效果图：

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

1. Image($r('app.media.green'))
2.         .width('50%')
3.         .interpolation(ImageInterpolation.High)
4.       Image($r('app.media.name'))
6.         .width('100%')
7.         .margin({ top: 10})
8.         .interpolation(ImageInterpolation.High)

复制代码

 加至账号输入框上方：

实现效果如图：

 图片在下方：

 

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

如许我们就将根本的页面效果实现了，接下来我们将实现页面间跳转。
2.2 页面间跳转
起首我们先在pages文件夹下创建一个新的页面，右键pages->New->ArkTS File（我的名字为Success）：

创建后的代码须要本身写哦：

1. @Entry
2. @Component
3. export struct Success {
4.   build() {
5.     Column() {
6.       Text('登录成功！')
7.         .fontSize(40)
8.     }
9.     .width('100%')
10.     .height('100%')
11.     .justifyContent(FlexAlign.Center)
12.   }
13. }

复制代码

第二个页面：

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

1. {
2.   "src": [
3.     "pages/Index",
4.     "pages/Success"
5.   ]
6. }

复制代码

我们返回index.ets,导入：
  

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

复制代码

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

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

复制代码

举行简单的登录验证： 

1. .onClick(() => {
2.               if(this.inputName=="admin"&&this.inputPassword=="123456"){
3.                 // this.loginCommit()
4.                 console.log("登录成功")
5.                 router.pushUrl({
6.                   url:"pages/Success"
7.                 })
8.               }else {
9.                 promptAction.showToast(
10.                   {
11.                     // 提示信息
12.                     message: "账号或密码错误",
13.                     // 提示框显示时间
14.                     duration: 3000,
15.                   })
16.               }
17.             })

复制代码

效果如图：

2.3完备代码(肯定要举行路由的设置！)：
Index.ets :

1. import { promptAction, router } from '@kit.ArkUI'@Entry@Componentstruct Index {  @State private inputName: string = ''  @State private inputPassword: string = ''  build() {    Column(){      Image($r('app.media.green'))
2.         .width('50%')
3.         .interpolation(ImageInterpolation.High)
4.       Image($r('app.media.name'))
6.         .width('100%')
7.         .margin({ top: 10})
8.         .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(() => {
9.               if(this.inputName=="admin"&&this.inputPassword=="123456"){
10.                 // this.loginCommit()
11.                 console.log("登录成功")
12.                 router.pushUrl({
13.                   url:"pages/Success"
14.                 })
15.               }else {
16.                 promptAction.showToast(
17.                   {
18.                     // 提示信息
19.                     message: "账号或密码错误",
20.                     // 提示框显示时间
21.                     duration: 3000,
22.                   })
23.               }
24.             })        }.width('100%')      }      .height('100%')      .justifyContent(FlexAlign.Center)      .width('100%')    }  }

复制代码

 Success.ets:

1. @Entry
2. @Component
3. export struct Success {
4.   build() {
5.     Column() {
6.       Text('登录成功！')
7.         .fontSize(40)
8.     }
9.     .width('100%')
10.     .height('100%')
11.     .justifyContent(FlexAlign.Center)
12.   }
13. }

复制代码

   至此，我们的登录跳转就根本实现了，如果想要完备的登录注册功能，实现前后端毗连，可以私信小编哦，后续偶然间的话我会发布哦。