HarmonyOS学习Day02

 #学习视频：bilibili蜗牛学苑#

【最新】全套鸿蒙开发HarmonyOS NEXT5.0实战教程

Day02

一、ArkTS介绍

基本概念

JS：前端浏览器端语言，弱类型语言，灵活，功能强大

TS：TS是JS 的一个超集，支持 ES6 标准（ES6 教程）。TS 由微软开发的自由和开源的编程语言，在 JS的基础上增加了静态类型检查的超集。TS设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

ArkTS：鸿蒙官方主推的开发语言，高级编程语言。在TS基础上进行了扩展。推出了全新声明式的开发规范。相当于基于TS开发规则，又进行封装。将核心的内容封装起来采用声明式开发模式。

ArkTS编程规范会比TS更加严格。完全按照强类型语言的规则来要求。

我们创建的文件后缀ets结尾的文件，这个文件是一个ArkTS文件。

包含：

1、装饰器：ArkTS将装饰器进行了封装，提供了各种装饰器来强化我们的组件。有类的装饰器，属性装饰器，方法装饰器。实现不同的业务功能。

2、struct来定义一个组件，这个组件内部开发模式严格采用面向对象的开发规则。有类，属性，行为等等这些概念，this的使用也是必须的。

3、可以在ArkTS中自定义组件，也可以使用官方提供系统组件（ArkUI）提供的。

4、还可以给组件绑定事件，还提供完整的事件机制。

二、ArkUI入门

Row组件

Row组件常用于布局，可以理解他是一个div容器。

Row()布局容器组件：允许子元素在水平方向排列,当内容超出时不会换行也不会出现滚动条，会直接隐藏。

@Entry
@Component
struct DetailPage {
  @State message:string = "HarmonyOS";
  // 进入组件执行build函数来进行页面渲染
  build() {
    // Row()布局容器组件：允许子元素在水平方向排列,当内容超出时不会换行也不会出现滚动条，会直接隐藏
    Row(){
      // 相当于以前的span
      Text("这是Row组件")
      Text("harmonyos")
      Column(){}
        .width(50)
        .height(50)
        .backgroundColor("#ccc")
    }
  }
}

Column组件

Column()布局容器组件：允许子元素在垂直方向排列,当内容超出时不会出现滚动条，会直接隐藏。

@Entry
@Component
struct DetailPage {
  @State message:string = "HarmonyOS";
  // 进入组件执行build函数来进行页面渲染
  build() {
    // Column()布局容器组件：允许子元素在垂直方向排列，当内容超出时不会出现滚动条，会直接隐藏
    Column(){
      // 相当于以前的span
      Text("这是Column组件")
      Text("harmonyos")
    }
  }
}

Text组件

文本组件，可以将文本内容写到这个组件中，并设置对应属性来调整样式

Text("测试1")
  .fontSize(18)
  .fontColor("#fff")
  .fontWeight(500)

可以给指定的组件添加属性

Row({space:20}){
    Text("test1")
    Text("test2")
}

{space:20}这个代码就代表属性，允许控制当前组件的一些基本设置。

三、国际化配置

鸿蒙开发过程中项目默认已经配置好了国际化内容。需要开发者自己将对应布局标签文字放在指定的文件夹下面，实现国际化。

根据操作系统语言自动切换中英文，也可以手动切换中英文。

原理：提供了多套语言包，在代码编写过程中，不要将文字写死。将文本放在指定的文件夹中来保存，后续遇到需要进行国际化切换的时候，可以采用不同的语言包。

在resource/base/element/string.json

{
  "string": [
    {
      "name": "module_desc",
      "value": "module description"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "label"
    },
    {
      "name": "title",
      "value": "app title"
    },
    {
      "name": "notice_text",
      "value": "please enter username"
    }
  ]
}

里面配置的键值对，在页面中使用

$r("app.string.title")

在resource/en_us/element/string.json

{
  "string": [
    {
      "name": "module_desc",
      "value": "module description"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "label"
    },
    // 英文的显示内容
    {
      "name": "title",
      "value": "app title"
    },
    {
      "name": "notice_text",
      "value": "please enter username"
    }
  ]
}

在resource/zh_cn/element/string.json

{
  "string": [
    {
      "name": "module_desc",
      "value": "模块描述"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "label"
    },
    // 中午的内容显示
    {
      "name": "title",
      "value": "应用程序标题"
    },
    {
      "name": "notice_text",
      "value": "请输入用户名"
    }
  ]
}

在开发过程中，可以手动切换预览器的语言

代码如下：

@Entry
@Component
struct LanguagePage {
  @State message: string = 'Hello World';
​
  build() {
    Column(){
      Text($r("app.string.title"))  // 使用自定义标题
        .fontSize($r("app.float.full_float")) // 使用自定义数字
      Text("测试代码，系统提供的颜色")
        .fontColor($r("sys.color.warning")) // 使用系统提供的颜色
      TextInput({placeholder:$r("app.string.notice_text")}) // 使用自定义文本
    }
    .height('100%')
    .width('100%')
    .backgroundColor($r("app.color.bgcolor")) // 使用自定义颜色
  }
}

四、ArkTS基本语法

变量声明

在ArkTS中定义变量，默认只能支持let和const来定义，不能出现var来定义。

在ArkTS中要严格采用面向对象的方式来编程，不管是数据模型，还是布局页面都遵循这个规则

struct Index{
    username:string = "zhangsan"
    play(){
    
    }
    show = ()=>{
        this.play()
        this.username = "lisi"
    }
}

自动类型推断

由于ArkTS是一种静态类型语言，所有数据的类型都必须在编译时确定。

但是，如果一个变量或常量的声明包含了初始值，那么开发者就不需要显式指定其类型。ArkTS规范中列举了所有允许自动推断类型的场景。

以下示例中，两条声明语句都是有效的，两个变量都是string类型：

let test1: string = 'hello';
let test2 = 'hello, world';

数据类型

以下仅列举核心几个类型，详细内容请参考官方文档：

ArkTS语言介绍-学习ArkTS语言-基础入门 - 华为HarmonyOS开发者

1、void类型

// void类型用于指定函数没有返回值。
computedData = ():void=>{}

2、枚举类型（Enum类型）

在ArkTS开发过程中，官方提供的很多属性，属性值都已经采用枚举的类型进行封装了。

枚举类型是TS中提供的一种数据表达方式

const order = {
    orderId: "xxxx",
    orderType: "普通订单",
    orderState: 1  // 1表示支付成功 0表示支付失败 2表示支付超时
}
// 枚举的基本结构
// 当你的结果是固定的，有限个数的，就用枚举来表示
enum OrderStatus{
    payFail = 0,
    paySuccess = 1,
    payTimeOut = 2
}
​
if(order.orderState == OrderStatus.paySuccess){
    // 跳转到xxx页面
}else if(order.orderState == OrderStatus.payTimeOut){
    // 提示用户支付超时
}else if(order.orderState == OrderStatus.payFail){
    // 支付失败，重新支付
}

3、联合类型（union类型）

// 类声明引入一个新类型，并定义其字段、方法和构造函数。
// 在以下示例中，定义了User类，该类具有字段id、构造函数
class User {
  id:number
  constructor(id:number) {
    this.id = id
  }
}
//...
@State user:User | null | undefined = null   // 联合类型

数据定义

let users1:string[] = ["张三","李四"]
let users2:<string> = ["张三","李四"]
// 推荐使用的方式
class User{
    id:number = 1
    name:string = "default"
}
let user3:Array<User> = [new User()]

键值对的数据定义

// 利用Record来实现页面上键值对的表达
@State map:Record<string,string> = {
    "key1": "value1",
    "key2": "value2"
}