Hello, Harmony

本文旨在帮助 iOS 开发者快速入门鸿蒙开发的基本概念,了解鸿蒙与 iOS 系统下名词的对应关系,以便顺利转方向。

系统层面
鸿蒙 相当于 iOS 备注
Ability   UIKit - UISceneSession 或者 SwiftUI - Scene 多个 Ability 在系统中表现为多个应用实例,可以在任务管理器中切换、关闭,与 iOS 多个 UISceneSession 表现类似
Window   UIWindow  
WindowStage   UIWindowScene 概念上对应,但不完全是一个东西。。。
       
UI 层面
ArkUI 相当于 SwiftUI 备注
Component   SwiftUI - View  
@Entry Component   UIKit - UIViewController  
Component : build   SwiftUI - body  
Component : onPageShow()   - [UIViewController viewDidAppear] 只有 router 打开的页面才会有 page 回调。鸿蒙系统回后台也会调
Component :onPageHide()   - [UIViewController viewDidDisappear]  
Component : aboutToAppear()   - [UIViewController init] 鸿蒙的 Component 无法重写构造函数,这个时机可以用来初始化
Component : aboutToDisappear()   - [UIViewController dealloc] 同样,无法重写析构函数,这个时机可以用来销毁。SwiftUI 是值类型,不用销毁。鸿蒙 ArkTS 的 struct 是一个伪装的类,只是个特定语法
Component : onAppear(() => void)   - [UIViewController viewDidAppear] 所有 Component 都会调,可能更接近 - [UIView didMoveToWindow:window]
SwiftUI : onAppear(perform:)
Component : onDisAppear(() => void)   - [UIViewController viewDidDisappear] 所有 Component 都会调,可能更接近 - [UIView didMoveToWindow:nil]
SwiftUI : onDisappear(perform:)
Row   HStack  
Column   VStack  
Stack   ZStack  

以下是类似的功能在鸿蒙、iOS 两个平台上的分别具体实现代码,可以发现在很多结构上、用法上是相似的。

@Entry
@Component
struct Index {  
  @State message: string = 'Hello World'
  @State selected: number = 0

  build() {
    Tabs({
      barPosition: BarPosition.End,
      index: $$this.selected,
    }) {
      TabContent() {
        Column() {
          Image($r('sys.media.ohos_ic_public_sound'))
            .width(64)
          Text(this.message)
        }
      }.tabBar({
        icon: $r('sys.media.ohos_ic_public_web'),
        text: "Tab 0"
      })

      TabContent() {
        Column() {
          Text("Content 1")
        }
      }.tabBar({
        icon: $r('sys.media.ohos_ic_public_device_watch'),
        text: "Tab 1"
      })
    }
  }

  onPageShow(): void {
  }

  onPageHide(): void {
  }

  aboutToAppear(): void {
  }

  aboutToDisappear(): void {
  }
}

struct ContentView: View {  
    @State var message = "Hellow world"
    @State var selected = 0
    var body: some View {
        TabView(selection: $selected) {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text(message)
            }
            .padding()
            .tabItem {
                Image(systemName: "globe")
                Text("Tab 0")
            }

            VStack(spacing: 8, content: {
                Text("Content 1")
            }).tabItem {
                Image(systemName: "phone")
                Text("Tab 1")
            }
        }
    }
}

语法上 Swift 更简洁一些,它的类型推断更强,而鸿蒙的 TS 语法很多时候仍要显式写明成员类型,要显式写 this. ,枚举类型等仍然要先输入完整类型名才能用.语法,而不是直接用.语法。当然,这可能是 JavaScript 本身的限制。

真实业务开发上,目前感觉在真正熟悉之后,鸿蒙的 ArkUI 更好用,自带 Flex 布局,而 SwiftUI 要引三方库。鸿蒙的 IDE 也更好用(当然安装过程还需要更加自动化)。