oa系统网页版_北京网站建设网络推广公司_培训机构哪家最好_系统优化助手

系列文章目录

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

---

---

前言

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

---

一、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属性来控制。

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

---

总结

本文介绍了：
鸿蒙的基础介绍：鸿蒙的概念；
鸿蒙的编程环境：ArkTS、DevEco Studio；
基本组件的使用：Text、TextInput、Button；
如何进行页面跳转：router.pushUrl进行跳转
你们……收到了嘛……在下……最后的……鸿蒙石水花……