5年前端机缘巧合做起鸿蒙开发，你也要来吗？

楔子 剑气近

梅雨时节，檐角铜铃嗡鸣如剑吟。我盘坐在软件园十楼，望着窗外连绵雨幕，忽然想起当年苦修Vue剑诀时说的话："前端修士三十岁前若悟不透'状态'二字，不如改行卖螺蛳粉。"此刻丹田里ArkTS真气翻涌，华为Mate 60屏幕上的代码竟在雨帘中映出青冥剑气------五载沉浮，终究在这个万物互联的江湖，等来了我的剑道。

---

第一章 代码不会说谎：（自定义组件）

DevEco Studio的启动音恍若古剑出鞘。新建的HealthCard组件在预览器里吞吐灵光，恰似初入江湖的剑胚。忽听得IDE深处传来大道纶音：

"组件初诞时，aboutToAppear如婴儿睁目；"

"界面显现时，onPageShow似少年开锋；"

"隐入后台时，onPageHide若剑归鞘中；"

"形神俱灭时，onDestroy便是兵解轮回。"

我以茶代酒洒向虚空，祭奠那些年在Vue的created与React的componentDidMount里蹉跎的岁月。而今鸿蒙的组件生命周期竟暗合道家金丹九转，build()函数里嵌套的十六层布局，分明是剑阵里的"梅花易数"。

忽见代码中隐现异象：

@Component
struct HealthCard {
  aboutToAppear() {
    console.log('剑来！')
  }
  
  onPageShow() {
    this.startHeartRateMonitoring()
  }

  build() {
    Column() {
      Text(this.heartRate).fontSize(20)
    }
  }
}

窗外紫竹簌簌作响，组件树在预览器里生长如千年古木。这一刻，我终于懂得华为工程师将组件比作"原子"的真意------每个自定义组件，都是可以演化天地的先天一炁。

---

第二章 代码不会说谎：（@Observed与@ObjectLink）

三更天，鹅厂旧友携酒来访。酒过三巡，他抛出难题："若父组件真气要贯通孙辈组件，当如何？"我拍案长笑，泼酒为墨，在玻璃幕墙上画出三道剑痕：

第一道刻下@Observed：

@Observed
class FamilyDao {
  surname: string = "陈"
  @ObjectLink grandson: GrandsonModel
}

此乃宗门血脉本源，须以特殊心法标记。

第二道注入@ObjectLink：

@Component
struct GrandsonComponent {
  @ObjectLink grandson: GrandsonModel

  build() {
    Text(this.grandson.nickname).onClick(() => {
      this.grandson.nickname = "平安"
    })
  }
}

恰似幼童手握家族玉佩，血脉相连处，千里犹可共鸣。

第三道布下嵌套大阵：

@Entry
@Component
struct AncestorPage {
  @State family: FamilyDao = new FamilyDao()

  build() {
    Column() {
      FatherComponent({ familyContext: this.family })
    }
  }
}

但见数据如长江三叠浪，从祖脉到孙辈贯通无碍。友人醉眼朦胧间，竟见三代组件同时泛起玄光，@ObjectLink的灵气在组件树中流转如龙。

---

第三章 代码不会说谎：（网络请求封装）

那日重构天气应用，遇天劫雷云------原生态的http模块如野马难驯。我闭观三日，悟出"青鸟三式"：

第一式，铸HttpUtil剑匣：

// httpUtil.ets
import http from '@ohos.net.http'

export class HttpUtil {
  private static client: http.HttpClient = new http.HttpClient()

  static async get(url: string): Promise<any> {
    return await this.client.request(url, { method: http.RequestMethod.GET })
  }
}

这剑匣要刻上export符印，方能在其他剑阵调用。

第二式，设ApiService剑诀：

// apiService.ets
import { HttpUtil } from './HttpUtil'

export class WeatherApi {
  static async fetchWeather(city: string): Promise<WeatherData> {
    const response = await HttpUtil.get(`https://api.weather.com/${city}`)
    return response.data as WeatherData
  }
}

第三式，在组件中御剑：

// WeatherPage.ets
import { WeatherApi } from '../model/apiService'

@Entry
@Component
struct WeatherPage {
  @State weatherData: WeatherData | null = null

  aboutToAppear() {
    WeatherApi.fetchWeather('深圳').then(data => {
      this.weatherData = data
    })
  }
}

当暴雨预警数据穿透云端时，忽见代码中飞出青鸾虚影，绕梁三匝后化作API文档中的HTTP状态码。这才明白，封装网络请求如同修炼御剑术------剑意愈纯粹，剑气愈能破开混沌。

---

第四章 代码不会说谎：（数据存储封装）

探索"持久化存储"奥义，连夜在utils目录刻下StorageUtil石碑：

// storageUtil.ets
import dataPreferences from '@ohos.data.preferences'

export class StorageUtil {
  private static PREFERENCES_NAME = 'myAppPrefs'

  static async save(key: string, value: preferences.ValueType): Promise<void> {
    const pref = await dataPreferences.getPreferences(this.PREFERENCES_NAME)
    await pref.put(key, value)
    await pref.flush()
  }

  static async get(key: string): Promise<preferences.ValueType> {
    const pref = await dataPreferences.getPreferences(this.PREFERENCES_NAME)
    return await pref.get(key, '')
  }
}

在用户设置页面布下禁制：

// SettingsPage.ets
import { StorageUtil } from '../utils/storageUtil'

@Entry
@Component
struct SettingsPage {
  @State theme: string = 'light'

  onPageHide() {
    StorageUtil.save('themePreference', this.theme)
  }

  aboutToAppear() {
    StorageUtil.get('themePreference').then(value => {
      this.theme = value.toString()
    })
  }
}

是夜，手机突然自动切换深色模式，但见存储模块在虚拟文件系统中化作九层玲珑塔，每层都记载着用户的数据因果。原来持久化存储之道，竟与佛家阿赖耶识有异曲同工之妙。

---

终章 天工开物

想起《剑来》里崔瀺的"大势不可逆"，此刻鸿蒙生态的剑气长城已然成型。我们这些重修的前端剑修，左手握着华夏文明的河图洛书，右手写着ArkTS的现代剑诀，在万物互联的新江湖里，苦苦追寻属于自己的"第十五境"。