我的个人博客
返回首页
技术笔记

ArkTs语法基础

前言

ArkTS（Application Runtime Kit TypeScript）是华为为鸿蒙操作系统专门设计的应用开发语言。它诞生于华为对构建自主可控、高性能移动生态系统的战略需求。随着鸿蒙系统从 1.0 到 4.0 的快速迭代，ArkTS 也经历了从概念验证到生产就绪的完整演进过程。

ArkTS 的设计哲学体现了现代软件开发的三大核心理念：类型安全、开发效率和运行性能。它不仅要解决传统 JavaScript 在大型项目中的类型安全问题，更要在鸿蒙的分布式架构下提供卓越的性能表现。

从技术演进角度看，ArkTS 代表了移动应用开发语言的新一代发展方向。它融合了静态类型检查、函数式编程、响应式编程等现代编程范式，为开发者提供了更加强大和灵活的开发工具。

基础语法

声明

变量声明

使用关键字let声明的变量可以在程序执行期间具有不同的值。

let hi: string = 'hello'
hi = 'hello, world'

常量声明

使用关键字const声明的常量为只读类型，只能被赋值一次。

const hello: string = 'hello'

对常量重新赋值会造成编译时错误。

变量和类型

let 变量名:变量类型 = 值

let age: number = 1
console.log('年龄是',age)

数组的定义

let 数组名:数组类型[] = ['','','']

let Product: string[] = ['苹果','香蕉','橘子']
console.log('商品是：',store)

可以利用索引来查找数组元素

console.log(数组类型[索引])

对象

先定义接口从而约定对象的数据类型(这里就直接练习了)

interface internal {
  name: string,
  age: number,
  high: number,
  adult: boolean,
}

let person:internal = {
  name: '王铁锤',
  age: 20,
  high: 180,
  adult: true,
}

console.log('姓名是',person.name)
console.log('年龄是',person.age)
console.log('身高是',person.high)
console.log('是否成年',person.adult)

函数

定义函数

function 函数名(){
  
}

调用函数

函数名()

练习

使用函数计算任意员工的工资，并将结果返回给调用者

工资=基本工资+绩效工资+出差补助

function earn(s1: number,s2: number,s3: number){
  return s1+s2+s3
}
let sum = earn(1000,2000,3000)
console.log('总工资为',sum)

除此之外还有箭头函数，这里就不说了和普通函数差距并不是很大，使用正常函数即可

关于If

在arkts中的条件判断与其他所有编程语言都有着异曲同工之妙，if-else语句来写即可，我就直接来一个例子了

let age: number = 10
if(age<18){
  console.log('不成年，写你的作业吧')
}else if(age>=18 && age<60){
  console.log('正值壮年加油吧')
}else if(age >= 60){
  console.log('长命百岁')
}else{
  console.log('输入不合法')
}

关于循环

首先我们来看数组数据重复渲染ui内容的模板

ForEach(数组,(item:类型,index:number) => {
  组件
})

其中可能最需要解释的便是item和index是什么意思

item：当前正在遍历的那个数组元素，相当于“数组[i]”

index：当前元素在数组里的下标位置，从 0 开始计数

具体我就不举详细的例子了

组件基础

前提：build内只能有唯一的容器根组件

容器组件：布局

容器组件分给Column()和Row()两个组件。Column里面的内容会竖着排，Row内的组件会横着排。

我们来看一个案例（涉及到内容组件内容）

Column(){
      Text('这是dusk的项目')
      Text('这是dusk的项目')
      Text('这是dusk的项目')
    }


Row(){
      Text('这是dusk的项目')
      Text('这是dusk的项目')
      Text('这是dusk的项目')
    }

内容组件：内容

Text('内容')

Column(){
      Column(){
        Text('这是dusk的项目')
        Text('这是dusk的项目')
        Text('这是dusk的项目')
      }
      Row(){
        Text('这是dusk的项目')
        Text('这是dusk的项目')
        Text('这是dusk的项目')
      }
    }

图像组件

本地图片保存

首先我们来看一下本地图片的保存地址

我们首先要将需要使用的图片存放在media下，然后使用image函数来就调用

//调用方法： Image($r('app.media.文件名'))

Column(){
        Image($r('app.media.photo'))
          .width(100)
      }

网络图片保存

网络图片我们直接在Image函数中输入图片的地址即可

Column(){
        Image('https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEMe0RpOpOGqGsfVjAcjiSKu4Tp9QJW6QACfR4AAm312FUtTU4E-Ej5sTYE.jpg')
          .width(100)
      }

这样图片就可以在前端页面中展示了

属性

通用属性

width：宽度 | height：高度 | background：背景色

来一个例子

Column(){
        Text('这是dusk的项目')
          .background(Color.Red)
          .width(100)
          .height(100)
      }

文本属性

fontSize：字体大小 | fontColor：字体颜色 | fontWeight：字体粗细

依旧来一个例子

Row(){
        Text('这是dusk的项目')
          .fontColor(Color.Green)
          .fontSize(20)
          .fontWeight(700)

      }

内外边距：调节组件的内容位置

内边距：padding（组件与内部组件或文字的间距）

外边距：margin（两组间之间的间距）

具体的用法我就全部写到实例当中了

@Entry		//让这个UI成为启动页
@Component		//让这个UI可以写
struct Index{
  build() {
    Column(){
      Button('登录') //这里用Button来设置一个按钮组件
        .width('100%')
      //设置内边距
        .margin({
          bottom: 10
        })
      Button('注册')
        .width('100%')


    }
    .background('#DDDDDD')
    //设置一下外边距
    .padding(10)    //当padding内只有一个数字时，表示上下左右的间距均为这个数字
    //下面是为长宽高设置具体的边距
    .padding({
      top: 10,
      bottom: 40,
      left: 10,
      right: 10
    })

  }

}

border属性：为组件添加边框属性

我们就直接来看组件内部可以实现的属性吧，具体的属性样式就留给自己探索了

.border({
  width: 粗细,
  color: 颜色,
  style: 线条样式,
  radius: 圆角弧度
})

状态管理与事件

应用的运行时的状态是参数，当参数改变时，UI渲染刷新

状态变量：使用装饰器装饰，状态变量数据改变会引起UI的渲染刷新

首先我们要明确@Local的作用，@Local可以给变量打一个标签，当框架发现变量变化时，会自动重新执行build里用到变量的那一行，并且别的组件无法访问这个变量

这里我们就来做一个计数器来详细说明状态管理与事件

@Entry
@ComponentV2
struct Index {
  @Local num: number = 1

  build() {
    Row(){
      //减号按钮
      Text('-')
        .fontColor(Color.White)
        .fontSize(100)
        .border({
          color: '#FFFFFF',
          width: 10,


        })
        .margin({bottom: 10})
        .onClick(()=>{
          this.num--
        })
      //数字
      Text(this.num.toString())			//text内只能放字符串，用这种表达就可以将我们的数字放进去了
        .width('100%')
        .layoutWeight(1)
        .fontSize(100)
      Text('+')
        .fontColor(Color.White)
        .fontSize(100)
        .border({
          color: '#FFFFFF',
          width: 10

        })
        .margin({bottom: 10})
        .onClick(()=>{
          this.num++
        })
    }
    .background(Color.Gray)
    .width(200)
    .height(100)
    .position({ x: '20%', y: '40%' })




  }
}

上面我写的代码运行出来比较丑，这里可以给一个比较好看的代码

@Entry
@ComponentV2
struct Index {
  @Local num: number = 1;

  build() {
    Row() {
      // ① 减号按钮
      Text('−')
        .fontSize(36)               // 缩小字体，避免臃肿
        .fontColor('#E0E0E0')
        .width(44)                  // 固定正方形
        .aspectRatio(1)             // 保证宽高相等
        .textAlign(TextAlign.Center) // 文字居中
        .borderRadius(8)            // 圆角矩形
        .backgroundColor('#3A3A3A')
        .onClick(() => this.num--);

      // ② 中间数字
      Text(this.num.toString())
        .layoutWeight(1)            // 均分剩余空间
        .fontSize(36)
        .fontColor('#FFFFFF')
        .textAlign(TextAlign.Center);

      // ③ 加号按钮
      Text('+')
        .fontSize(36)
        .fontColor('#E0E0E0')
        .width(44)
        .aspectRatio(1)
        .textAlign(TextAlign.Center)
        .borderRadius(8)
        .backgroundColor('#3A3A3A')
        .onClick(() => this.num++);
    }
    .width(240)        // 整体稍宽，比例更协调
    .height(60)        // 高度降低，扁平化卡片
    .backgroundColor('#1C1C1C')
    .borderRadius(16)  // ④ 大圆角卡片
    .shadow({          // ⑤ 投影提升层次
      radius: 12,
      color: '#00000050',
      offsetX: 0,
      offsetY: 4
    })
    .position({ x: '50%', y: '50%' })
    .translate({ x: '-50%', y: '-50%' }); // ⑥ 绝对居中
  }
}

.onClick为点击事件用法是

.onClick(() => {
  需要执行的事件
})

这里还有一个小点就是

.textAlign(TextAlign.Center)
使得文字在小组件内居中

总结

以上就是我这两天陆续学习的ArkTs的基础部分，随后会陆续更新进阶部分，我们一起努力，一起进步呀！

感谢阅读

希望这篇文章对你有所帮助，欢迎继续浏览其他内容。

浏览更多文章