Hikari's home

Appearance

Hello，HarmonyOS

🕒 Published at:

前几天由于项目做的都差不多了，优化重构代码的时候，组长看我应该是闲着没事干，就让我开发鸿蒙版 APP 。我一想，这哪成啊，我连 Android 都没接触过，更何况鸿蒙这么高大上的东西了。

初步探索 ​

早就听闻鸿蒙挺史的大名，那就 BiliBili 大学找找教程吧（毕竟我前端也是 BiliBili 大学毕业的）！随便搜了一下，还真不少，随便找了个播放量比较高的就看了。黑马yyds!

看了几个视频之后，这不跟 TypeScript 没什么区别嘛，而且布局方面基本上都是一个个 Flex 盒子来堆叠，只是函数的形式的写法有些不习惯（有点像 Vue 的 h 函数，不过有一说一，tsx 用起来是真的爽）。

深入组件 ​

今天下午在封装自定义组件的时候，被恶心坏了。我原本封装了一个卡片组件，暂且就叫它 ReCard 吧。我预设了一个默认插槽，然后对其设定了一些样式（宽、高、背景色等等）。

我也不知道叫“插槽”合不合适，就先以 Vue 的风格称呼吧

ts
// ReCard.ets

@Component
export struct ReCard {
  @BuilderParam content: () => void = this.defaultBuilder

  @Builder
  defaultBuilder() {
    ...
  }

  build() {
    Column() {
      this.content()
    }
      .weight('100%')
      .height('100%')
      ...
  }
}

初见端倪 ​

现在，组件已经封装好了，该使用了。于是我随着写 Vue 的思路来写，当然，中间也借助了 AI 的辅助。

ReCard 组件也成功加载了，然后，当我给组件添加样式和事件的时候，意外发生了...

ts
// Index.ets

import { ReCard } from '@ohos/common'

@Entry
@Component
struct Index {
  build() {
    Column() {
      ...

      ReCard() {
        Column() {
          ...
        }
      }
        .width('100%') // 我想给组件添加点击和宽度
        .onClick(() => {
          ...
        })

      ...
    }
  }
}

开始红温 ​

我在编写链式调用的时候，IDE 也有提示补全，当我一切写完之后，发现 .width('100%') 的下面出现了一个红色波浪下划线，此时我应该意识到：出错了。

我寻思着，这个 .width('100%') 是 IDE 给我智能补全的啊，为什么还会报错呢，然后我问了 IDE 自带的 AI，AI 也回答不上什么，然后我就换了其他 AI，什么 ChatGPT、Claude 全都问了个遍，都答不上来什么。我甚至去翻了他的官方文档，也没找到什么结果（文档官网的检索功能还有待加强）。

当时的我气的差点口吐芬芳，后来沉下心来慢慢排查，想到插槽除了在 {} 里面传递，通过参数的方式是否也可行？

于是乎，我犯了一个最低级的错误。

ts
// Index.ets

import { ReCard } from '@ohos/common'

@Entry
@Component
struct Index {
  build() {
    Column() {
      ...

      ReCard({
        content: () => {
          Column() {
            ...
          }
        }
      })
        .width('100%')
        .onClick(() => {
          ...
        })

      ...
    }
  }
}

渐入佳境 ​

说真的，我当时有点怀疑我脑子是不是抽风了，不仅无视代码错误，还自信满满的直接点击了运行，当我看到一大串异常后才冷静下来。

content 类型是组件，不能直接传递函数。于是我又额外编写了一个 Builder，事情才得到解决

ts
// Index.ets

import { ReCard } from '@ohos/common'

@Entry
@Component
struct Index {

  @Builder
  cardContent() {
    Column() {
      ...
    }
  }

  build() {
    Column() {
      ...

      ReCard({
        content: this.cardContent
      })
        .width('100%')
        .onClick(() => {
          ...
        })

      ...
    }
  }
}

事后总结 ​

虽然因为这个拖了十几分钟才下班，但是仔细回想一下，最主要的问题还是太依赖 AI 了，自己没有一点主见性，当然也有一方面是自己知识掌握的不够全面吧，毕竟只看了一遍视频，而且还是跳着看的那种。总之，最后的结果是好的嘛。

通过这件事情我明白了一个道理：在进行 AI 辅助开发的时候自己要有独立思考的能力，不能过度相信 AI，否则的话出现无法解决的异常只能和 AI 在那对线，事情也得不到很好的解决。

其次，遇到困难要冷静，与其坐在那里干着急，不如静下心来想想是不是能够通过另一种方式来解决当下的问题。

第三，要学会复盘，这也是提升自我认知的一个很好的方式，复盘不仅仅是加深自己印象，更重要的是尽可能避免以后出现类似的情况。

如今，AI 发展速度越来越快，也在逐渐地替代前端这个行业，我也同时意识到，掌握多个技能也是不得已的事情了。

HarmonyOS，面白い！