鸿蒙介绍、鸿蒙编程环境、基本组件、页面跳转学习

系列文章目录

第一章鸿蒙介绍、鸿蒙编程环境、基本组件、页面跳转学习

文章目录

系列文章目录
前言
一、HarmonyOS基础
- 1. 鸿蒙系统是什么？
- 2. 鸿蒙系统的重要目录及文件
二、HarmonyOS编程介绍
- 1. ArkTS编程语言介绍
- 2. DevEco Studio编程环境介绍
- 3. 关系介绍
三、使用ArkTS进行编程
- 1. 代码内所用组件及属性介绍
- - 1.1 代码的结构
  - 1.2 变量的声明
  - 1.3 输入框组件
  - 1.4 按钮组件
- 2. A.ets文件
- 3. B文件
- 4. 辅助文件
- 5. 盒子模型介绍
总结

前言

本文会介绍：
鸿蒙的基础介绍；
鸿蒙的编程环境；
基本组件的使用；
如何进行页面跳转
本文会对以上内……容进行讲解，在下攸攸太……上，我……快不行了，我要将我学习鸿蒙的精……髓写在本文中……

一、HarmonyOS基础

1. 鸿蒙系统是什么？

鸿蒙系统是华为公司开发的一款基于微内核、面向物联网、面向全场景的分布式操作系统。

鸿蒙的英文Harmony意为和谐。
这个新的操作系统将打通手机、电脑、平板、电视、工业自动化控制、无人驾驶、车机设备、智能穿戴……
总的来说就是使用一个操作系统将所有的智能设备都统一。
鸿蒙OS能够兼容安卓应用，并在鸿蒙OS上重新编译的安卓应用性能提升超过60%！
鸿蒙OS架构中的内核会把之前的Linux内核、鸿蒙OS微内核与LiteOS合并为一个鸿蒙OS微内核。立志于创造一个超级虚拟终端互联的世界，将人、设备、场景有机联系在一起。

同时由于鸿蒙系统微内核的代码量只有Linux宏内核的千分之一，其受攻击几率也大幅降低。

鸿蒙系统采用分布式架构，实现终端设备之间的无缝协同。它的微内核代码量较小，降低了受攻击的风险。对于消费者而言，鸿蒙系统可以让多种设备具备智能交互能力。对于硬件开发者，鸿蒙系统可以促进硬件创新，并融入华为的生态系统。对于应用开发者，鸿蒙系统提供了分布式技术的API，让他们能够开发出全场景的新体验。

总结：
HarmonyOS是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言，为用户带来简捷，流畅，连续，安全可靠的全场景交互体验。
HarmonyOS结合移动生态发展的趋势，提出了三大技术理念：一次开发，多端部署；可分可合，自由流转；统一生态，原生智能。

2. 鸿蒙系统的重要目录及文件

在HarmonyOS工程中，有一些重要的文件和目录，它们承担着不同的功能和作用：

AppScope > 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包的配置信息、应用/服务在具体设备上的配置信息以及应用服务的全局配置信息。
build-profile.json5：这是工程级的配置信息文件，包括签名配置、产品配置等。
hvigorfile.ts：这是模块级的编译构建任务脚本。
obfuscation-rules.txt：这是混淆规则文件，用于在Release模式下对代码进行编译、混淆和压缩处理，以保护代码资产。
oh-package.json5：这是一个描述全局配置的文件，可以包含依赖覆盖、依赖关系重写和参数化配置等信息。
oh_modules：这个目录用于存放三方库的依赖信息。

这些文件和目录在HarmonyOS工程中扮演着重要的角色，对于应用开发和构建过程都具有一定的作用和意义。

二、HarmonyOS编程介绍

1. ArkTS编程语言介绍

ArkTS是鸿蒙系统应用的开发语言。
它在保持TypeScript基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。
同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。

2. DevEco Studio编程环境介绍

HUAWEI DevEco Studio基于IntelliJ IDEA Community开源版本深度定制开发，是面向全场景多设备的一站式分布式应用开发平台。
DevEco Studio 是HarmonyOS和OpenHarmony应用及服务开发的集成开发环境（IDE）

3. 关系介绍

看到现在，什么HarmonyOS、 ArkTS、DevEco Studio已经搞懵呼了吧？
将其与Java对比：

系统	HarmonyOS	Android
编程语言	ArkTS	Java / Kotlin
编程环境	DevEco Studio	IDEA / Eclipse / Android Studio

三、使用ArkTS进行编程

1. 代码内所用组件及属性介绍

1.1 代码的结构

类似java中的public修饰的main方法

@Entry
  // 运行程序的入口
@Component
  // 组件的标识，组件可以重用

struct B {}

1.2 变量的声明

str为变量名，string为类型，"在下为A"为所赋的值
在前面加上@State 代表时状态变量，可以设置事件，不加只是成员变量

str: string = "在下为B";
@State username: string = "";

1.3 输入框组件

用于接受用户输入的数据，placeholder提示词、占位字符，text输入的文本

TextInput({ placeholder: '请输入用户名', text: this.username }) // placeholder提示词，什么都没输入时的占位字，text代表本输入框内输入的字符会与username属性时刻保持同步
  .type(InputType.Password) // 此行代码说明这个文本框用于输入密码，字符会以·的方式显示，会在最右侧有一个眼睛，可以显示输入的字符
  .placeholderFont({ size: 30 }) // 提示词的尺寸大小
  .placeholderColor(Color.Blue) // 提示词的颜色
  .maxLength(6) // 能输入的最长长度
  .margin({ top: 100, left: 40 }) // 相对上方组件距离100单位，相对左方40单位
  .onChange((val) => { // onChange如果文本框内的文本发生了变化
    // ()=>{}匿名函数，()内是参数，{}内是方法体
    // val是用户实时输入的信息
    this.username = val; // 文本框内容变化时，将其赋值给username变量
  });

所用到的属性介绍：
type：这个文本框用于输入密码，字符会以 · 的方式显示，会在最右侧有一个眼睛，可以显示输入的字符
placeholderFont：提示词的尺寸大小
placeholderColor：提示词的颜色
maxLength：能输入的最长长度
margin：相对上方组件距离100单位，相对左方40单位
onChange：如果文本框内的文本发生了变化

1.4 按钮组件

Button() {
  Text('登录') // 按钮内的字符
    .fontSize(30) // 字体大小
    .fontColor(Color.White); // 字体颜色，因为按钮是蓝色所以白色更清晰
  }.type(ButtonType.Capsule) // 按钮为胶囊型,Circle为圆形，Normal为长方形
  .height(50) // 按钮高度为50
  .width(150) // 按钮宽度为150
  .onClick(() => { // 按钮的点击事件，使用了匿名函数()=>{}
    if (this.username == 'asd' && this.password == '123456') { // 如果用户名密码匹配，则登录成功
      console.log('登录成功'); // 会在Log界面输出登录成功语句
      router.pushUrl({ url: 'pages/A' }); // 会跳转到A页面
    } else { //未匹配
      promptAction.showToast({ // 在界面弹窗进行提示，类似alert()
        message: '这是个弹框错误信息', // 提示的信息
        duration: 1000, // 持续时间，单位为毫秒
        bottom: 200 // 距离底部距离
      });
      console.log('登录失败' + this.username + ';' + this.password); // 登录失败的信息提示
    }
  });

Text组件
按钮里显示的文字
Text组件的属性
fontSize：字体大小
fontColor：字体颜色，因为按钮是蓝色所以白色更清晰
Button组件的属性
type：Capsule按钮为胶囊型,Circle为圆形，Normal为长方形
height：按钮高度
width：按钮宽度
onClick：按钮的点击事件
匿名函数：()=>{}，()内是参数，{}内是方法体
promptAction.showToast：在界面弹窗进行提示，类似alert()，promptAction是从外部导入的库
console.log：登录信息提示
showToast组件的属性
message：提示的信息
duration：提示的信息的持续时间，单位为毫秒
bottom：距离底部距离

2. A.ets文件

A文件实现了一个待办清单，需放在entry.src.main.ets.pages下

import { router } from '@kit.ArkUI' // 导入路由管理器对象
import promptAction from '@ohos.promptAction';

@Entry
  // 运行程序的入口
@Component
  // 组件的标识，组件可以重用

struct A {
  // 成员变量、函数
  str: string = "在下为A";
  // 加@State就是状态变量，可以设置事件，不加只是成员变量
  message: string = "2024/09/11\n代办列表";
  private todolist: Array<string> = ['吃早饭', '吃午饭', '吃晚饭', '睡觉'];
  private num: number = 100;

  build() { // 类似<body>标签
    // this.newLocalBuilder()
    // 前端做页面布局：流编译：相对定位、绝对定位、固定定位
    // 电脑显示数据是第一象限，顶点为左上角

    RelativeContainer() { // 相对定位布局方式
      Text(this.message)
        .fontSize(50)
        .margin({ left: 20, top: 10 });

      ForEach(this.todolist, (item: string) => { // 循环，类似java中的增强for循环
        ArrItem({ str: item, index: this.num += 100}); // 使用方法，传参数
      });
    }.height('100%')
    .width('100%')
  }

  @Builder
  // 第一阶段代码，被提取成一个函数
  // 第二阶段代码实现了此功能，可进行对比学习
  newLocalBuilder() {
    Row() {
      Column() {
        Text(this.str)
          .fontSize(20)
          .fontColor(Color.Blue);
        Button() {
          Text('next qmsz')
            .fontSize(30)
            .fontColor(Color.White);
        }.type(ButtonType.Capsule)
        .height(80)
        .width('60%')
        .onClick(() => {
          console.log('点击了next按钮');
          router.pushUrl({ url: 'pages/B' });
        });
      }.width('80%');
    }.height('90%')
  }
}

@Component
struct ArrItem {
  @State boo: boolean = false; // 状态变量
  private str: string = ""; // 文本内容
  private index: number = 90; // 距离顶部的距离

  build() {
    Row() {
      if (this.boo) {
        Image($r('app.media.ok')) // 图片地址
          .height(70) // 图片长度
          .width(70) // 图片宽度
          .margin({ left: 20 }); // 距离左侧组件20像素
      } else {
        Image($r('app.media.buok'))
          .height(70)
          .width(70)
          .margin({ left: 20 });
      }

      Text(this.str)
        .fontSize(50) // 文字大小
        .opacity(this.boo ? 0.4 : 1) // 文字透明度
        .decoration({ type: this.boo ? TextDecorationType.LineThrough : TextDecorationType.None }) // 有无删除线
    }.borderRadius(24) // 设置元素的边框圆角半径
    .margin({ top: this.index }) // 跟上方组件的距离
    .onClick(() => {
      this.boo = !this.boo; // 将状态反转
    });

  }
}

3. B文件

B文件实现了登录功能，需放在entry.src.main.ets.pages下

import { router } from '@kit.ArkUI' // 导入路由管理器对象
import promptAction from '@ohos.promptAction'; // 提示动作

@Entry
  // 运行程序的入口
@Component
  // 组件的标识，组件可以重用

struct B {
  // 成员变量、函数
  str: string = "在下为B";
  // 状态变量，可触发事件
  @State username: string = "";
  @State password: string = "";
  // 加@State就是状态变量，可以设置事件，不加只是成员变量

  build() { // 类似<body>标签
    Row() { // 说明这是一行，可以设置多个Row多行
      Column() { // 说明这是本行中的一列，可以设置多列
        // 小括号里是核心属性，大括号里是子组件
        // this.newLocalBuilder();

        // 此组件负责输入用户名
        TextInput({ placeholder: '请输入用户名', text: this.username }) // placeholder提示词，什么都没输入时的占位字，text代表本输入框内输入的字符会与username属性时刻保持同步
          .placeholderFont({ size: 30 }) // 提示词的尺寸大小
          .placeholderColor(Color.Blue) // 提示词的颜色
          .maxLength(6) // 能输入的最长长度
          .margin({ top: 100, left: 40 }) // 相对上方组件距离100单位，相对左方40单位
          .onChange((val) => { // onChange如果文本框内的文本发生了变化
            // ()=>{}匿名函数，()内是参数，{}内是方法体
            // val是用户实时输入的信息
            this.username = val; // 文本框内容变化时，将其赋值给username变量
          });

        // 此组件负责输入密码，大部分属性与用户名一致
        TextInput({ placeholder: '请输入密码', text: this.password })
          .type(InputType.Password) // 此行代码说明这个文本框用于输入密码，字符会以·的方式显示，会在最右侧有一个眼睛，可以显示输入的字符
          .placeholderFont({ size: 30 })
          .placeholderColor(Color.Blue)
          .maxLength(6)
          .margin({ top: 20, left: 40 })
          .onChange((val) => { // val是用户实时输入的信息
            this.password = val;
          });

        // 此组件负责提交数据，做判断，输出数据
        Button() {
          Text('登录') // 按钮内的字符
            .fontSize(30) // 字体大小
            .fontColor(Color.White); // 字体颜色，因为按钮是蓝色所以白色更清晰
        }.type(ButtonType.Capsule) // 按钮为胶囊型,Circle为圆形，Normal为长方形
        .height(50) // 按钮高度为50
        .width(150) // 按钮宽度为150
        .onClick(() => { // 按钮的点击事件，使用了匿名函数()=>{}
          if (this.username == 'asd' && this.password == '123456') { // 如果用户名密码匹配，则登录成功
            console.log('登录成功'); // 会在Log界面输出登录成功语句
            router.pushUrl({ url: 'pages/A' }); // 会跳转到A页面
          } else { //未匹配
            promptAction.showToast({ // 在界面弹窗进行提示，类似alert()
              message: '这是个弹框错误信息', // 提示的信息
              duration: 1000, // 持续时间，单位为毫秒
              bottom: 200 // 距离底部距离
            });
            console.log('登录失败' + this.username + ';' + this.password); // 登录失败的信息提示
          }
        });
      }.width('80%'); // 只使用整个页面宽度的80%
    }.height('90%'); // 只是用整个页面长度的90%

  }

  @Builder
  // 第一阶段代码，被提取成一个函数
  // 第二阶段代码实现了此功能，可进行对比学习
  newLocalBuilder() {
    Text(this.str)
      .fontSize(20)
      .fontColor(Color.Blue)
    Button() {
      Text('back z')
        .fontSize(30)
        .fontColor(Color.White);
    }.type(ButtonType.Capsule)
    .height(80)
    .width('60%')
    .onClick(() => {
      console.log('点击了back按钮');
      router.pushUrl({ url: 'pages/A' });
    })
  }
}

4. 辅助文件

在entry.src.main.resources.base.profile下的main_pages.json文件中编写如下代码来声明页面

{
  "src": [
    "pages/Index",
    "pages/A",
    "pages/B"
  ]
}

在entry.src.main.resources.base.media下加入两个图片文件，用于定义按钮样式
buok.png文件

ok.png文件

5. 盒子模型介绍

盒子模型（Box Model）是CSS中一种用于描述和布局元素的概念。它将每个HTML元素看作是一个矩形的盒子，包括内容区域、内边距（padding）、边框（border）和外边距（margin）。

盒子模型包括以下几个部分：
内容区域（Content）：盒子的实际内容，如文本、图像等。宽度（width）和高度（height）属性决定了内容区域的尺寸。
内边距（Padding）：内容区域和边框之间的空白区域。可以为上、右、下、左四个方向分别设置不同的内边距大小，或者统一设置一个值。内边距可以通过padding属性来控制。
边框（Border）：在内边距周围绘制的一条线，用于分隔内容区域和内边距。可以为上、右、下、左四个方向分别设置不同的边框样式、宽度和颜色，或者统一设置一个值。边框可以通过border属性来控制。
外边距（Margin）：边框和相邻元素之间的空白区域。可以为上、右、下、左四个方向分别设置不同的外边距大小，或者统一设置一个值。外边距可以通过margin属性来控制。

盒子模型中的这些部分相互包围和影响，决定了元素在页面中的尺寸和布局。通过调整盒子模型的各个属性，可以实现元素的大小、内边距、边框和外边距的控制，从而实现灵活的页面布局和样式设计。