系列文章目录
文章目录
前言
本文会介绍:
鸿蒙的基础介绍;
鸿蒙的编程环境;
基本组件的使用;
如何进行页面跳转
本文会对以上内……容进行讲解,在下攸攸太……上,我……快不行了,我要将我学习鸿蒙的精……髓写在本文中……
一、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进行跳转
你们……收到了嘛……在下……最后的……鸿蒙石水花……