ArkTS 学习(为了挣钱)

1,109 阅读1分钟

image.png

ArkTS 语言

  • ArkTS 是华为自研的开发语言。
  • 它在TypeScript(简称TS)的基础上,匹配ArkUI框架,扩展了声明式UI、状态管理等相应的能力,让开发者以更简洁、更自然的方式开发跨端应用。

学习ArkTs

  • 数据类型参见TypeScript
  • 编写模式参考JavaScript
  • 真好(huawei shi dong yingxiao de)

ArkTs 代码

  • 页面
@Entry //参考TS装饰器语法
@Component //参考TS装饰器语法
struct Index { // class Index
  // 不使用@State装饰器,UI不会重新渲染
  @State message: string = 'Hello World'
  
  
  private a:string = 'fuck frontend'

  @State aValue:string = '1'
  @State bValue:string = '23'
  @State objValue:ObjectLinkDemoClass = {num:1,txt:'ObjectLinkDemoClass'}
  // 类似render
  build() {
    // 横向布局
    Row() {
      // 纵向布局
      Column() {
        // 文本控件
        Text(this.message)
          .fontSize(50) //样式代码,加入代码很长,找死你
          .fontWeight(FontWeight.Bold)
         
         Text(this.aValue).fontColor('#0099ff');

        // propsLinksValue: $aValue,扯淡的使用方式,和 const that = this,有异曲同工之妙
        SomeCom({ propsLinksValue: $aValue, propsPropValue: this.bValue, propsObjectLinkValue: this.objValue})
      
      }
      .width('100%')
    }
    .height('100%')
  }
}
  • 组件

@Observed
class ObjectLinkDemoClass {
  public num:number;
  public txt:string;
}

@Component
struct SomeCom {
  // 本组件状态,只能在本组件使用
  @State value:string = 'SomeComStates'
  // 父子同步状态,修改双方都修改
  // Object、class、string、number、boolean、enum类型
  @Link propsLinksValue:string; // v-model
  // 父子单向组件状态 父传子
  // string、number、boolean、enum类型
  @Prop propsPropValue: string; // :props-prop-value
  // 专用于对象
  // 不能直接给对象赋值,只能修改属性
  @ObjectLink propsObjectLinkValue:ObjectLinkDemoClass;

  build() {
    Column(){
      Text(this.value);
      Text(this.propsLinksValue);
      Text(this.propsPropValue);
      Text(this.propsObjectLinkValue.txt);

      Button({type:ButtonType.Capsule}){
        Text('子组件修改@Link传参').fontColor('#ffffff')
      }.onClick(() => {
        this.propsLinksValue = 'fuck'
      }).padding(10).margin(10)
    }

  }
}