【鸿蒙开发】ArkTS语法以及基础组件详解教程

一 ArkTS

1.1 声明（变量类型必须写，初始化必须写，末尾必须加分号）

let 是可变，const 是不可变，该常量只能被赋值一次。

const hello: string = 'hello';
let num:number = 1
// 不允许使用val
var age:number = 1;
// 以下三个不能用
// let  num3:undefined
// let  num4:null
// let  num5:any

1.2 类型

1.2.1 string

可以使用单引号或者双引号表示，string拼接不能用+（可以用但不推荐），只能用反单引号（只有11以上才能用）

let a:string = 'Success';
let a1:string = "dddd"
let s3:string = `The result is ${a}`;

1.2.2 联合类型

union类型，即联合类型，是由多个类型组合成的引用类型。联合类型包含了变量可能的所有类型。

declare type ResourceStr = string | number;
基础类型
typeof str == 'string'
obj使用 instanceof
dog instanceof Dog

1.3 数组

let names: string[] = [‘Jack’, ‘Rose’]
遍历优先使用 forEach

//定义数组
let names: string[] = ['Jack', 'Rose']

names.forEach((value: string, index: number, array: string[]) => {
})
for (let i = 0; i < names.length; i++) {
  console.log(i + ':' + names[i])
}
//for of 迭代器，直接得到元素
for (let name of names) {
}
//禁止使用 for in 迭代器，
for (let i in names) {
  console.log(i + ':' + names[i])
}

1.2 方法

function 方法名：返回类型，返回类型void也最好写上，参数的类型也必须写

// 无参数
function add():void
// 有参数
function add(name:string):void{
    
}
// 可选参数，可以用undefined
function add(name:string，age?:number):void{
    // 虽然不推荐使用 undefined 或者是 null，但是可以判断是否初始化
    if(age == null)
    if(age == undefined)
    // 如果a没有给值，那么就用0 ，
    let ageTwo = age?age:0
    
}
//默认参数(默认参数不可以和可选参数共同使用)
function add(name:string，age:number = 0):void{

}


// api 11 不允许
let funB = function (a: number, b: number) {

}
// 可以变长参数
function add(...numbers: number[]){

    let result: number = 0;
    for (let i = 0; i < numbers.length; i++) {
      result = result + numbers[i]
    }
    // 循环
    numbers.forEach((value, index, arr) => {
      log(value + '--' + index + '---' + arr)
    })
    // for of 也可以用
    for (let n of numbers) {
      log(n + "")
    }
    return result;
  }

1.4 箭头函数

相当于java中的lamalda表达式

type Handler = (s: string, no: number) => string;
(event: ClickEvent) => void//这个就是箭头函数
onClick(event: (event: ClickEvent) => void): T;

1.5 条件语句

1.5.1 if else

条件表达式可以是任何类型。但是对于boolean以外的类型，会进行隐式类型转换：是否!=null

if (condition1) {
  // 语句1
} else if (condition2) {
  // 语句2
} else {
  // else语句
}
let s1 = 'Hello';
if (s1) {
  console.log(s1); // 打印“Hello”
}

1.5.2 switch

let s1 = 'Hello';
switch (s1) {
  case "label1": // 如果label1匹配，则执行
    break; // 可省略
  case "label2":
  case "label3": // 如果label2或label3匹配，则执行
    break; // 可省略
  default:
}

1.5 三元表达式

condition ? expression1 : expression2

let s: string = '1';
let newS: string = s ? s : ""
let newS2: string = 1>0 ? '大于0' : "小于0"

1.6 错误处理

throw 语句用于抛出异常或错误，try catch

getName() : string  {
  throw new Error('this error')
  return '';
}

try {
  // 可能发生异常的语句块
} catch (e) {
  // 异常处理
}

1.7 枚举

enum Color {
  // 一般也不会写 后面的值
  Red = 0xFF0000,
  Green = 0xFFFF00,
  Blue = 0xFFFFFF,
  // 禁止用不同的类型
  // Black = "0xFFFFFF",
}

1.8 类

类的属性不用let，方法不用加 function，
也是单继承，多实现，
修饰符号有public protect private，默认就是public。
类中使用属性和方法时，必须使用this.，否则找不到，访问父类属性和方法只能super.
静态方法静态属性，必须使用Class去拿，否则拿不到，
如果类或者接口只有属性，初始化的时候可以使用{}
继承属性不可以重写，方法不可以加(override) 直接写方法即可

class Person {
  name: string = '';
  age: number = '';
  private _address:string = '';
  
  constructor (name: string, age: number,address:string) {
    this.name = n;
    this.age = age;
    this._address = address;
  }
    // get 方法
    get address(): number {
      // 必须使用this，否则找不到
      return this._address;
    }
    // set 方法
    set address(x: number) {
      if (x < 0) {
        throw Error('Invalid age argument')
      }
      this._address = x
    }
    setName(){
    }
 }
 
 class Student extends Person{
     // 重写setName方法 不用override
     setName(){
     }
 }
 
 // 如果
 let person = {'小明'，18，‘北京’}

1.9 接口

接口属性，不能赋值

interface Animal{
  name:string;
  eat():void
}
class Dog implements Animal{
  name: string = "狗";

  eat() {
  }
}

2.0 泛型

类，接口，方法

// 类
class Stack<T>{
  push(t:T){
  }
  pop():T{
  }
}
// 函数
function last<T>(x: T[]): T {
  return x[x.length - 1];
}
// 默认泛型
class DefalulType {}
interface Interface <T = DefalulType> { }

// extends
interface Interface <T extends DefalulType> { }

2.1 导入导出

变量、函数、类 在别的模块使用都需要导出或者是导入

#aaaa.ets
export class Cat{
  name:string = '';
}
export function name() {
  
}

import { Cat , name } from '../entryability/aaaa';
let cat:Cat = {name:'小猫'}
name()

二 UI组件

2.1 Text

Text("大哥好大哥大哥大哥大哥大哥大哥")
  .fontSize(50)//
    // .fontWeight(FontWeight.Bold) 粗细
  .fontWeight(10)// 粗细
  .borderColor('red')//边框颜色
  .fontColor('red')// 文本颜色
  .borderWidth(2)// 边框宽度
    //需配合maxFontSize以及maxline或布局大小限制使用，单独设置不生效，对子组件不生效。自适应字号生效时，fontSize设置不生效。
  .maxFontSize(30)
  .minFontSize(10)
  .decoration({ type: TextDecorationType.LineThrough })// 控制线
  .maxLines(1)// 最大行数
  .textOverflow({ overflow: TextOverflow.Ellipsis }) // 截取样式
  .width('100%')

2.2 Button

// 字        // 按钮样式 默认胶囊样子，按下是否有按压态
Button('OK', {
  // type: ButtonType.Circle,// 圆形
  type: ButtonType.Normal,// 长方形
  // type: ButtonType.Capsule,// 长方形
  stateEffect: true// 是否有按压态，默认是
})
  .borderRadius(8)
  //.type()//也可以设置
  //.stateEffect()是否有按压态
  //.buttonStyle(ButtonStyleMode.NORMAL) 背景 api 11
  //.controlSize(ControlSize.NORMAL) 按钮大小，稍微影响点大小 api11
    // .labelStyle({'你好'}) 设置lable样式
  .backgroundColor(0xffff0000) 
  .width(90)
  .onClick(() => {
    console.log('ButtonType.Normal')
  })

2.3 Image

Image('https://pic4.zhimg.com/80/v2-5395048fe653a5f0fbd37b47b9713fd7_1440w.webp')
  .alt($r('app.media.startIcon'))// 占位符
  .objectFit(ImageFit.Fill)// 图片填充模式
  .interpolation(ImageInterpolation.High)// 图片不清晰的时候可以用这个，但是耗费时间和性能
  .onError((event) => { // 错误回调
    console.log(`load image fail ${event.componentWidth} ${event.componentHeight}`)
  })
  .onComplete((event: {
    width: number;// 图片大小
    height: number;// 图片大小
    componentWidth: number;//组件大小
    componentHeight: number;//组件大小
    loadingStatus: number// 返回的状态值为0时，表示图片数据加载成功。返回的状态值为1时，表示图片解码成功。
  }) => {
    // 所以这里会走两次，网络成功，解码成功
    console.log(`load image succed ${JSON.stringify(event)}`)
  })
  .width(100)
  .height(100)

TextInput 单行输入框 和 多行TextArea

text 就是输入框的文字，建议强绑定,和onChange

//placeholder 提示hint，text 就是输入框的文字，建议强绑定
TextInput({ placeholder: 'hint', text: this.text, controller: this.controller })
  .placeholderColor(Color.Red)// hint 的颜色
  .placeholderFont()// hint font
  .fontSize(20)// 字体大小
  .fontColor(Color.Black)// 字体颜色
    // .caretColor(Color.Green)// 光标颜色
  // .maxLength(10)// 最大长度
  .textAlign(TextAlign.Center)// 文字对其方式
  .inputFilter('[a-z]', (e) => {
    // 输入错误的是什么
    console.log(JSON.stringify(e))
  })// 可以输入的正则表达式 ，从API version 11开始，设置inputFilter会导致设置输入框类型(即type接口)附带的文本过滤效果失效。
  .onChange((value: string) => {
    //建议强绑定
    this.text = value
  })
  .onEditChange((isEditing: boolean)=>{
    // 是否正在输入
  })
  .width(200)
  .caretStyle({ width: 2, color: Color.Red })//api10 光标风格
  // .caretPosition(2)//api 10 设置光标位置
  // .showUnit(() => { //api10 需搭配showUnderline使用，当showUnderline为true时生效
  //
  // })
  .showError('错了')// api10 设置错误状态下提示的错误文本或者不显示错误状态。默认不显示错误状态。
  // .showUnderline(true)//api10 设置是否开启下划线模式，就不会有框框了
  //.passwordIcon()//api10 密码输入模式时，设置输入框末尾的图标。
  // .enableKeyboardOnFocus(false)
  .selectionMenuHidden(true) // api10 设置长按输入框或者右键输入框时，是否弹出文本选择菜单。默认是false，弹出
  // .maxLines(3)
  //.showCounter 显示个数
  // .customKeyboard()// api10 自定义键盘，如果设置了，点击就不会弹出系统键盘

2.4 Blank

填充父布局，如果父布局，不生效，但是可以使用minWidth控制

  Row() {
        Text('Bluetooth').fontSize(18)
        Blank('160')// 因为有父有width，所以会都是他的160
        Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
      }
      .width('100%')
      .backgroundColor(0xFFFFFF)
      .borderRadius(15)
      .padding({ left: 12 })

2.5 Checkbox

// 不用写在一起，可以放进去，也可以不放
CheckboxGroup({ group: "sex" })
  .onChange((event) => {
    console.log(`CheckboxGroup onChange ${JSON.stringify(event)}`)
  })
Checkbox({ name: 'male', group: "sex" })
  .select(false)
  .onChange((value)=>{
    console.log(`Checkbox onChange ${JSON.stringify(value)}`)
  })
  .selectedColor('#ff9999') // 选中的颜色 整体，
  .unselectedColor('#ff0000')// 未选中边框 api 10
  .shape(CheckBoxShape.ROUNDED_SQUARE)// 正方形或者圆形，api11
  .mark({ strokeColor: 'red', size: 20, strokeWidth: 20 })// 选中里面对号的样式 api 11
Checkbox({ name: 'female', group: "sex" })

2.6 Divider

分割线

Divider()
  .strokeWidth(8)//宽度，优先级低于heigh 或者 width
  .color(Color.Red)// 分割线颜色
  .vertical(false)// 是否是垂直，默认是水平
  .lineCap(LineCapStyle.Square) // 末尾是圆角还是直角,Square 感觉本身稍微超出去了点
  .margin({ left: 20, right: 20 })
  .borderWidth(2)

2.7 ImageAnimator

提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。
完成之后 需要设置为 stop，否则下次设置成running的时候不会再执行，onFinish有可能执行多次，比如变成stop，然后变成Initial，再变成stop

ImageAnimator()
  .images([
    {
      src: $r('app.media.img1')
    },
    {
      src: $r('app.media.img2')
    },
    {
      src: $r('app.media.img3')
    }
  ])
  .duration(1000)// 运行时间默认1s
    //默认为初始状态，用于控制播放状态。
    // 默认值：AnimationStatus.Initial
    // AnimationStatus.Running 开始播放
    // AnimationStatus.Paused 暂停
    // AnimationStatus.Stopped 停止
  .state(this.state)// 播放完毕停留在哪一帧
    // FillMode.Forwards 默认就是最后一帧 相当于停留在最后一帧
    // FillMode.None :相当于停留在第一帧
    // FillMode.Backwards 相当于停留在第一帧
    // .fillMode(FillMode.Both)
  .iterations(2)// 循环次数 -1 无限循环 默认是1次
  .width(40)
  .height(40)
  .margin({ top: 100 })
  .onStart(() => {
    console.info('Start')
  })
  .onPause(() => {
    console.info('Pause')
  })
  .onRepeat(() => {
    console.info('Repeat')
  })
  .onCancel(() => {
      // 当设置为 AnimationStatus.Initial 触发
    console.info('Cancel')
  })
  .onFinish(() => {
    console.info('Finish')
    // 完成之后 需要设置为 stop，否则下此设置成running的时候不会再执行
    this.state = AnimationStatus.Stopped
  })

2.8 DatePicker

日期选择器，回调并不是选中之后，而是一直再变，回调多次，并不是最后一次,api 10 加了很多定制样式

DatePicker({
  start: new Date('1970-1-1'),
  end: new Date('2100-1-1'),
  selected:new Date(Date.now())
})
  // 最上面和最下面的文本样式 api10
  .disappearTextStyle({color: Color.Gray, font: {size: '16', weight: FontWeight.Bold}})
  // 除了最上面和最下面和选中的，其他样式 api10
  .textStyle({color: '#ff182431', font: {size: '18', weight: FontWeight.Normal}})
  // 选中的样式 api10
  .selectedTextStyle({color: '#ff0000FF', font: {size: '26', weight: FontWeight.Regular}})
  // 日期是否显示农历。 默认不是
  .lunar(this.isLunar)
  // api 10
  .onDateChange((value: Date) => {
    this.selectedDate = value
    console.info('select current date is: ' + value.toString())
  })
  // api 8 ,10 已经废弃
  .onChange((result:DatePickerResult)=>{
    
  })

TextClock
将当前系统时间显示在设备上
typescript复制代码TextClock({controller: this.controller })
  .format('yyyy/MM/dd aa hh:mm:ss.SSS')
  .onDateChange((value: number) => {
    this.accumulateTime = value
  })
  .onDateChange((value:number)=>{
    console.log(`----${value}`)
  })
  .margin(20)
  .fontSize(30)

TextPicker

滚动选择器，三级联动

// range也可以是TextCascadePickerRangeContent 多级联动
TextPicker({ range: ["北京", "上海", "深圳", "广州", "天津","成都","杭州"], selected: 0})
  .onChange((value: string, index: number) => {
    console.info('选择的 value: ' + value + ', index: ' + index)
  })
  .defaultPickerItemHeight(50)//设置Picker各选择项的高度。
  .disappearTextStyle({ color: Color.Red, font: { size: 15, weight: FontWeight.Lighter } })//api 10
  .textStyle({ color: Color.Black, font: { size: 20, weight: FontWeight.Normal } })//api 10
  .selectedTextStyle({ color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } })//api 10
  .selectedIndex(2)//api 10 设置默认选中项在数组中的索引值，优先级高于options中的选中值。
  .canLoop(true) // api 10 是否可以循环

TextTimer

计时器

// isCountDown是否倒计时 ，默认false
// count 倒计时时间毫秒 10_000,就是倒计时10s
// controller 控制倒计时状态
TextTimer({ isCountDown: true, count: 30_000, controller: this.textTimerController })
  .format(this.format)
  .fontColor(Color.Black)
  .fontSize(50)
  .onTimer((utc: number, elapsedTime: number) => {
    console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime)
  })

TimePicker

时间选择器，可以设置12小时 24 小时制，显示到秒

TimePicker({
  // 默认当前时间
  selected: this.selectedTime,
  format:TimePickerFormat.HOUR_MINUTE_SECOND
})
  // 是否24小时展示，默认12小时
  .useMilitaryTime(this.isMilitaryTime)
  .onChange((value: TimePickerResult) => {
    if (value.hour) {
      this.selectedTime.setHours(value.hour, value.minute,value.second)
      console.info('select current date is: ' + JSON.stringify(value))
    }
  })
  // api 10
  .disappearTextStyle({ color: Color.Red, font: { size: 15, weight: FontWeight.Lighter } })
  .textStyle({ color: Color.Black, font: { size: 20, weight: FontWeight.Normal } })
  .selectedTextStyle({ color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } })
  .loop(false)// 是否循环，api11

LoadingProgress

用于显示加载动效的组件。暂时没有看到定制
enableLoading api10 ，无论显隐，都会占位。 跟 Visibility.Hidden（不占位） 不一样

LoadingProgress()
  // loading的颜色
  .color(Color.Black)
  // 是否展示，默认true api10 跟 Visibility.Visible
  .enableLoading(true)
  .width(50)
  .height(50)
  .borderColor(Color.Red)
  .borderWidth(2)
  .borderRadius(5)

Menu 和 MenuItem

从api 10。menu和menuItem 都有 fontColor 和 font属性

@Builder
MyMenu() {
  Menu() {
    MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
    MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项", endIcon: $r('app.media.img4') })
      .selected(!this.select)
    MenuItem({ content: "菜单选项2" ,startIcon:$r('app.media.img2')})
      // .selectIcon(true)// 选中icon ✅
      .selected(this.select)
      .onChange((selected) => {
        console.info("menuItem select" + selected);
      })
      // 颜色 api 10
      .contentFontColor(Color.Black)
      // 样式 api 10
      .contentFont({weight:FontWeight.Bold})
  }
  // 设置文本颜色 api 10
  .fontColor('#FFFF0000')
  // 设置文本样式 api 10
  .font({ size: 20, weight: 609 })

  // 设置圆角 api 10
  // .radius(50)
  // 设置宽度，最下是64 api 10
  // .width(200)
}

Progress

进度条组件，用于显示内容加载或操作处理等进度。只有圆形进度条（type: ProgressType.Ring）才有status: ProgressStatus.LOADING（api10 加载中，一只转圈圈）

Progress({ value: 10,// 当前进度
  // 形状 type: ProgressType.Ring//圆形
  // 形状 type: ProgressType.Linear//直角型
  // 其他太多了不看了
  type: ProgressType.Ring,
  total: 100 })// 总进度 默认100
  .width(200)
  // 圆形设置了 status， value就不管用了
  .style({ strokeWidth: 20, status: ProgressStatus.LOADING })

Toggle

组件提供勾选框样式、状态按钮样式及开关样式。android中 Switch，不能设置非选中的颜色

//type 可以设置 Switch button checkbox ，没啥意思，但是必须设置
Toggle({ type: ToggleType.Switch, isOn: false })
  // 选择之后的颜色
  .selectedColor('#007DFF')
  // 小圆圈的颜色
  .switchPointColor(Color.Red)
  .onChange((isOn: boolean) => {
    console.info('Component status:' + isOn)
  })

QRCode

用于显示单个二维码的组件。

QRCode('二维码内容')
.color(0xF7CE00)// 二维码颜色，默认是黑色
.width(140).height(140)
.contentOpacity(0.5)// 二维码的透明度，api11 ，感觉没啥用

Radio

只有radio ，没有RadioGroup
group 名字相同证明是同一组
radioStyle，api10，设置选中的颜色，选中里面白点的颜色，不选中的边框颜色

Radio({ value: 'Radio3', group: 'radioGroup' })
  .checked(false)
  .radioStyle({
      // 设置选中的颜色
    checkedBackgroundColor: Color.Pink,
     // 不选中的边框颜色
    uncheckedBorderColor: Color.Red, 
      // 选中里面白点的颜色
    indicatorColor: Color.Black
  })
  .height(20)
  .width(20)
  .onChange((isChecked: boolean) => {
    console.log('Radio3 status is ' + isChecked)
  })
Radio({ value: 'Radio1', group: 'radioGroup' })
  .checked(true)
  .height(20)
  .width(20)
  .onChange((isChecked: boolean) => {
    console.log('Radio1 status is ' + isChecked)
  })
Radio({ value: 'Radio2', group: 'radioGroup' })
  .checked(false)
  .height(20)
  .width(20)
  .onChange((isChecked: boolean) => {
    console.log('Radio2 status is ' + isChecked)
  })

Rating

提供在给定范围内选择评分的组件。

Rating({
  rating: this.rating,
  // 是否可以点击，默认false 可以点击
  indicator: false })
  .stars(5)// 总分数
  .stepSize(0.5)// step 默认0.5
  .starStyle({
    // common目录与pages同级,但是没出来效果
    backgroundUri: '../common/img3.png',
    foregroundUri: '../common/img1.png',
    secondaryUri: '../common/img2.png' })
  .onChange((value: number) => {
    // this.rating = value
  })

RichEditor

支持图文混排和文本交互式编辑的组件。

RichText

富文本组件，解析并显示HTML格式文本。 只是加载h5 片段的组件
有onStart 和 onComplete 回调

 RichText(this.data)
        .onStart(() => {
          console.info('RichText onStart');
        })
        .onComplete(() => {
          console.info('RichText onComplete');
        })

Select

android中Spinner
提供下拉选择菜单 ，可以让用户在多个选项之间选择

Slider

android中 Slider
滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

写在最后

有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。

获取完整版高清学习资料，请点击→鸿蒙全栈开发学习资料（安全链接，请放心点击）

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了

最新鸿蒙全栈开发学习线路

鸿蒙HarmonyOS开发教学视频

大厂面试真题

鸿蒙OpenHarmony源码剖析

这份资料能帮住各位小伙伴理清自己的学习思路，更加快捷有效的掌握鸿蒙开发的各种知识。有需要的小伙伴自行领取，，先到先得~无套路领取！！

获取这份完整版高清学习资料，请点击→鸿蒙全栈开发学习资料（安全链接，请放心点击）