ArkTS概述

• ArkTS是HarmonyOS主力应用开发语言
• 工程目录
  • ..\entry\src\main\ets\pages\：用于存放界面相关的文件
  • ..\entry\src\main\resources：用于存放资源相关的文件
  • ..\entry\src\main\module.json5：用于存放应用模块的核心配置的文件

• 默认Index.ets文件代码

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

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
    }
    .height('100%')
    .width('100%')
  }
}

• @开头表示装饰器
  • 用于约定后面代码对应的功能
  • @Entry：程序入口
  • @Component：组件（所有能看到的界面）
  • @State：数据驱动视图自动更新
• 开发遵循：先整体，再布局。先布局，再内容，后美化的规则

基本数据类型

• 文字信息 -> 字符串类型String

• 数字信息 -> 数字类型number
• 状态信息 -> 布尔类型boolean

变量定义

• 定义方法：let 变量名:数据类型 = 值
  • 控制台输出测试：console.log(变量名)

// string 字符串类型
let title: string = "创意橘子花瓶"
console.log("商品的标题是:",title)

// number 数字类型
let count: number = 1;
console.log("购买数量是",count)

// boolean 布尔类型
let isSelect: boolean = true
console.log("订单选中了吗？",isSelect)

数组

• 一次性保存多个同类型数据
  • 数组：[数据1, 数据2, ......]
  • 定义方法：let 数组名: 类型[] = [数据1, 数据2, 数据3, ......]
  • 获取方法：数组名[索引]

  let titles: string[] = ['创意橘子花瓶', '创意橘子水瓶', '创意橘子水盆'];
  console.log('数组是',titles);
  console.log('产品1是',titles[0]);
  console.log('产品3是',titles[2]);
  

对象

• 一次性保存多个不同数据类型的数据
  • 定义方法：

    let 对象名: 接口名 = {
        变量1: 数据,
        变量2: 数据,
        ...
    }
    interface 接口名 {
        变量1: 数据类型,
        变量2: 数据类型,
        ...
    }
    

    • 由于保存的是多个不同数据类型的数据，因此需要先定义接口约束对象的数据类型

    interface Goods {
      title: string,
      price: number
    }
    
    let vase: Goods = {
      title: "创意橘子花瓶",
      price: 12.99
    }
    

    • 对象存储数据的数据类型和接口的数据类型一一对应
  • 调用方法：对象名.变量名

    console.log('商品标题为',vase.title)
    console.log('商品价格为',vase.price)
    

函数

• 使用函数封装代码，提升代码复用性
  • 定义方法：

    function 函数名 (参数1: 类型, 参数2: 类型...){
        函数逻辑
    }
    

    • 调用方法：函数名(参数1, 参数2, ...)

    function calc (r: number) {
      // console.log("半径是：",r)
      return 2 * 3.14 * r;
    }
    let c1: number = calc(10)
    console.log('圆的周长是',c1)
    

箭头函数

• 与function类似，但写法不同
  • 定义方法：

    let 函数名 = (num1: number, num2: number) => {
        return num1 + num2
    }
    

  • 调用方法：函数名(参数)

分支语句

• 根据逻辑条件结果，执行不同语句
  • if语句：

    if (条件){
        //条件1通过执行的代码
    }else if(条件){
        //条件2通过执行的代码
    }else{
        //条件都不通过执行的代码
    }
    

  • 条件表达式
    • 条件 ? 条件通过执行的结果 : 条件不通过执行的结果

    let result: number = num1 > num2 ? num1 : num2
    

条件渲染

• 根据逻辑条件结果，渲染不同的UI内容

if (条件){
    //组件
}else if(条件){
    //组件
}else{
    //组件
}

循环渲染

• 依据数组数据，重复渲染UI内容

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

  • 示例

    import sendableColorSpaceManager from '@ohos.graphics.sendableColorSpaceManager'
    let names: string[] = ["大壮", "中状", "小庄"]
    @Entry
    @Component
    struct Index {
      build() {
          Column(){
            ForEach(names, (item: string, index: number) => {
              Text(item + index)
            })
          }
      }
      }
    

自定义构建函数

• 使用@Builder装饰的函数，从称为自定义构建函数
  • 定义方法：

    @Builder
    构建函数名(参数列表){
        //要复用的组件结构
    }
    

  • 调用方法：this.构建函数名(参数列表)

状态管理

• 应用运行时的状态是参数，当参数改变时，UI渲染刷新
• 状态变量：使用装饰器修饰，状态变量数据改变会引起UI的渲染刷新
• 状态组件：@ComponentV2

  @ComponentV2
  struct Index {
      @Local num: number = 1;//状态
  }
  

  • 示例

    import sendableColorSpaceManager from '@ohos.graphics.sendableColorSpaceManager'
    let names: string[] = ["大壮", "中状", "小庄"]
    @Entry
    @ComponentV2
    struct Index {
      @Local num: number = 1;
      build() {
          Column(){
            Row(){
              Text('-')
                .width(40)
                .height(40)
                .border({width:1, color:"#999",radius:{topLeft: 3,bottomLeft: 3}})
                .textAlign(TextAlign.Center)
                .onClick(() => {
                  if(this.num > 1){
                    this.num--
                  }
                })
              Text(this.num.toString())
                .width(40)
                .height(40)
                .border({width:{top:1,bottom:1}, color:"#999"})
                .fontSize(18)
                .textAlign(TextAlign.Center)
              Text('+')
                .width(40)
                .height(40)
                .border({width:1, color:"#999",radius:{topLeft: 3,bottomLeft: 3}})
                .textAlign(TextAlign.Center)
                .onClick(() => {
                  this.num++
                })
            }
          }
      }
    }