鸿蒙开发【ArkTS基础教程】

---

鸿蒙开发【ArkTS基础教程】

本文章涉及知识点
ArkTS语言基础

• 基本语法：了解ArkTS的基本语法，包括变量声明、函数定义、条件语句、循环语句等。
• 类和对象：掌握ArkTS中类和对象的基本概念，以及类的继承、多态等特性。
• 状态管理：学习如何在ArkTS中进行状态管理，确保应用在不同状态之间正确切换。
• 数据类型与运算符：熟悉ArkTS的基本数据类型（如数字、字符串、布尔值等）和运算符（如算术运算符、比较运算符等）。
  ArkUI框架简介
• 组件：ArkUI提供了丰富的UI组件，如图片显示组件（Image）、文本显示组件（Text）、文本输入框（TextInput）、按钮组件（Button）等。开发者可以通过组合这些组件来构建用户界面。
• 布局：了解ArkUI的布局机制，包括Row容器（从左往右排列）和Column容器（从上往下排列）等布局方式，以及如何使用间距（Space）等属性来调整组件之间的位置关系。
• 状态管理：学习如何在ArkTS中进行状态管理，确保应用在不同状态之间正确切换。
• 画与交互：学习如何在ArkUI中实现动画效果，以及如何处理用户的交互事件（如点击、滑动等）。

一、ArkTS

鸿蒙开发者学堂
HarmonyOS=>一探究竟=>DevEco Studio下载
地址
DevEco Studio

1、ArkTS语言的介绍

ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript(简称TS)基本语法风格的基础上，进一步通过规范强化静态检查和分析，使得在程序运行之前的开发期能检测更多错误，提升代码健壮性，并实现更好的运行性能。同时，提供了声明式UI范式、状态管理支持等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。

2、ArkTS语言开发环境搭建

2.1、下载DevEco Studio

DevEco Studio

2.2、新建项目

点击next

点击finish，这样我们就建立了一个鸿蒙工程项目

这样我们就可以进行开发了

在common下新建一个ArkTs文件

2.3、项目预览

模拟器的话需要提交一个申请

也可以使用预览器进行预览

3、ArkTS语言与TS的主要区别

1. ArkTS不支持在运行时更改对象布局，但TS是支持的
2. 对象字面量必须标注类型

//ArkTS
interface  p_type{
  x:number,
  y:number
}

const p:p_type={
  x:0,
  y:1
}


//TS
const p={
  x:0,
  y:0
}

3. 不支持structural typing,不支持鸭子类型

//ts支持以下写法，但ArkTS不支持

interface  Dog{
  name:string,
  age:number
}

function  getName(obj:Dog){
  return obj.name
}
const dog={name:'taidi',age:4,gender:'F'}

getName(dog)

通过以上几个小demo，我们可以看出ArkTS对代码检测更严格，从来性能比较好，具体了解大家可以参考官方文档

4、ArkTS变量与数据类型

4.1、ArkTS数据类型

4.1.1、 Number

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

  build() {
    Column(){
      Button('数字类型').onClick(()=>{
        let n1:number=10
        let n2:number=10.65
        let n3=n1+n2
        console.log('n3',n3)

        //进制表示
      //   二进制、八进制、十六进制
        let b2:number=0b1111//二进制进制 15
        let b8:number=0o12//八进制 10
        let b16:number=0x17//十六进制 23
        console.log('123',b2,b8,b16)
      })
    }
  }
}

控制台输出

4.1.2、 Boolean

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

  build() {
    Column(){
      Button('布尔类型').onClick(()=>{
        let bFlag1:boolean=true
        let bFlag2:boolean=false
        console.log('boolean',bFlag1,bFlag2,)
      })
    }
  }
}

4.1.3、String

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

  build() {
    Column(){
      Button('字符串类型').onClick(()=>{
      //   字符串类型，字符串的数据
        let s1:string='hello,this is string'
        let s2:string="hello,this is string"
        let n:number=100
        let s3:string=`hello,this price is ${n} \t s1`
        console.log('string',s1,s2,s3)
      })
    }
  }
}

4.1.4、Array

数组类型

import { media } from '@kit.MediaKit';

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

  build() {
    Column(){
      Button('数组类型').onClick(()=>{
        // 数组定义
        let arr:string[]=['1','2','3','4']
        let arr1:number[]=new Array(10)

        // 下标
        console.log('arr',arr[3])

       // 支持动态扩容
        arr1[100]=100
        console.log('arr1',arr1.length)
      })
    }
  }
}

4.1.5、Enum

枚举类型:是一种特殊的数据类型，约定变量只能在一组数据范围内选择值。

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

  build() {
    Column(){
      Button('枚举类型').onClick(()=>{
      //   使用枚举 枚举类型及其取值
        let you:Man=Man.GoodMan
        console.log('enun',you==0)
        console.log('enun',you===0)
      })
    }
  }
}

// 定义枚举
enum Man{
  GoodMan,
  BadMan,
  SexMan
}

4.1.6、Object

4.1.7、 Union

联合类型:是一种灵活的数据类型，它修饰的变量可以存储不同类型的数据。
语法:let 变量：类型1|类型2|类型3=值
基于联合类型，变量可存不同类型数据

import { media } from '@kit.MediaKit';

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

  build() {
    Column(){
      Button('联合类型').onClick(()=>{
        let avPlayer:media.AVPlayer | null=null
        let score:string|number|null='A'
        score=80
        score=null
        // avPlayer?.play()
      })
    }
  }
}

• Aliases

5、ArkTS运算符

5.1、赋值运算符

=，使用方式如x=y。
复合赋值运算符将赋值与运算特组合在一起，其中x op=y等于x=x op y
复合赋值运算符列举如下:+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、|=、^=

5.2、比较运算符

运算符	说明
==	如果两个操作数相等，则返回true。
! =	如果两个操作数不相等，则返回true。
>	如果左操作数大于右操作教，则返回true。
>=	如果左操作效大于或等于右操作数，则返回true，
<	如果左操作数小于右操作数，则返回true。
<=	如果左操作数小于或等于右操作数，则返回true。

5.3、算术运算符

一元运算符为-、+、–、++。
二元运算特列举如下:

运算符	说明
+	加法
-	减法
*	乘法
/	除法
%	除法后余数

5.4、位运算符

运算符	说明
a&b	按位与:如果两个操作数的对应位都为1，则将这个位设置为1，否则设置为0。
a l b	按位或:如果两个操作数的相应位中至少有一个为1，则将这个位设置为1，否则设置为0，
a^b	按位异或:如果两个操作数的对应位不同，则将这个位设置为1，否则设置为0。
~a	按位非:反转操作数的位。
a<<b	左移:将a的二进制表示向左移b位
a>>b	算术右移:将a的二进制表示向右移b位，带符号扩展
a>>> b	逻辑右移:将a的二进制表示向右移b位，左边补0

5.4、逻辑运算符

运算符	说明
a && b	逻辑与
allb	按位或:如果两个操作数的相应位中至少有一个为1，则将这个位设置为1，否则设置为0，
! a	逻辑非

汇总练习

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

  build() {
    Column(){
      Button('运算符').onClick(()=>{
        // 赋值运算符 =，+=，-=，*=。、=，%=
        let a=10
        let b=20
        a+=b //a=a+b
        console.log('+=',a,b)// 30 20
        // 算术运算符 +,-,*,/,%,++,--

        // 关系运算符 >,<,==,>=,>=,!=
        // 逻辑运算符 &&, || ,!
        //给定年份，判断是否是闰年(能被4，但不能被100或者能被400整除的年是闰年)
        let year=2000
        if((year % 4==0 && year % 100!=0)|| year %400==0 ){
          console.log('闰年',`${year}是闰年`)
        }else{
          console.log('不是闰年',`${year}是平年`)
        }
        // 位运算符
        // 三元运算符
      })
    }
    .height('100%')
    .width('100%')
  }
}

6、ArkTS分支和循环

6.1、if语句

下面是通过if语句实现判断成绩的小案例

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

  build() {
    Column(){
      Button('if else').onClick(()=>{
        let score=90//成绩
        if(score>=90){
          console.log('成绩优秀')
        }else if(score>=80 && score<90){
          console.log('成绩良好')
        }else if(score>=70  && score<80){
          console.log('成绩中等')
        }else if(score>=60  && score<70){
          console.log('成绩及格')
        }else{
          console.log('成绩不及格')
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}

6.2、switch语句

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

  build() {
    Column() {
      Button('switch').onClick(() => {
        let arr: string[] = [
          "1.用户管理",
          "2.角色管理",
          "2.机构管理",
        ]

        let menu = 1
        let MenuStr: String
        switch (menu) {
          case 1:
            MenuStr = arr[0]
            break
          case 2:

            MenuStr = arr[1]
            break
          case 3:
            MenuStr = arr[2]
            break
          default:
            MenuStr = '没有菜单'

        }
        console.log('当前菜单',MenuStr)
      })
    }
    .height('100%')
    .width('100%')
  }
}

6.3、条件表达式

6.4、For 语句

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

  build() {
    Column() {
      Button('循环结构1').onClick(() => {
        let arr: string[] = [
          "1.用户管理",
          "2.角色管理",
          "2.机构管理",
        ]
        for (let i = 0; i <= arr.length; i++) {
          console.log('菜单', arr[i])
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}

6.5、For-of语句

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

  build() {
    Column() {
      Button('循环结构2').onClick(() => {
        let arr: string[] = [
          "1.用户管理",
          "2.角色管理",
          "2.机构管理",
        ]
        for(let item of arr){
          console.log('item',item)
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}

6.6、while语句

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

  build() {
    Column() {
      Button('循环结构3').onClick(() => {
        let arr: string[] = [
          "1.用户管理",
          "2.角色管理",
          "2.机构管理",
        ]
        let index=0
        while (true){
      
          if(index>arr.length){
            break
          }
          console.log(arr[index])
          index++
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}

6.7、do-while语句

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

  build() {
    Column() {
      Button('循环结构5').onClick(() => {
        let arr: string[] = [
          "1.用户管理",
          "2.角色管理",
          "2.机构管理",
        ]
        let index=0
        do{
          console.log('item',arr[index])
          index++
        }
        while(index<arr.length){

        }
      })
    }
    .height('100%')
    .width('100%')
  }
}

6.8、Break/Continue语句

break 结束，Continue结束当前循环，开始下次循环

持续更新中

✒️总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见