harmonyOS

ATKTS

# 两种开发范式

基于ArkTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）

# ArkTS在ts的基础上主要扩展了三种能力

基本语法：ArkTS定义了声明式UI描述，自定义组件和动态扩展UI元素的能力，再配合ArkUI开发框架的系统组件以及相关的事件方法，属性方法等共同构成了UI开发的主题。
状态管理：ArkTS 提供了多维的状态管理机制。在UI开发框架中，与UI相关的数据可以在组件内使用，也可以在不同组件层级间传递，比如：父子组件之间，爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。从数据传递形式来看，分为只读单项传递和可变更双向传递。
渲染控制：ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态的UI内容。渲染内容可以从数据源的迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。

# 基本语法

ArkTS 声明式开发范式：

装饰器：用来装饰类、结构体、方法和变量、赋予其特殊含义。比如@Entry、@Component、@State 都是装饰器。@Component是自定义组件，@Entry是入口组件，@State是状态变量，此状态变化会引起ui变更
自定义组件：可复用的ui组件，可组合其他组件
UI描述：声明式的方式来描述UI的结构，如上述 build() 方法内部的代码块。
内置组件：框架中默认内置的基础和布局组件。
事件方法：用于添加组件对事件的响应逻辑，统一通过事件方法来进行设置。比如onClick
属性方法：用于组件属性的配置，统一通过属性方法进行设置，如fontSize()、width()、height()、color() 等，可通过链式调用的方式设置多项属性。
build方法内可以容纳内置组件和其他自定义组件。

扩展语法：

@Builder/@BuilderParam: 特殊的封装UI描述的方法，细粒度的封装和复用UI描述。
@Extend/@Styles: 扩展内置组件和封装属性样式，更灵活组合内置组件。
stateStyles：多态样式，可以依据组件的内部状态的不同，设置不同样式。

# 基础组件-ArkUI

# image 组件

加载网络图片，注意需要开启网络权限，预览不限制，真机或者模拟器运行需要申请网络权限需要在module.json5 配置requestPermissions

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

加载本地图片 $r

import router from '@ohos.router'
@Component
@Entry
struct Index {
  build() {
    Column(){
      Image($r('app.media.app_icon'))
      
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f5f5')
  }
}

提示

鸿蒙开发遵循一个原则：一个页面或者自己封装的组件必须有且只有一个根组件

# 堆叠组件

把一个组件堆叠到另外一个组件上的效果，称为层叠效果或者堆叠效果。使用语法：

Stack() {
  item1()
  item2()
  item3()
}

默认情况下，最后的组件越叠在最上面, 子组件都在Stack容器内居中堆叠: Alignment.Center,如果需要指定谁在最上层，可以通过zIndex ，越大越在上面

# 自定义组件：

语法：

@Component
struct MyComponent {
  build() {
  
  }
}

基本结构：

struct：自定义组件基于struct实现，struct + 自定义组件名 + {} 的组合构成自定义组件，不能有继承关系。
@Component：@Component 装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述ui，一个struct只能被一个@Component装饰。
build()函数：build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数

build函数注意事项

不允许声明本地变量

build() {
  // 反例：不允许声明本地变量
  let a: number = 1; // error
}

不允许在UI描述里直接使用console.info，但允许在方法或者函数里使用

build() {
  console.log('test') // error
}

不允许创建本地的作用域

build() {
  // 反例：不允许本地作用域
  {
    ...
  }
}

不允许调用没有用@Builder装饰的方法，允许系统组件的参数是TS方法的返回值。

@Component
struct ParentComponent {
  doSomeCalculations() {
  }

  calcTextValue(): string {
    return 'Hello World';
  }

  @Builder doSomeRender() {
    Text(`Hello World`)
  }

  build() {
    Column() {
      // 反例：不能调用没有用@Builder装饰的方法
      this.doSomeCalculations();
      // 正例：可以调用
      this.doSomeRender();
      // 正例：参数可以为调用TS方法的返回值
      Text(this.calcTextValue())
    }
  }
}

不允许switch语法，如果需要使用条件判断，请使用if。

build() {
  Column() {
    // 反例：不允许使用switch语法
    switch (expression) {
      case 1:
        Text('...')
        break;
      case 2:
        Image('...')
        break;
      default:
        Text('...')
        break;
    }
  }
}

不允许使用表达式

build() {
  Column() {
    // 反例：不允许使用表达式
    (this.aVar > 10) ? Text('...') : Image('...')
  }
}

← 基础知识 UIAbility→