ArkTs Tips

路漫漫其修远兮, 吾将上下而求索

题记

江湖风云变幻，鸿蒙终将成为操作系统的半壁江山

遇到的问题

1. 鸿蒙开发中，resource的图片资源只能放到media目录下，不能再建立子目录吗？只能是app.media.xxxxx 不能是app.media.home.xxxx吗

在鸿蒙操作系统（HarmonyOS）的开发中，资源文件如图片确实通常放置在resources/rawfile或者resources/media目录下。对于您提到的具体情况，在官方文档和现有资料中，一般推荐的做法是将所有的媒体资源直接放在media文件夹内。

2.入口配置

在配置的EntryAbility中onWindowStageCreate中配置windowState.loadContent

3. TabContent引用一个Page.ts

需要

import { xxxx } from '../abcd/xxxx'

xxx.ts需要用export 声明一下

4.如何设置图标

module.json5 -> ability -> icon => $media.icon

5.如何设置应用名称

module.json5 -> ability -> label => $string.xxxxx

6. 为什么用interface而不用struct、class

- interface 定义对象，描述对象应该有的属性及其类型，属性为只读类型
- struct 字段和方法，配合@Component组成ArtsUI
- class 描述的的是面向对象，有了oop的性质

7.初始化一个inteface的数组

8.为何model不用struct

struct在ArkTs中是UI的描述，故model不能使用struct，model应该使用class，class为引用类型

间距

Row({ space: 10 }) 
.margin({letft: 10})
Blank().width(10)
Flex+justifyContent  .layoutWeight(1)

MVVM模式例子

Model

@Observed
export class NewsDto {
  id: string
  images: string[]
  type: string
  title: string
  created: Number
  ....
}

ViewModel
@Observed
export class NewsVM {
  dataList: NewsDto[] = []

  reqData() {
    this.dataList = [...this.dataList,
      new NewsDto()]
  }
}

 * 采用MVVM模式编写
 * NewsVM中的dataList为列表数据，故需要用@Observed修饰
 * --- 📢：确保dataList能产生更新，dataList的更新请勿使用push、pop，而使用this.dataList = [...this.dataList, item]
 * dto model 对象使用@Observed 修饰

资源文件Media rawfile

Media下不支持建立目录 $('app.media.xxxx')
rawfile下支持 $rawfile('imges/tab/xxxx.png')

ArkTs 继承

class NewsVM extends VM {}   关键字使用extends

Arkts 日志

console.log

ArkTs 赋值

data: NewsDto[] = []
dataList?: NewsDto[] 

把dataList赋值给data
data = dataList || []
data = dataList ?? []
if(dataList){
  data = dataList
}

ArkTs 模型解析

interface的结构可以通过json直接解析
class的结构需要手动解析或者利用第三方库

ArkTs 网络请求

http.createHttpRequest()
一种callback回调
另外一种promise async、await

ArkTs

string String
number Nubmer
string 和 String、number 和 Number 是两种不同的类型，分别代表 原始类型 和 包装对象。以下是它们的区别和用途：

Navi unknown 如何转为所传参数

.navDestination
navDestination(builder: (name: string, param: unknown) => void): NavigationAttribute;
param如何传值，如何转化为NewsDto

Navi导航设置

Main
naviStack: NavPathStack = new NavPathStack()
Navigation(this.naviStack) {
      .onClick(()=>{
          this.naviStack.pushPathByName('NewsDetailPage', item)
     })
}
  .navDestination(this.PageMap)

@Builder
  PageMap(name: string, param: NewsDto) {
    if (name === "NewsDetailPage") {
        NewsDetailPage({ dto: param })
    }
  }

Detail

NavDestination() {}

Component 的生命周期

struct PlanPage {
  // 1. 构造函数最先执行
  number: number = 1
  constructor() {
    super();
    console.log('1 constructor: 初始化状态' + this.number);
    this.number++
  }

  // 2. 组件即将挂载到 UI 树前调用（可选）
  aboutToAppear() {
    console.log('2 aboutToAppear: 准备渲染' + this.number);
    this.number++
  }


  build() {
    Column() {

    }.onAppear(()=>{
      // 3. 组件渲染完成后调用
      console.log('3 onAppear: UI 已显示' + this.number);
      this.number++
    })

  }
}

03-17 00:04:45.587   5198-698475   A0c0d0/JSAPP                                          I     2 aboutToAppear: 准备渲染1
03-17 00:04:45.593   5198-698475   A0c0d0/JSAPP                                          I     3 onAppear: UI 已显示2

生成长度的数组

Array.from({ length: this.eventNum })

aspectRatio

aspectRatio 宽高比

## 后记
本文是一个记述型文档,陆续会把遇到的问题更新上来.