鸿蒙界面开发

鸿蒙界面开发

鸿蒙开发环境准备

开发工具下载 HarmonyOS 官网 → 一探究竟 → DevEco Studio 下载

地址：https://developer.huawei.com/consumer/cn/

ArkTS 基础快速入门

ArkTS：是一门用于开发鸿蒙应用的编程语言。

编程语言：用来控制计算机工作的，可以告诉计算机我们要做的事情。

console.log(‘我说’, ‘Hello World’)

认识数据

编程语言的核心是处理 数据 三种常见的基础数据类型：

① string 字符串：描述信息

② number 数字：计算

③ boolean 布尔：判断 （真、假）

存储数据（变量、常量）

变量：专门用来存储数据的容器

let title: string

// let 变量名: 类型 = 值
let title: string = '加油，一起努力学习鸿蒙'
let price: number = 2.27
let isSelect: boolean = true

常量：用来存储数据 （不可变）

变量常量的注意事项（命名规则）：

① 只能包含数字、字母、下划线、$，不能以数字开头

② 不能使用内置关键字或保留字 （比如 let、const）

③ 严格区分大小写

const 常量名: 类型 = 值
const PI: number = 3.1415926

常量不能修改

数组

数组：是一个容器，可以存储多个数据

let 数组名: 类型[] = [数据1, 数据2,...]
let names: string[] = ['小红', '小明', '大强'

注意：数组指定的类型和存储的数据类型要必须一致，否则会报错

获得数组元素： 数组名[索引]

let names: string[] = ['小红', '小明', '大强']
获得数组元素： 数组名[索引]
console.log('取出小明', names[1])

注意：索引号是从 0 开始的

‍

1.如何将多个数据一次性存储到数组？

Ø let 数组名: 类型[] = [数据 1, 数据 2, 数据 3…]

2.如何取出数组某个元素的数据？

Ø 数组名[索引]

3.数组指定的类型和存储的数据类型不一致为发生什么？

Ø 会报错

index.ets let names: string[] = ['小红', '小明', '大强'] 

console.log('取出小明', names[1])

函数 - Function

函数：是可以被重复使用的代码块

作用： 函数可以把具有相同或相似逻辑的代码“包裹”起来，有利于代码复用。

函数基本使用

1. 定义函数

function 函数名(){
	函数体
}

2. 调用函数

函数名（）

注意：先定义，后使用（变量、函数都是如此）

//实现重复三次输出5行五角星
function fn () {
console.log('五角星', '☆')
console.log('五角星', '☆☆')
console.log('五角星', '☆☆☆')
console.log('五角星', '☆☆☆☆')
console.log('五角星', '☆☆☆☆☆')
}
fn() // 第一次输出 5行五角星 
fn() // 第二次输出 5行五角星
fn() // 第三次输出 5行五角星

函数的完整用法

根据我们传入不同的数据，进行处理，返回处理后的结果。

​

function 函数名（形参1:类型, 形参2:类型 ...） {
编写代码对数据进行处理
return 处理后的结果
}

let 变量名: 类型 = 函数名（实参1, 实参2, ..）

注意：形参和实参个数要一致

箭头函数

箭头函数是比普通函数更简洁的一种函数写法

let 函数名 = (形参1: 类型, 形参2: 类型) => {
// 函数体
 // 1. 计算过程
 // 2. 返回结果
 return 计算的结果
}

函数名(实参1, 实参2)

//写一个buy函数，计算购买的总价 = 价格 * 数量
let buy = (price: number, weight: number) => {
let result: number = price * weight
return result
}

let apple: number = buy(2, 3)

普通函数和箭头函数，在后面开发中会有不同的使用场景， 所以两种语法都需要掌握。

‍

对象

作用：用于描述一个物体的特征和行为。

对象：是一个可以储存多个数据的容器。

对象 - 定义和说明

1. 通过 interface 接口约定 对象结构类型

interface 接口名 {
	属性1： 类型1
	属性2： 类型2
	属性3： 类型3
}

interface person {
	name: string
	age： number
	weight：number
}

2. 定义对象并使用 （通过 . 访问）

let person: Person = {
name: '靓仔斌',
age: 18,
weight: 130
}

console.log('名字', person.name)
console.log('年纪', person.age)
console.log('体重', person.weight)

总结

1. 对象是什么？作用是什么？

   是一个容器，可以保存不同类型数据 可以用来描述物体特征和行为。

2. 2. 如何定义对象？

   先定义接口，再基于接口约定对象结构类型，定义对象

   interface person {
   	name: string
   	age： number
   	weight：number
   }
   
   let person: Person = {
   name: '靓仔斌',
   age: 18,
   weight: 130
   }
   

3. 如果访问对象属性？

   对象.属性名

   console.log('名字', person.name)
   

‍

对象 - 方法

方法作用：描述对象的具体行为

1. 约定方法类型

interface 接口名称 {
方法名: (参数:类型) => 返回值类型
}
interface Person{
dance: () => void
sing: (song: string) => void
}

2. 添加方法（箭头函数）

let ym: Person = { 
	dance: () => {
	  conslose.log('我来跳个舞')
	},
	sing: (song: string) => {
	  console.log('杨幂说', '我来唱首', song)
	}
}
ym.dance()
ym.sing('爱的供养')

1. 如何在对象里面添加方法？

   约定方法类型 → 添加方法（箭头函数）

2. 2. 如何调用对象方法？

   对象名.方法名(实参)

‍

‍

联合类型

联合类型是一种灵活的数据类型，它修饰的变量可以存储不同类型的数据。

语法：let 变量: 类型 1 | 类型 2 | 类型 3 = 值

1. 如何让变量，可以存储多种类型的数据？

   联合类型：是由多个类型联合组合成的数据类型。

   let judge: number | string = 100
   judge = 'A'
   

2. 如何把变量值限定在一组数据范围内选择？

   let gender: 'man' | 'woman' | 'secret'
   

枚举类型

枚举类型是一种特殊的数据类型，约定变量 只能在一组数据范围内选择值。

​

1. 定义枚举类型（常量列表）

   enum 枚举名 {
   	常量1 = 值,
   	常量2 = 值,
   	......
   }
   enum ThemeColor {
   	Red = '#ff0f29',
   	Orange = '#ff7100',
   	Green = '#30b30e'
   }
   

2. 使用枚举类型，约束变量

   let color: ThemeColor = ThemeColor.Red
   console.log('主页颜色', color)
   

取值从枚举中（常量列表中）取

1. 枚举类型有什么特点？

   枚举是一种特殊的数据类型 约定变量也只能在一组数据范围内选择，提高可维护性

2. 2. 枚举类型怎么使用？

   声明枚举类型 → 使用枚举数据

界面开发起步

开发工具：仍然是 DevEco Studio

学习界面开发：build 里面写代码，预览器 看效果

界面开发-布局思路

ArkUI（方舟开发框架）是一套 构建 鸿蒙应用 界面 的框架。

构建页面的最小单位就是 “组件”。

组件分类：

① 基础组件：界面呈现的基础元素。

 如：文字、图片、按钮等。

基础组件(参数)

② 容器组件：控制布局排布。

如：Row 行、Column 列等。

容器组件() {
// 内容
}

布局思路：先排版，再放内容。

注意：build有且只能有一个根元素，且是容器组件

build() {
	Column () {
		Text('小说简介')
		Row () {
			Text('都市')
			Text('生活')
			Text('情感')
			Text('男频')
		}
	}
}

组件的属性方法

需求：美化组件外观效果 → 组件的属性方法

组件() {}
	.属性方法1(参数)
	.属性方法2(参数)
	.属性方法3(参数)
	……

Text('小说简介')
	.height(40)
	.fontSize(20)
	 ……

字体颜色

1. 设置文字的颜色？

   fontColor(颜色值) 色值是通用的

2. 色值写法？

   Text('小说简介')
   	.fontColor(Color.Orange)
   	.fontColor('#8fbce7')
   

   颜色值说明	具体演示
   枚举颜色 Color.颜色名	Color.Red、Color.Pink
   ② #开头的16进制	‘#8fbce7’ 【设计图会标注

3. 构建界面思路：排版 → 内容 → 美化

文字溢出省略号、行高

1. 文字溢出省略 （设置文本超长时的显示方式）

   语法：.textOverflow({ overflow: TextOverflow.XXX })

   注意：需要配合 .maxLines(行数) 使用

2. 2. 行高

   语法：.lineHeight(数字)

Text('方舟...')
	.textOverflow({
	overflow: TextOverflow.Ellipsis
  })
 .maxLines(2)
 .lineHeight(30)

总结

1、设置文字溢出省略号 ？

① .textOverflow({ overflow: TextOverflow.Ellipsis })

② .maxLines(数字) 控制最大行数

2、设置行高？

.lineHeight(数字)

‍

Image 图片组件

Image 图片组件 作用：界面中展示图片

语法：Image(图片数据源) 支持 网络图片资源 和 本地图片资源

① 网络图片

Image(‘https://www.itheima.com/images/logo.png’)

② 本地图片

Image( $r(‘app.media.文件名’) )

输入框 与 按钮

需求：实现登录或注册的排版 → 输入框 和 按钮组件

TextInput(参数) 
	.属性方法()

Button('按钮文本')

1. 参数：placeholder 提示文本

   TextInput({ 
   	placeholder: '占位符文本' 
   })
   

2. 属性：type(InputType.xxx) 设置输入框 type 类型

   type 值	解释说明
   ① Normal	基本输入模式，无特殊限制
   ② Password	密码输入模式

如何调整组件之间的距离？

给外层容器组件加 { space: 数字 }

Column({ space: 20})  {...}

‍