鸿蒙HarmonyOS开发：基础语法汇总
·
写在前面：本文旨在对鸿蒙开发中的常用语法进行归纳整理，不涉及深入原理或细致讲解，适合作为查阅和复习之用。
正文开始。
一、组件外部逻辑
1. 控制台输出
console.log('控制台的','信息')
2. 数据类型
常见数据类型：
- string：字符串
- number：数字
- boolean：布尔值
- null：空值
- undefined：未定义
a. 字符串
定义及使用：
// 定义
let name: string = 'wwangxu'
let description: string = '是帅哥'
// 字符串拼接
let truth: string = name + description // 'wwangxu是帅哥'
let age: string = name + ' is ' + 18 // 'wwangxu is 18'
// 模板字符串
let id:number = 18
let t1:string = `${name}的ID为${id}` // 'wwangxu的ID为18'
b. 类型转换
// 字符串转数字
Number('1.4') // 1.4
Number('44') // 44
Number('1.13adgd') // NaN（转换失败）
parseInt('1.32') // 1（去掉小数部分）
parseInt('1.32asaf') // 1
parseFloat('1.32') // 1.32（保留小数部分）
parseFloat('1.32aa') // 1.32
// 数字转字符串
let num1:number = 1.3
let num2:number = 1.9
let num3:number = 1.4362
num1.toString() // '1.3'
num2.toString() // '1.9'
num3.toString() // '1.4362'
num1.toFixed() // '1' （四舍五入）
num2.toFixed() // '2'
num3.toFixed(2) // '1.44'
3. 变量
定义方式：let 变量名: 类型 = 值
4. 常量
定义方式 const 变量名: 类型 = 值
5. 数组
a. 数组定义与使用
// 定义
let arr: number[] = [1,2,3,4]
// 使用
let item1: number = arr[0] // 1
// 长度
let arr_size1:number = arr.length // 4（数组长度）
// 头插
let arr_size2 = arr.unshift(0) // 返回修改后的数组长度
// 尾插
let arr_size3 = arr.push(0) // 返回修改后的数组长度
// 头删
let item2: number = arr.shift() //返回删除的项
// 尾删
let item3: number = arr.pop() //返回删除的项
// 任意位置添加/删除
arr.splice(2,1,4,5,6,7,8) // 数组名.splice(起始位置, 删除的个数, 新增元素1, 新增元素2, ......)
b. 对象数组
// 定义接口
interface Person{
id:number
name:string
address:string
age:number
}
// 构建对象数组
let personArr:Person[] = [
{1,'小帅','幸福小区',18},
{2,'小美','狗熊岭',24},
{3,'小孩','羊村',9}
]
6. 函数
a.定义和调用：
// 定义
function 函数名([形参列表]){
// 函数内语句
return 处理后结果
}
// 调用
函数名([实参列表])
b. 可选参数 和 默认参数
// 可选参数和默认参数是在函数定义中不是必须要传的参数
// 可选参数和默认参数必须放在必选参数之后
// 可选参数
function hello1(name?: string) {
console.log(name); // undefined（如果不传）
}
// 默认参数
function hello2(name: string = "Guest") {
console.log(name); // "Guest"（如果不传）
}
c. 剩余参数 和 展开运算符
// 剩余参数
// 我们可以将 函数 或 方法 中一个不定数量的参数表示为一个数组
// 剩余参数只能写在最后一位
function 函数名(参数1,参数2,...剩余参数数组){
// 逻辑代码
// 之前的参数：挨个获取即可
// 剩余参数：以数组形式获取
}
// 例如：
function sum(numA:number,numB:number,...theArgs:number[]) {
let total = numA+numbB;
for (const arg of theArgs) {
total += arg;
}
return total;
}
console.log(sum(1, 2, 3).toString()) // 6
console.log(sum(1, 2, 3, 4).toString()) // 10
//---------------------------------------------------------------
// 展开运算符...
// 出于程序稳定性，以及运行性能考虑，在 ArkTS 中 ...(展开运算符) 只能用在数组
onst numArr1: number[] = [1, 2, 3, 4]
const numArr2: number[] = [5, 6, 7]
// 合并到一起
const totalArr: number[] = [...numArr1, ...numArr2
d. 函数重载
// 函数重载
function greet(person: string): string;
function greet(person: string,age:mumber):string;
7. 箭头函数
定义和调用：
// 定义
let 函数名 = ([形参列表]) => {
//函数体
}
// 调用
函数名([实参列表])
8. 接口和对象
定义和使用
// 接口定义
interface 接口名{
属性名1:类型1
属性名2:类型2
属性名3:类型3
方法名1:([形参列表]) => 返回值类型1
方法名2:([形参列表]) => 返回值类型2
}
// 对象定义
let 对象名:接口名 = {
属性名1:值1,
属性名2:值2,
属性名3:值3,
方法名1:([形参列表]) => {
//函数体
},
方法名2:([形参列表]) => {
//函数体
}
}
// 调用对象
对象名.属性名1
对象名.方法名1([实参列表])
9. 语句
a. 分支
// if 分支
if(条件1){
// 语句1
}
else if(条件2){
// 语句2
}
else{
// 语句3
}
// switch 分支
switch (表达式) {
case 值1:
与值1匹配执行的语句
break
case 值2:
与值2匹配执行的语句
break
default:
以上都未成功匹配执行的代码
}
// 条件 ？条件成立执行的表达式 ：条件不成立执行的表达式
1 > 2 ? 1 : 2
//-----------------------------------------------------------------
// 条件渲染
@State counter: number = 1
build() {
Column() {
if (this.counter == 1) {
Text('1')
} else if (this.counter == 2){
Text('2')
} else {
Text('any')
}
}
}
b. 循环
// while 循环
while (条件) {
条件成立重复执行的代码
}
// for 循环
for (初始值; 条件; 变化量) {
重复执行的代码
}
// 遍历数组
let arr:number[] = [1,2,3,4,5,6,7,8]
for(let item of arr){
console.log('数组元素：',item)
}
//------------------------------------------------------------------
// ForEach 渲染控制
// ForEach(arr, (item, index) => {})
@State titles:string[] = ['电子产品', '精品服饰', '母婴产品', '影音娱乐', '海外旅游']
build() {
Column() {
ForEach(this.titles, (item: string, index) => {
Text(item)
.fontSize('24')
.fontWeight(700)
.fontColor(Color.Orange)
.width('100%')
.padding(15)
})
}
}
10. 类
相信大家面向对象学的都很不错，这里就简单做一下示例
a. 类的定义
// 定义类
class 类名{
// 1. 属性
// 字段名、类型、初始值
属性名1: 类型 = 'xxx'
//---------------------------------------------------
// 2. 构造函数
constructor([参数列表]){
// 通过 new 实例化时，会调用构造函数
// 通过 this 关键字可以获取到实例对象
this.属性名1 = 参数1
this.属性名2 = 参数2
}
//----------------------------------------------------
// 3. 方法
方法名([参数列表]):返回值类型{
// 逻辑...
}
}
// 使用类（实例化）
let 对象名: 类名 = new 类名()
// 对象名.属性名
// 对象名?.属性名
//----------------------------------------------------
// 例如：
// 定义类
class Student{
// 1. 属性
id: number = 0
name: string = '无名'
address: string = '暂无地址'
age: number = 0
// 2. 构造函数
constructor(id: number, name: string, address: string, age: number){
this.id = id;
this.name = name;
this.address = address;
this.age = age;
}
// 3. 方法
sayHi(name:string):void{
console.log(name,'hello')
}
}
// 使用类
let WX:Student = new Student(1,'WX','幸福小区',18);
console.log('姓名:',WX.name)
WX.sayHi('小美')
b. 静态属性/方法
// 定义
class 类{
static 属性名:类型
static 方法(){}
}
// 使用
类.属性名
类.方法()
c. extends 和 super
class 父类 {
// 字段
// 方法
// 构造函数
}
// 继承
class 子类 extends 父类{
// 自己的字段（属性）
// 自己的方法
// 可以重写父类方法
// super
super.方法() // 调用父类方法
super() //调用父类构造函数
}
d. instanceof
// instanceof 运算符用来检测某个对象是否是某个类的实例
// 返回值为boolean
实例对象 instanceof Class
e. 修饰符
readonly // 只可以读，不可以修改，访问范围无限制
private // 私有，只能在本类中访问
protected // 受保护，只能在本类和子类中访问
public (默认值) // 公共，无限制
f. 接口继承与实现
// 接口继承
interface 接口1{
属性1:类型
}
interface 接口2 extends 接口1 {
属性2:类型
}
//-----------------------------------
// 接口实现
interface 接口{
属性:类型
方法:方法类型
}
class 类 implements 接口{
// 必须实现 接口中定义的 属性、方法，
// 否则会报错
}
g. 接口多态
// 接口多态，当接口的实现类实现了接口中的方法后，接口的引用指向实现类对象
// 访问的是实现类的方法，从而呈现多种状态。
let car: ICar = new Bus();//接口的引用指向实现类的对象
11. 泛型
// 型可以让【函数】等， 与多种【不同的类型】一起工作，灵活可复用
// 通俗一点就是：类型是 可变 的
function 函数名<Type>(temp:Type):Type{
return temp
}
fn<string>('123')
fn<number>(1)
二、组件结构
1. 容器组件
常见容器组件：
| 容器组件 | 描述 |
|---|---|
| Row() | 线性布局 行，可传参{ space:20 } |
| Column() | 线性布局 列，可同上传参 |
| Flex() | 弹性布局，可传参{direction:FlexDirection.Row, wrap:FlexWrap.Wrap} |
| Stack() | 层叠布局，子组件定义越靠后，层级越高，可传参{alignContent: Alignment.TopStart / Top / TopEnd / Start / Center / End / BottomStart / Bottom / BottomEnd} |
| Swiper() | 轮播图组件 |
| Scroll() | 滚动容器 |
| Tabs() | 导航栏容器 |
| Grid() | 网格布局 |
Row()、Column()、Flex()布局属性
| 属性 | 描述 |
|---|---|
| .justifyContent(FlexAlign.SpaceBetween) | 主轴对齐方式，枚举可选SpaceBetween / SpaceAround / SpaceEvenly / Start / Center / End |
| .alignItems(HorizontalAlign.Start / VerticalAlign.Top) | 交叉轴对齐方式，分为水平交叉轴 HorizontalAlign（枚举值：Start、Center、End）和垂直交叉轴 VerticalAlign（枚举值：Top、Center、Bottom） |
2. 组件通用属性
通用属性方法：
| 属性 | 描述 |
|---|---|
| .width(20) | 宽度 |
| .height(30) | 高度 |
| .backgroundColor(Color.Pink) | 背景色 |
| .padding(30) | 内边距，可传参{top:10,right:40 …} |
| .margin(30) | 外边距，可传参{top:10,right:40 …} |
| .border({ width:2, color:‘#ffffff’, style: BorderSytle.Solid }) | 外边框 |
| .borderRadius(5) | 组件圆角，可传参{topLeft:3, bottomLeft:20 …} |
| .layoutWeight(1) | 设置组件子元素的主轴空间权重 |
| .position({x:20, y:10}) | 设置子组件的绝对位置 |
| .zIndex(10) | 设置组件层级，数字越大，显示层级越高 |
| .onClick( () => { AlertDialog.show({ message:‘弹窗信息’ }) }) | 点击事件 |
背景图属性：
| 属性 | 描述 |
|---|---|
| .backgroundColor(Color.Red) | 背景色 |
| .backgroundImage($r(‘app.png’) , ImageRepeat. XY / X / Y / NoRepeat) | 背景图 |
| .backgroundImagePosition({x:200 , y:300} / Alignment.Center) | 背景图位置 |
| .backgroundImageSize(30 / ImageSize.Cover/Contain/Auto) | 背景图大小 |
3. Text()
定义：
Text('我是文本组件')
.fontSize(30)
.fontColor(Color.Red)
.fontWeight(800)
.textOverflow({
overflow: TextOverflow.Elipsis
})
.maxLine(2)
属性：
| 属性 | 描述 |
|---|---|
| .fontSize(20) | 字体大小 |
| .fontColor(Color.Red) | 字体颜色 |
| .fontWeight(FontWeight.Bold) | 字体粗细 |
| .textOverflow({ overflow:TextOverflow.Elipsis }) | 溢出处理 |
| .maxLine(行数) | 最大行数，配合溢出处理使用 |
| .lineHeight(数字) | 行高 |
| .textAlign(TextAlign.Start) | 对齐方式 |
4. Image()
定义：
Image($r('我是图片名.png'))
5. TextInput()
定义：
TextInput({
placeholder:'占位符文本'
})
.type(InputType.Password)
属性：
| 属性 | 描述 |
|---|---|
| .type(InputType.Password) | 输入类型：Password、Normal |
6. Button
定义：
Button('我是个按钮')
7. Swiper()
定义：
// 轮播图定义
Swiper(){
// 1.轮播内容
Text('1')
Text('2')
Text('3')
Text('4')
}
// 2.轮播属性
.width('100%')
.height(100)
常用属性：
| 属性 | 传值 | 描述 | 默认值 |
|---|---|---|---|
| .loop(true) | boolean | 是否开启循环 | true |
| .autoPlay(false) | boolean | 是否自动播放 | false |
| .interval(3000) | number | 自动播放时间间隔 | 3000 |
| .vertical(false) | boollean | 是否纵向轮播 | false |
| .indicator() | Indicator.dot() | 设置小圆点样式 | - |
8. Scroll()
// 滚动容器定义
// 需要设置容器尺寸
// 需要设置溢出的子组件
Scroll(){
// 只支持一个子组件
Column(){
// 内容放在这里
// 内容尺寸超过 Scroll 容器时，即可滚动
}
}
.width('100%')
.height(200)
.scrollable(ScrollDirection.Vertical)
常用属性：
| 名称 | 参数类型 | 描述 |
|---|---|---|
| .scrollable() | ScrollDirection | 设置滚动方向 ScrollDirection.Vertical 纵向 ScrollDirection.Horizontal 横向 |
| .scrollBar() | BarState | 设置滚动条状态 |
| .scrollBarColor() | string | number | Color | 设置滚动条颜色 |
| .scrollBarWidth() | string | number | 设置滚动条宽度 |
| .edgeEffect() | value:EdgeEffect | 设置边缘滑动效果 |
9. Tabs()
// 定义 Tabs
@Entry
@Component
struct Index{
build(){
Column(){
//BarPosition.Start 起始位置
//BarPosition.End 结尾位置
Tabs({ barPosition: BarPosition.End }){
// 页面1
TabContent(){
//内容区域，只能由一个子组件
Text('我是页面1')
}
.tabBar('导航1')
// 页面2
TabContent(){
Text('我是页面2')
}
.tabBar('导航2')
// 页面3
TabContent(){
Text('我是页面3')
}
.tabBar('导航3')
}
}
}
}
常用属性：
| 属性 | 描述 |
|---|---|
| Tabs({ barPosition: BarPosition.End }){} | BarPosition.Start 起始位置 BarPosition.End 结尾位置 |
| .vertical(true) | 调整导航栏 水平(true) 或 垂直(false) |
| .scrollable(true) | 调整是否手势滑动切换页面: 允许滑动true 不允许滑动false |
| .animationDuration(500) | 切换动画的时间 |
| .barMode(BarMode.Scrollable) | 设置导航栏是否滚动： BarMode.Scrollable 滚动 BarMode.Fixed 固定，默认值 |
10. Divider()
// 分割线
Divider()
11. Grid()
Grid(){
GridItem(){
}
.rowStart()
.rowEnd()
.columnStart()
.columnEnd
GridItem(){
}
}
.columnsTemplate(1fr 1fr 2fr)
.rowsTemplate(1fr 2fr 1fr)
.rowsGap(10)
12. Checkbox()
@Entry @Component
struct CheckboxExample
{
build()
{
Row(){
Checkbox({name: checkbox1’, group:'checkboxGroup'}).select(true)
.selectedColor(0xed6f21)onChange((value: boolean)=>console.info('Checkboxl change is'+ value)//在日志中打印
Checkbox({name: checkbox2', group: 'checkboxGroup'}).select(false)
.selectedColor(0x39a2db).onChange((value: boolean)=>
console.info('Checkbox2 change is'+ value)//在日志中打印H}}}
三、状态管理
状态变量定义：
let message1: string = '我是外部普通变量1'
@Entry
@Component
struct Index{
message2: string = '我是组件内部普通变量2'
@State message3: string = '我是组件内部状态变量'
build(){
Column() {
Text(message1)
Text(this.message2)
Text(this.message3)
.onClick(() => {
this.message3 = '我改变了，并且引起UI的渲染刷新'
})
}
}
}
四、样式&结构重用
@Extend
// 使用 @Extend 装饰器，可以将指定组件的样式、事件复用（指定某一特定组件）
// 只能定义在组件外部区域
// 可传参
@Extend(Text)
function textExtend(mes:string,id:number){
.fontSize(20)
.fontColor(Color.Red)
.onClick(()=>{
AlertDialog.show({
message:id+mes
})
})
}
@Entry
@Component
struct Index{
build(){
Column(){
Text('我是Text组件1，我要使用 textExtend 修饰我')
.textExtend('弹窗消息1',1)
Text('我是Text组件2，我要使用 textExtend 修饰我')
.textExtend('弹窗消息2',2)
Text('我是Text组件3，我要使用 textExtend 修饰我')
.textExtend('弹窗消息3',3)
}
}
}
@Styles
// 使用 @Styles 修饰器，可以抽取通用属性、事件（不指定某一特定组件）
// 可定义在组件内部区域、组件外部区域
// 不支持传参
// 定义在组件外部区域
@Styles
function styles1(){
.width('100%')
.height(40)
.onClick(()=>{
AlertDialog.show({
message:'修饰器1'
})
})
}
@Entry
@Component
struct Index{
//定义在组件内部区域
@Styles
styles2(){
.width('100%')
.height(40)
.onClick(()=>{
AlertDialog.show({
message:'修饰器2'
})
})
}
build(){
Column(){
Text('我是Text组件1，我要使用 sytles1 修饰我')
.styles1()
Text('我是Text组件2，我要使用 sytles2 修饰我')
.styles2()
}
}
}
@Builder
// 使用 @Builder 修饰器，可以自定义构建函数（包括结构、样式、事件）
// 可定义在组件内部区域、组件外部区域
// 可传参
// 定义在组件外部区域
@Builder
function builder(mes:string){
Text('我是Text组件1，我被定义在了 builder 中')
.width('100%')
.fontSize(20)
.fontColor(Color.Red)
.backgroundColor(Color.Pink)
.onClick(()=>{
AlertDialog.show({
message:mes
})
})
Text('我是Text组件2，我被定义在了 builder 中')
.width('100%')
.fontSize(20)
.fontColor(Color.Red)
.backgroundColor(Color.Green)
.onClick(()=>{
AlertDialog.show({
message:mes
})
})
}
@Entry
@Component
struct Index{
build(){
Column(){
builder('1')
builder('2')
builder('3')
}
}
}
五、组件
导出和导入
// 默认导出
export default 需要导出的内容
// 默认导入
import xxx from '模块路径'
// 全部导入
import * as Utils from '模块路径'
//-------------------------------------------------
// 例如：
// 逐个导出单个特性
export let name1 = …, name2 = …, …, nameN;
export function FunctionName(){...}
export class ClassName {...}
// 一次性导出
export { name1, name2, …, nameN };
// --------------------------------
// 导入
import { name1, name2, name3 as 别名 } from "module-name"
本文完。
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
23
0- 0
已为社区贡献1条内容
所有评论(0)