序言：
随着国家政府的支持，越来越多的高校把安卓课程替换为鸿蒙开发课程，目前已有23家985高校、46家211高校已开设或即将开设HarmonyOS相关课程。未来IOS、安卓、鸿蒙大有三分天下的局势。
作为软件工程系学生，或许鸿蒙开发语言并不像Java、C++这种经典的编程语言可以直接找到如单独使用Java语言工作的开发岗位，但技多不压身，鸿蒙开发语言的火热是大势所趋，学会鸿蒙至少可以起到锦上添花的作用。
笔者也是跟着B站黑马的课程一步步学习，学习的过程中添加部分自己的想法整理为笔记分享出来，如有代码错误或笔误，欢迎指正。
B站黑马的课程链接：鸿蒙课程介绍_哔哩哔哩_bilibili
目录
六.对象：用于描述一个物体的特征和行为，是一个可以存储多个数据的容器
Part1.ArkTs基础语法
零.认识数据与基础知识：
1.开发环境：
①前往鸿蒙官网下载DevEco Studio：DevEco Studio-HarmonyOS Next Beta版-华为开发者联盟
一路点击安装→打开软件
首先我们不用去管左侧这一堆乱七八糟的代码，刚开始看也看不懂，我们打开entry/src/main/ets/pages/Index.ets
在@Entry上面就可以进行ArkTs的代码练习
2.基本数据类型
①字符串string
②数字number
③布尔常量boolean
一.变量：专门用来存储数据的容器
语法：let 变量名:变量类型
let title:string = '河马蛋糕'
let price number = 18
let isSelect:boolean = true1.变量的存储
//console.log('消息说明','打印的内容')
console.log('i say','Hello World')
//1.1 字符串 string 类型
let title:string ='河马蛋糕'
console.log('字符串title',title)
//1.2 数字 number 类型
let age:number = 18
console.log('年纪',age)
//1.3 布尔 boolean 类型 (true和false)
let isLogin:boolean = true
console.log('是否登录成功',isLogin)2.变量的修改
age = 77
console.log('年纪',age)二.常量：用来存储数据（不可变）
语法：const 变量名:变量类型
//常量
const PI:number = 3.14
console.log('PI',PI)
const companyName:string = '华为'
console.log('公司名',companyName)tip：命名规则：
①只能包含数字、字母、下划线、$，不能以数字开头
②不能使用内置关键词（如let、const）
③严格区分大小写
三.数组：是一个容器，可以存储多个数据
语法：let 数组名:类型[] =[数据1,数据2,...]
let names:string[]=['小红','小绿','小蓝'] 例子：
//学生数组
//语法：
//let 数组名:类型[] =[数据1,数据2,...]
//数组中存储的每个数据，都有自己的编号，编号从0开始（索引）
let names:string[]=['赵泥笨','于霸虚','曹温暖','谷鱼沼']
console.log('数组names',names)
//利用有序编号（索引）取数组的数据
//取数据：数组名[索引]
console.log('取到了',names[3])四.函数：是可以被重复使用的代码块
语法：
①定义函数
function 函数名(){ 函数体 }②调用函数
函数名()
//函数例子
function star(){
console.log('五角星','★')
console.log('五角星','★★')
console.log('五角星','★★★')
console.log('五角星','★★★★')
console.log('五角星','★★★★★')
}
star()
star()
star()函数的完整用法：
function 函数名(需要处理的数据（形参）)｛
编写代码对数据进行处理
return 处理后的结果
｝let 变量名:类型 = 函数名(实际要处理的数据（实参）)
//完整函数调用
//用一个函数，实现如下需求
//传入 价格 和 数量，返回 计算的结果
//1.苹果2元一斤，买三斤多少钱？
//2.河马4元一斤，买四斤多少钱？
function buy(price:number,num:number){
//1.处理数据
let sum:number=price*num
//2.返回结果
return sum
}
console.log('买苹果花了',buy(2,3))
console.log('买河马花了',buy(4,4))五.箭头函数：箭头函数是比普通函数更简洁的一种函数写法
语法：
let 函数名 = (形参1:类型,形参2:类型,)=>{
//函数体}函数名(实参1,实参2)
//箭头函数编写上面两个例子
let star1 = ()=>{
console.log('五角星','★')
console.log('五角星','★★')
console.log('五角星','★★★')
console.log('五角星','★★★★')
console.log('五角星','★★★★★')
}
let buy1 =(price:number,num:number)=>{
let result = price*num
return result
}
console.log('箭头函数买苹果花了',buy1(2,3))
console.log('箭头函数买河马花了',buy1(4,4))六.对象：用于描述一个物体的特征和行为，是一个可以存储多个数据的容器
语法：
let 对象名称:对象结构类型 = 值1.通过interface借口约定 对象结构类型
/*interface 接口名｛
属性1:类型1
属性2:类型2
属性3:类型3
｝*/
interface Person{
name:string
age:number
weight:number
}2.定义对象并使用
let hippopotamus:Person={
name:'河马',
age:18,
weight:8888
}3.获取对象属性值 语法：对象名.属性名
console.log('体重',hippopotamus.weight)七.对象-方法：
方法作用：描述对象的具体行为
1.约定方法（对象内部规定好的函数）类型
/*interface 接口名称{
方法名：（参数:类型）=>返回值类型
}*/
interface Person{
//①定义内部属性
name:string
age:number
weight:number
//②声明基于接口，定义对象方法
dance:()=>void
sing:(song:string)=>void
}2.添加方法（箭头函数）
let hippopotamus:Person = {
name:'河马',
age:18,
weight:8888,
dance:()=>{
console.log('河马说','我来跳个舞')
},
sing:(song:string)=>{
console.log('河马说','我来唱一个',song)
}
}3.调用对象里的方法
hippopotamus.dance()
hippopotamus.sing('小河马爱洗澡')八.联合类型：
联合类型是一种灵活的数据类型，它修饰的变量可以存储不同类型的数据
语法：let 变量:类型1|类型2|类型3 = 值
//需求：定义一个变量，存放【年终考试评价】
//考试评价：可能是具体的分数，也可能是A/B/C/D等级
let judge:number|string = 100
console.log('年终考试评价',judge)
judge = 'A+'
console.log('年终考试评价',judge)联合类型可以将变量值，约定在一组数据范围内进行选择
如性别： 男 女 保密
let gender:'man'|'woman'|'secret'='man'九.枚举类型
枚举类型是一种特殊的数据类型，约定变量只能在一组数据范围内选择值，如下图
语法：
/*enum 枚举名{
常量1 = 值,
常量2 = 值,
......
}*///1.定义枚举列表（常量列表）
enum ThemeColor{
Red = '#ff0f29',
Orange = '#ff7100',
Green = '#30b30e'
}//2.给变量设置枚举类型
let color:ThemeColor = ThemeColor.Orange
console.log('color',color)Part2.界面开发基础
零.准备阶段
在bulid里进行代码编写，在预览器观看代码效果
简单修改基础代码，查看效果
build() {
RelativeContainer() {
Text(this.message)
.id('HelloWorld')
.fontSize(50) //设置文本的文字大小
.fontWeight(FontWeight.Bold) //设置文本的粗细
.fontColor(Color.Blue) //设置文本的颜色
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
}
.height('100%')
.width('100%')
}
一.布局思路
ArkUI（方舟开发框架）是一套 构建 鸿蒙应用 界面 的框架
构建页面的最小单位就是“组件”
1.组建分类：
①基础组件：界面呈现的基础元素。
如：文字、图片、按钮等。
②容器组件：控制布局排布。
如：Row行、Column列等。
2.组件语法：
①容器组件：行Row、列Column
容器组件(){
//内容
}
②基础组件：文字Text、图片
基础组件(参数)
例子：
build() {
//布局思路：先排版，再内容
Column(){
//内容
Text('河马品种')
Row(){
Text('暴怒')
Text('笨拙')
Text('嗜睡')
Text('嘤嘤')
}
}
}二.组件的属性方法
需求：美化组件的外观效果→组件的属性方法
| 组件属性方法 | 描述 |
| .weigh（200） | 宽度 |
| .height（200） | 高度 |
| .backgroundColor（Color.Pink） | 背景色 |
| .fontSize(24) | 字体大小 |
| .fontWeight(FontWeight.Bold) | 字体粗细 |
build() {
//布局思路：先排版，再内容
Column(){
//内容
Text('河马品种')
.height(60)
.fontSize(30)
.fontWeight(FontWeight.Bold) //可以填写100~900的数字 加粗700 默认400
.width('100%')
Row(){
Text('暴怒')
.width(50)
.height(30)
.backgroundColor(Color.Brown)
Text('笨拙')
.width(50)
.height(30)
.backgroundColor(Color.Green)
Text('嗜睡')
.width(50)
.height(30)
.backgroundColor(Color.Orange)
Text('嘤嘤')
.width(50)
.height(30)
.backgroundColor(Color.Pink)
}
.width('100%')
}
.width('100%')
}1.字体颜色
①枚举颜色 Color.颜色名
.fontColor(Color.Red)②#开头的16进制
.fontColor('#df3c50')2.文字溢出省略号、行高
①文字溢出省略（设置文本超长时的显示方式）
语法：
.textOverflow({
overflow:TextOverflow.XXX
})
//注意：需要配合.maxLines（行数）使用②行高
语法：
.lineHeight(数字)综合案例：
build() {
/*
.textOverflow({
overflow:TextOverflow.XXX
})
//注意：需要配合.maxLines（行数）使用*/
Column(){
Text('河马简介')
.fontSize(30)
.fontWeight(FontWeight.Bold)
Text('河马，是偶蹄目河马科河马属半水生哺乳动物。河马是淡水中最大的杂食性哺乳动物，体型巨大，四肢短；头粗硕；嘴大，可以张开呈90度角；河马的门齿和犬齿均呈獠牙状，下门齿像铲子一样向前面平行伸出；河马的眼睛、鼻孔、耳壳等都生在面部的上端，几乎在同一个平面上；河马皮肤很厚，呈黑褐色兼赤紫色，光滑无毛，仅在嘴端、耳内侧和尾巴上有一些毛。河马一词的意思是指“河中之马”，这是希腊人对这种强悍野兽的称呼')
.textOverflow({
overflow:TextOverflow.Ellipsis
})
.maxLines(3)
.lineHeight(24)
}
}
3.Image图片组件
作用：界面中展示图片
语法：
Image(图片数据源) //支持网络图片资源和本地图片资源
Image($r('app.media.文件名')) //可以直接定位到这个文件夹里的图片实例：
build() {
Column(){
//1.网络图片加载
Image('https://bkimg.cdn.bcebos.com/pic/3ac79f3df8dcd100796032fd738b4710b8122f6a?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080')
.height(200)
//2.本地图片加载 Image($r('app.media.文件名'))
Image($r('app.media.1'))
.height(200)
Text('河马生活照片')
Row(){
Image($r('app.media.2'))
.width(50)
Text('好可爱的河马宝宝')
}
.width('100%')
}
}
4.输入框和按钮
需求：实现登陆或注册的排版→ 输入框 和 按钮 组件
//输入框
TextInput(参数对象)
.属性方法()
//按钮
Button('按钮文本')①参数对象：placeholder 提示文本
TextInput({
placeholder:'占位符文本'
})②属性方法：.type(InputType.xxx)设置输入框type类型
| type值 | 解释说明 |
| Normal | 基本输入模式，无特殊限制 |
| Password | 密码输入模式 |
TextInput({
placeholder:'占位符文本'
}).type(InputType.Password)案例：
build() {
//控制组件间的距离，可以给Column设置｛space:间隙大小｝
Column({space:15}){
TextInput({
placeholder:'请输入用户名'
})
TextInput({
placeholder:'请输入密码'
}).type(InputType.Password)
Button('登陆')
.width(200)
}
}
三.综合案例01-华为登陆
1.构建界面思路：
①排版（分析布局）
②内容（基础组件）
③美化（属性方法）
build() {
/*1.构建界面思路：
①排版（分析布局）
②内容（基础组件）
③美化（属性方法）*/
Column({space:15}){
//华为图标
Image($r('app.media.huawei'))
.width(50)
//输入框
TextInput({
placeholder:'请输入用户名'
})
TextInput({
placeholder:'请输入密码'
}).type(InputType.Password)
//登录按钮
Button('登陆')
.width('100%')
//前往注册和忘记密码部分用Row
Row({space:15}){
Text('前往注册')
Text('忘记密码')
}
}
//内边距padding 间隙space
.padding(20)
.width('100%')
}
感谢阅读。
881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
