鸿蒙4.0 ArkTS 开发故事（经验分享）

说在前面

我是一个前端，最近华为官宣鸿蒙系统 NEXT 不再支持安卓，然后就尝试基于现在的 HarmonyOS 4.0 支持 API9 开发了一款鸿蒙 APP 暂时叫面试宝典。

再说体验

安装开发环境挺顺利的，所有的环境在安装 DevEco Studio 的时候都可以搞定，比起安卓和 Flutter 好像要简单些。
然后就是开发 ArtTS 使起来和 TypeScript 差不多，扩展了一些装饰器和声明式UI的语法，总体写起来和写前端差不多。整体感觉是，前端 TS 的语言，Java 的面向对象思想，Swift 的声明式 UI。
最后调试预览，使用 Priviewer 预览器在写静态结构和写 web 的体验是一样的更新比较快吧，然后涉及到网络或者页面信息传递就需要使用模拟器，或者真机了。

一些心得

说了这么多，还是把我在开发的过程中遇到的问题和大家分享一下吧！

1）开发中

Prop 不可以设置默认值？

文档上是说明 Prop 可以给初始值，不过编辑器检查没通过，可以正常运行；下个版本就修复了~

嵌套对象属性修改 UI 不更新？

错误写法：

typescript 复制代码

interface User {
  name: string
  age: number
}


@Entry
@Component
struct Test {
  @State
  userList: User[] = [
    new UserModel({ name: 'jack', age: 20 }),
    new UserModel({ name: 'tom', age: 24 })
  ]

  build() {
    Column({ space: 15 }) {
      ForEach(this.userList, (item: User) => {
        Row() {
          Text(`${item.name} 今年 ${item.age} 岁`)
          Button('过一年')
            .onClick(() => {
              // ❌ 不更新
              item.age++
            })
        }
      })
    }
  }
}

export class UserModel implements User {
  name: string = ''
  age: number = 0

  constructor(model: User) {
    this.name = model.name
    this.age = model.age
  }
}

重新赋值解决：

diff 复制代码

@Entry
@Component
struct Test {
  @State
  userList: User[] = [
    new UserModel({ name: 'jack', age: 20 }),
    new UserModel({ name: 'tom', age: 24 })
  ]

  build() {
    Column({ space: 15 }) {
      ForEach(this.userList, (item: User, i: number) => {
        Row() {
          Text(`${item.name} 今年 ${item.age} 岁`)
          Button('过一年')
            .onClick(() => {
              item.age ++
+              // ✅ 重新赋值
+              this.userList[i] = new UserModel(item)
            })
        }
      })
    }
  }
}

@Observed/@ObjectLink 装饰器解决：

typescript 复制代码

interface User {
  name: string
  age: number
}


@Entry
@Component
struct Test {
  @State
  userList: User[] = [
    new UserModel({ name: 'jack', age: 20 }),
    new UserModel({ name: 'tom', age: 24 })
  ]

  build() {
    Column({ space: 15 }) {
      ForEach(this.userList, (item: User, i: number) => {
        // 1. 需要提取到组件才可以支持
        Child({ item })
      })
    }
  }
}

@Component
struct Child {
  // 2. 支持当前组件更新
  @ObjectLink
  item: UserModel

  build() {
    Row() {
      Text(`${this.item.name} 今年 ${this.item.age} 岁`)
      Button('过一年')
        .onClick(() => {
          this.item.age++
        })
    }
  }
}

@Observed
export class UserModel implements User {
  name: string = ''
  age: number = 0

  constructor(model: User) {
    this.name = model.name
    this.age = model.age
  }
}

2）开发后

目前支持 API9 设备？

说到这里讲讲一个小故事，开发的时候使用的是模拟器一点毛病都没有，然后使用 mate40 Pro 看起来整体小了一点点，没放在心上。后来有一个同事的手机是 mate50 兴致勃勃 '来我写了个鸿蒙app，给你装上'，然后... 整体界面小不行了。这还不是最糟糕的，后来又有一个同事他的手机是 nova8 Pro 拿出来然后装，装上之后应用直接卡死...。后来在某鱼上买测试手机，从 mate30 p40 p50 一直试试...

不卖关子了~

目前能够支持 API9 的手机，也是就可以运行（不是适配）的手机：p50以上 mate40以上 nova11以上 的 HarmonyOS4.0 系统，这是测试过的没有测试过的大家可以补充哈。另外官方 codelabs 测试机型为 P50，后期系统更新后应该可以支持更多机型。

然后对于在部分机型比较小的问题有一个解决方案，size = px2vp(屏幕物流像素宽度) / 设计稿尺寸 * 量取尺寸 具体代码参考 https://github.com/HarmonyOS-Next/interview-handbook-project 还不是next版本哈 🙂

最后

先写到这里吧，如果大家有需要后续，在更新几个项目具体的代码实现短文~