目录
一、ArkTS基础快速入门
二、认识和存储数据
2.1 认识数据
2.2 存储数据(变量、常量)
2.2.1 变量
2.2.2 常量(不可修改)
三、数组
四、函数-Function
4.1 函数的基本使用
4.1.1 定义函数
4.1.2 调用函数
4.2 函数的完整写法
4.3 箭头函数
五、接口&对象
六、对象-方法
七、联合类型
八、枚举类型
九、小技巧
9.1 取消热更新
9.2 备份文件
9.3 复制
9.4 预览不能全屏问题
9.5 快速生成结构体
9.6 添加/取消注释
9.7 设置透明色
9.7.1 十六进制设置透明色
9.7.2 设置透明色
9.7.3 opacity设置透明度
9.8 动画animation
9.9 根据宽高比设置自动适应屏幕大小
前言:ArkTS快速入门,ArkTS:是一门用于开发鸿蒙应用的编程语言。
一、ArkTS基础快速入门
ArkTS:是一门用于开发鸿蒙应用的编程语言
简单的演示控制台输出
二、认识和存储数据
2.1 认识数据
编程语言的核心是处理 数据
三种常见的基础数据类型:
① string 字符串:描述信息
② number 数字:计算
③ boolean 布尔:判断(真、假)
2.2 存储数据(变量、常量)
2.2.1 变量
变量:专门用来存储数据的容器
通过变量修改数据
// 学习日志输出内容,注意在控制台选phone
// console.log('春天的菠菜','鸿蒙开发学习者123')
// 变量的存储和修改
// 1 变量存储
// 1.1 字符串 string 类型
let title: string = '春天的菠菜'
console.log('输出的string类型:',title)
// 1.2 数字 number 类型
let age: number = 9
console.log('输出的number类型:',age)
// 1.2 布尔 boolean 类型
let isLogin: boolean = true
console.log('输出的boolean类型:',isLogin)
// 2 变量的修改
age = 20
console.log('输出的修改number类型:',age)
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
RelativeContainer() {
Text(this.message)
.id('HelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
}
.height('100%')
.width('100%')
}
}
2.2.2 常量(不可修改)
常量:用来存储数据(不可改)
// 常量
const PI:number = 3.1415
const companyName: string = '特斯拉'
console.log('常量公司名:',companyName,'PI:',PI)
//命名规则:
① 只能包含数字、字母、下划线、$,不能以数字开头 (重点)
②不能使用内置关键字或保留字(比如 let、const)
③ 严格区分大小写
三、数组
数组:是一个容器,可以存储多个数据,数据是有序的,编号(索引)从0开始
注意:数组指定的类型和存储的数据类型要必须一致,否则会报错
四、函数-Function
函数:是可以被重复使用的代码块
作用:函数可以把具有相同或相似逻辑的代码“包裹”起来,有利于代码复用
4.1 函数的基本使用
4.1.1 定义函数
4.1.2 调用函数
注意:先定义,后使用(变量、函数都是如此)
// 学习函数
// 1 定义函数
function star(){
console.log('*')
console.log('**')
console.log('***')
console.log('****')
console.log('*****')
}
// 2 调用函数
star()
4.2 函数的完整写法
根据我们传入不同的数据,进行处理,返回处理后的结果。
// 完整的函数
function buy(price: number,num:number){
//1 处理数据
let result: number = price * num
// 2返回结果
return result
}
// 2 调用函数
let apple:number = buy(3,5)
console.log('苹果:',apple)
4.3 箭头函数
箭头函数是 比普通函数 更简洁 的一种函数写法
普通函数和箭头函数,在后面开发中会有不同的使用场景,所以两种语法都需要掌握
// 学习函数
// 箭头函数
let star = ()=>{
console.log('*')
console.log('**')
console.log('***')
console.log('****')
console.log('*****')
}
// 2 调用函数
star()
let buy = (price: number,num:number) =>{
//1 处理数据
let result: number = price * num
// 2返回结果
return result
}
// 2 调用函数
let apple:number = buy(3,5)
console.log('苹果:',apple)
五、接口&对象
对象:是一个可以存储多个数据容器。
作用:用于描述一个物体的特征和行为。
1.通过 interface 接口约定 对象结构类型
2.定义对象并使用
// 定义一个对象
// 姓名:春天的菠菜 年龄:9 体重:20
// 1 定义接口
interface Person{
name: string
age: number
weight: number
}
// 2 基于接口,定义对象
let bocai:Person = {
name: '春天的菠菜',
age: 9,
weight: 20
}
// 3 获取对象属性值,对象名.属性名
console.log('体重:',bocai.name,'年龄:',bocai.age)
// 基于接口,可以定义多个对象,这些对象有着相同的结构类型
let jsz:Person = {
name: '金手镯',
age: 19,
weight: 100
}
console.log('体重:',jsz.name,'年龄:',jsz.age)
六、对象-方法
方法作用:描述对象的具体行为
// 定义一个对象
// 特征: 姓名:春天的菠菜 年龄:9 体重:20
// 行为: 唱歌、跳舞
// 1 定义接口
interface Person{
name: string
age: number
weight: number
// 定义方法的类型
sing: (song: string)=> void
dance: () => void
}
// 2 基于接口,定义对象
let bocai:Person = {
name: '春天的菠菜',
age: 9,
weight: 20,
// 定义方法
sing: (song: string) =>{
console.log('小七说','我喜欢唱',song)
},
dance: () => {
console.log('我喜欢跳舞1')
}
}
// 3 调用对象里面的方法
bocai.sing('大香蕉')
bocai.dance()
七、联合类型
联合类型是一种灵活的数据类型,它修饰的变量可以存储不同类型的数据
// 定义一个对象,存放《年终考试评价》
// 考试评价:可能是具体的分数,也可能是A\B\
let judge: number | string = 100
judge = 'A+'
judge = '优秀'
console.log('年终等级是:', judge)
let gender: 'man' | 'woman' | 'secret' = 'man'
八、枚举类型
枚举类型是一种特殊的数据类型,约定变量只能在一组数据范围内选择值。
// 利用枚举类型,给变量设置主色
// 取色范围:
// 红色: '#ff0f29',
// 橙色: '#ff7100'
// 绿色: '#30b30e'
// 1 定义枚举(定义常量列表)
enum ThemeColor{
Red = '#ff0f29',
Orange = '#ff7100',
Green = '#30b30e'
}
// 2 给变量设置枚举类型
let color: ThemeColor = ThemeColor.Red
console.log('COLOR',color)
九、小技巧
9.1 取消热更新
点击这里1取消热更新,需通过重载2显示更新内容
9.2 备份文件
复制Index.ets即可
9.3 复制
Ctrl +D
9.4 预览不能全屏问题
import window from '@ohos.window';
onPageShow(): void {
window.getLastWindow(AppStorage.get("context"), (err, data) => {
if (err.code) {
console.error('Failed to get last window. Cause:' + JSON.stringify(err));
return;
}
data.setFullScreen(true)
});
}
9.5 快速生成结构体
输入entry + tab
@Entry
@Component
struct {
build() {
}
}
补上Index 即可
@Entry
@Component
struct Index {
build() {
}
}
9.6 添加/取消注释
ctrl + / 添加取消 // 注释
ctrl + shift + / 添加取消 /* */多行的注释
9.7 设置透明色
9.7.1 十六进制设置透明色
设置颜色之后,按步骤1 2 3进行
9.7.2 设置透明色
.backgroundColor(Color.Transparent) //透明背景色
9.7.3 opacity设置透明度
.opacity(0)
9.8 动画animation
只要有状态改变,就可设置动画
.animation({
duration: 1000
})
9.9 根据宽高比设置自动适应屏幕大小
首先根据图片计算宽高比