一、ArkTS

1、语言介绍

        ArkTS 在保持 TypeScript（简称 TS）基本语法风格的基础上，进一步通过规范强化静态检查和分析，使得在程序运行之前的开发期能检测更多错误，并提升运行时性能。针对 JavaScript（简称JS）/TS 并发能力支持有限的问题，ArkTS 对并发编程 API 和能力进行了增强。ArkTS 支持与 JS/TS 高效互操作，兼容 JS/TS 生态。

语言特点：

（1）不支持在运行时更改对象布局

（2）对象字面量须标注类型

（3）不支持structural typing

2、环境安装

官网：最新版本 - 下载中心 - 华为开发者联盟

3、数据类型

遍历声明：let，常量声明：const。

（1）number、boolean、string、void

（2）array、enum、Union、Aliases

4、运算符与表达式

5、语句

6、函数：function

7、类和对象、集成和重写、多态和静态成员

8、接口

9、泛型

10、空安全

二、ArkUI

1、项目结构分析

  • AppScope > app.json5：应用的全局配置信息。
  • entry：应用/元服务模块，编译构建生成一个HAP。
    • src > main > ets：用于存放ArkTS源码。
    • src > main > ets > entryability：应用/元服务的入口。
    • src > main > ets > pages：应用/元服务包含的页面。
    • src > main > resources：用于存放应用/元服务模块所用到的资源文件，如图形、多媒体、字符串、布局文件等。
    • src > main > module.json5：Stage模型模块配置文件，主要包含HAP的配置信息、应用在具体设备上的配置信息以及应用的全局配置信息。具体请参考module.json5配置文件。
    • build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。
    • hvigorfile.ts：模块级编译构建任务脚本。
    • oh-package.json5：描述三方包的包名、版本、入口文件（类型声明文件）和依赖项等信息。
  • oh_modules：用于存放三方库依赖信息，包含应用/元服务所依赖的第三方库文件。
  • build-profile.json5：应用级配置信息，包括签名、产品配置等。
  • hvigorfile.ts：应用级编译构建任务脚本。
  • oh-package.json5：描述全局配置，如：依赖覆盖（overrides）、依赖关系重写（overrideDependencyMap）和参数化配置（parameterFile）等。

2、UI组件

（1）图标icon（iconfont-阿里巴巴矢量图标库）

（2）常用组件

  1. Image：图片组件。Image($r(app.media.文件名))
  2. Text：静态文本框。
  3. TextInput：文本输入框。常用属性：placeHolder（文本框的输入提示）、type（输入类型）
  4. Button：按钮
  5. Swiper：轮播图。常用属性：SwiperController（轮播控制器）、loop（循环标志）、autoPlay（是否自动播放）、interval（播放间隔）、indicatorStyle（轮播样式）。
  6. Radio：单选按钮
  7. CheckBox：复选框
  8. TextPicker：文本选择框
  9. DatePicker：日期选择器
  10. Select：下拉框
  11. Video：媒体播放
  12. Divider：分割线

（3）通用属性

（4）示例

build() {
    Row() {
      Column() {
        Text("Hello World")
      }
      .justifyContent(FlexAlign.Start)  // 主轴对齐方式
      .alignItems(HorizontalAlign.Start)  // 交叉轴对齐方式
      .padding(20)
      Row() {
        Image($r('app.media.ic_public_arrow_app'))
          .width(50)
        Image($r('app.media.ic_public_arrow_right'))
          .width(50)
      }
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .height('50')
    .width('100%')
    .border({ color:"#cccccc",width:2 })
    .backgroundColor('#eeeeee')
  }
@Entry
@Component
struct CompoDemo2 {
  swiper: SwiperController = new SwiperController()

  build() {
    Column() {
      Swiper( this.swiper ) {
        Text('0')
          .width('80%')
          .height('30%')
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text('1')
          .width('80%')
          .height('30%')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text('2')
          .width('80%')
          .height('30%')
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .loop(true)
      Row() {
        Button('<').onClick(()=>{
          this.swiper.showPrevious()
        })
        Button('>').onClick(()=>{
          this.swiper.showNext()
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}
@Entry
@Component
struct RegPage {
  @State message: string = '用户注册';
  addList: SelectOption[] = [{"value": "北京"},{"value": "上海"},{"value": "深圳"},{"value": "广州"}]

  build() {
    Column({ space: 15 }) {
      Text(this.message)
        .id('RegPageHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Divider().width('100%').vertical(false).height(5).color(Color.Green)
      Row({ space: 20 }) {
        Text("性别：").fontSize(10).fontWeight(FontWeight.Medium)
        Radio({ value:'male', group:'sexGroup' }).checked(true).width(20).height(20)
        Text("男")
        Radio({ value:'female', group:'sexGroup' }).checked(false)
        Text("女")
      }.width('100%').padding({left:10})
      Row({ space: 20 }) {
        Text("地址：").fontSize(10).fontWeight(FontWeight.Medium)
        Select(this.addList)
          .width('80%')
          .selected(2)
          .value('请选择地址')
          .fontColor('#182431')
          .onSelect( (index, value) => {
            console.log("ken", index, value)
          })
      }.width('100%').padding({left:10})
      Row({ space: 15 }) {
        Text("爱好：").fontSize(10).fontWeight(FontWeight.Medium)
        Checkbox({name:'cnkSing', group: 'loveGroup'})
        Text("唱歌").fontSize(14).fontColor('#182431').fontWeight(500)
        Checkbox({name:'cnkSing', group: 'loveGroup'})
        Text("跳舞").fontSize(14).fontColor('#182431').fontWeight(500)
        Checkbox({name:'cnkSing', group: 'loveGroup'})
        Text("学习").fontSize(14).fontColor('#182431').fontWeight(500)
      }.width('100%').padding({left:10})
      Row({ space: 20 }) {
        Text("生日：").fontSize(10).fontWeight(FontWeight.Medium)
        DatePicker({ start: new Date() })
          .height(60)
          .width('60%')
          .onDateChange((value) => {
          console.log('ken', value)
      })}.width('100%').padding({left:10})
      Button("注册").width('100%')
    }
    .height('100%')
    .width('100%')
    .padding(20)
  }
}

3、组件布局

（1）线性布局（Row/Column）

build() {
    Column({ space:15 }) {
      Image($r('app.media.login'))
        .width(150)
      TextInput({placeholder: "请输入账号："})
      TextInput({placeholder: "请输入密码："})
        .type(InputType.Password)
      Button("登录")
        .width("100%")
      Row() {
        Text("忘记密码？")
        Blank(50)
        Text("注册")
      }
    }
    .height('100%')
    .width('100%')
    .padding(20)
  }

（2）层叠布局（stack）

import { router } from '@kit.ArkUI';

@Entry
@Component
struct AdPage {
  @State time: number = 5  //定时器执行时间
  timer: number = -1  //定时器句柄
  // 页面显示之前执行
  aboutToAppear(): void {
    this.timer = setInterval(() => {
      if(this.time <= 0){
        clearInterval(this.timer)
        // 跳转到登录界面
        router.replaceUrl({
          url: "pages/LoginPage"
        })
      }
      this.time--
    }, 1000)
  }
  aboutToDisappear(): void {
    clearInterval(this.timer)// 清除定时器
  }
  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      Image($r('app.media.ad'))
      Button('跳过${this.time}')
        .background("#ccc")
        .fontColor("$fff")
    }
    .height('100%')
    .width('100%')
  }
}

（3）弹性布局（Flex）

build() {
    Flex({
      direction: FlexDirection.Row,
      wrap: FlexWrap.Wrap
    }) {
      Text("C++").backgroundColor("#ccc").margin(10).padding(15)
      Text("Java").backgroundColor("#ccc").margin(10).padding(15)
      Text("Python").backgroundColor("#ccc").margin(10).padding(15)
      Text("大数据").backgroundColor("#ccc").margin(10).padding(15)
      Text("Hadoop").backgroundColor("#ccc").margin(10).padding(15)
      Text("人工智能").backgroundColor("#ccc").margin(10).padding(15)
    }
    .height('100%')
    .width('100%')
  }

# harmonyos # 华为
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

以递归的方式快速创建文件和目录开源项目AdvancedNewFile命令行工具适配开源鸿蒙PC实战指南

avatar 人工智能6S服务平台
cover

0基础入门昇腾CANN课程：30分钟写出首个高性能算子（附可直接运行代码）

avatar 人工智能6S服务平台
cover

为什么你的播放器总“差半拍”？[特殊字符][特殊字符]——鸿蒙OS多媒体栈到底怎么把一切对上节拍的？

avatar 人工智能6S服务平台