四、HarmonyOS 基础语法

1. 变量

ets 是 ts 语法发扩展

1.1 组件外部声明变量

/**
 * author:创客未来
 * copyright:com.ckFuture.hrb
 */

//ets 是 ts 语法的扩展
//声明变量并赋值 ：初始化
let pome: string='我是字符串'

//声明变量，未赋值
let age: number
age = 18


@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

1.2 组件内部声明变量

注意：在组件内部声明变量是不需要使用 let 。

@Entry
@Component
struct First {
  //组件内部声明变量不需要 let 
  pome:string = '我是内部变量'
  build() {
      Column() {
//使用内部组件的变量需要使用 this.

          Text(this.pome)
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
      }
      .width('100%').height('100%')
  }
}

2. 数据类型

2.1 数值类型

// 数值
let num1:number = -3.1415
let num2:number = 0b10100
let num3:number = 0o107
let num4:number = 0x012abcf
let num5:number = 10+5

2.2 字符串类型

// 字符串
let str1:string = 'HarmonyOS' + 'ArkTS'
let str2:string = "HarmonyOS"
let str3:string = `圆周率：${num1}`

2.3 布尔类型

// 布尔
let stateOn:boolean = true
let stateOff:boolean = false

2.4 数组类型 

// 数组 Array
let names1:string[] = ['小明','小红']
let names2:Array<string> = ['小明','小红']

2.5 联合类型

// 联合类型(Union Types) 表示取值可以为多种类型中的一种
let lianHe1:string|number|boolean
lianHe1 = 'seven'
lianHe1 = 7
lianHe1 = true

2.6 枚举类型

// 枚举 enum类型是对JS标准数据类型的一个补充，使用枚举类型可以为一组数值赋予友好的名字。
enum Color {Red,Green,Blue}
let c:Color = Color.Green

2.7 元组类型

// 元组 允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
//    比如你可以定义一对值分别为string和number类型的元组
let x:[string,number]
x = ['hello',10]

2.8 Unknown类型

// Unknown 有些时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。
//        这种情况下，我们不希望类型检查这些值进行检查而是直接让它通过编译阶段的
//        检查。那么我们可以使用unknown类型来标记这些变量(同 any)
let notSure:unknown = 4;
notSure = 'maybe a string instead';
notSure = false;

2.9 void 类型

// void 当一个函数没有返回值时，你通常会见到其返回值类型是void
function test(params):void {
  console.log('This is function is void')
}

2.10 Null 和 Undefined 类型

// Null 和 Undefined
// TS里，Undefined和Null两者各自有自己的类型分别叫做undefined和null
let u:undefined = undefined;
let n:null = null;

// 数值
let num1:number = -3.1415
let num2:number = 0b10100
let num3:number = 0o107
let num4:number = 0x012abcf
let num5:number = 10+5

// 字符串
let str1:string = 'HarmonyOS' + 'ArkTS'
let str2:string = "HarmonyOS"
let str3:string = `圆周率：${num1}`

// 布尔
let stateOn:boolean = true
let stateOff:boolean = false

// 数组 Array
let names1:string[] = ['小明','小红']
let names2:Array<string> = ['小明','小红']

// 联合类型(Union Types) 表示取值可以为多种类型中的一种
let lianHe1:string|number|boolean
lianHe1 = 'seven'
lianHe1 = 7
lianHe1 = true

// 枚举 enum类型是对JS标准数据类型的一个补充，使用枚举类型可以为一组数值赋予友好的名字。
enum Color {Red,Green,Blue}
let c:Color = Color.Green

// 元组 允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
//    比如你可以定义一对值分别为string和number类型的元组
let x:[string,number]
x = ['hello',10]

// Unknown 有些时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。
//        这种情况下，我们不希望类型检查这些值进行检查而是直接让它通过编译阶段的
//        检查。那么我们可以使用unknown类型来标记这些变量(同 any)
let notSure:unknown = 4;
notSure = 'maybe a string instead';
notSure = false;

// void 当一个函数没有返回值时，你通常会见到其返回值类型是void
function test(params):void {
  console.log('This is function is void')
}

// Null 和 Undefined
// TS里，Undefined和Null两者各自有自己的类型分别叫做undefined和null
let u:undefined = undefined;
let n:null = null;



import router from '@ohos.router'
@Entry
@Component
struct First {
  build() {
      Column() {
        //条件语句控制显示
        if(stateOn){
          Text(names1[0])
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }else{
          Text(names1[1])
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
      }
      .width('100%').height('100%')
  }
}

 3.组件属性方法、事件方法

ArkTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。

3.1 创建组件

根据组件构造方法的不同，创建组件包含有参数和无参数两种方式。创建组件时不需要new运算符。

 无参数组件

如果组件的接口定义没有包含必选构造函数，则组件后面的“（）”不需要配置任何内容。例如：Divider组件不包含构造函数。

 Column() {
        Text('文本')
        Divider()
        Button('click')

      }

有参数组件

如果组件的接口定义包含构造函数，则在组件后面的“（）”配置相应的参数。

Image组件必选参数src。

Text组件必选参数content。

查看官方文档查看是否有参数组件和无参数组件（https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-basic-components-button-0000001427584848-V3）

 Image组件的使用必须申请网络权限。

 "requestPermissions":[
      {
        "name" : "ohos.permission.INTERNET"
      }
    ]

 Image组件加载media资源文件

资源文件在resources下的media中

 

 //加载资源文件
        Image($r('app.media.icon'))

 

 Image组件加载rawfile资源文件

 //加载rawfile资源文件
        Image($rawfile('icon1.png'))

 

 

3.2 属性方法

 通过点属性来设置样式的方法，这种编程方式叫做链式编程。

3.3 事件方法

 这里注意加上@State 修饰才能在点击后重新渲染 build。否则不会重新渲染！

使用组件的成员函数配置组件的事件方法

/**
 * author:创客未来
 * copyright:com.ckFuture.hrb
 */
@Entry
@Component
struct Demo1 {
@State num:number = 4
  myClickHandler():void{
    this.num+=1;
  }
  build() {
    Row() {
      Column() {
        Text('声明式UI:'+this.num).fontSize(30).fontColor(Color.Green)
        // Divider()
        Button('click')
          .onClick(this.myClickHandler.bind(this))
        //加载网络图片
        //Image('https://wx1.sinaimg.cn/orj480/008dTIjQly1hkc529liycj30u01e0ach.jpg').width('100%').height('100%')
        //加载media资源文件
        // Image($r('app.media.icon'))
        //   .width('400')
        //加载rawfile资源文件
        // Image($rawfile('icon1.png'))
      }
      .width('100%')
    }
    .height('100%')
  }
}

 

3.4 子组件