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

一、概述

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:

81735122546e4becb311a35327aa3987.png

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

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

00ef369e94574cd0a599e120ffa7b702.png

官方文档 ：

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

至此，项目创建就完成了

9793358989894687a2c6735b6df1622f.png

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

  • 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”文件，进行页面的编写

2a603d70d4ba4e43ac8e2eaf2af858ef.png

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

5625b55d52ab4319b097e5092d87c7fe.png

这里我们看到，整个页面的总体是垂直布局，之后子组件的排列时水平的，因此我们的整体布局使用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%')
    }
  }
}

布局效果：

66e5b9a9544948c0927acee0606e1cef.png

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

以输入框为例子：

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

b10927aff40f4c208527ff8f19e406bd.png

具体实现的代码如下：

​
@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%')
    }
  }

​

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

84f6371afcff4ae7be198c77e5541ee6.png

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

@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%')
    }
  }

实现效果图：

7c9f7fb8a8cd4714a1a5e48fb389949b.png

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

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

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

 加至账号输入框上方：a083fdf37a444cdb91f6de19f6546508.png

实现效果如图：

444433b75ce2423fb8e366fb4c95d44b.png

 图片在下方：

0b35feaea13244e8929d534a082af376.png 2b5d896f03a54193a93c593942f96e93.png

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

1e50c4953e654be1bd7f69d5563c9aca.png

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

2.2 页面间跳转

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

dabe4bcbd9bf47d193383e4c2b593256.png

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

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

第二个页面：

618af91db7a04564b9d4babd4fdf2762.png

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

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

b999f08f73c9416db64d1b8789727480.png

我们返回index.ets,导入：

import { router } from '@kit.ArkUI'

8518a31940c74a96a27299edcfd846c6.png

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

92a82307ce4346c3bb5ab38234e6f6c9.png

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,
                  })
              }
            })

效果如图：

1d1e104e7d3f47b78bf887ff409daf7b.png

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)
  }
}

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

# harmonyos
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

HarmonyOS 应用启动太慢？一套实战方案把首屏时间压下来

avatar HarmonyOS开发者社区

仓颉Nightly Builds版本正式解锁鸿蒙PC开发

此次仓颉Nightly Builds版本的上线，标志着鸿蒙PC生态迎来了原生编程语言的核心支撑。通过本文的实操步骤，开发者已实现从环境搭建到应用运行的全流程打通，体验到仓颉语言在鸿蒙PC场景下的高效开发特性。作为面向全场景智能的编程语言，仓颉不仅在鸿蒙应用开发中表现突出，更在服务端、云化场景中具备高性能微服务开发能力。随着开源生态的持续完善，以及工商银行、京东、力扣等企业的成功实践验证，仓颉正成为

avatar HarmonyOS开发者社区
cover

鸿蒙6实况窗引爆换机潮：一场对安卓苹果的降维打击

avatar HarmonyOS开发者社区