鸿蒙HarmonyOS4.0开发故事：ArkTS全套开发细节分享

说在前面

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

再说体验

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

一些心得

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

1）开发中

• Prop 不可以设置默认值？

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

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

错误写法：

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 
    } 
}

重新赋值解决：

@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 装饰器解决：

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(屏幕物流像素宽度) / 设计稿尺寸 * 量取尺寸  🙂🙂🙂

最后

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