DEV Community

lyc233333
lyc233333

Posted on

Hongmeng Cross-platform development: 3 tricks to connect Android and iOS ecology🚀

In the era of multi-device competition, cross-platform development is the key to covering the entire user base.This article analyzes the adaptation strategies of Hongmeng and Android and iOS, and teaches you to implement "one set of code, three-end running" at the minimum cost~

1. Platform differences: "Adaptive map" that knows oneself and the enemy 📌

Core Difference Comparison Table

Dimensions Android iOS Hongmeng Next
Development Language Java/Kotlin Swift/Objective-C ArkTS/Java/C++
Interface Framework View/Compose UIKit/SwiftUI ArkUI
Backend Mechanism Virtual Machine (ART) Local Compilation (LLVM) Ark Compiler (static Compilation)
Distributed Capability None Limited (Continuity) Native Support (Soft Bus/Distributed Tasks)

Typical adaptation scenario

  1. Navigation Interaction
  2. Android: Physical Return Key → Listen to onBackPressed
  3. iOS: Slide back → adapt to UINavigationController

  4. Hongmeng: Gesture Navigation → Use the BackGesture component

  5. Push Service

  6. Android: FCM → Integrated Firebase

  7. iOS: APNs → Configure Apple Developer Certificate

  8. Hongmeng: HMS Push → Call @ohos.push interface

2. Cross-platform tool chain: "Swiss Army Knife" with improved efficiency 🔧

1. DevEco Studio: The "core engine" developed by Hongmeng

Key Features

  • Multi-language support: Write ArkTS (Hongmeng) and Java (Android compatible) code at the same time
  • One-click compilation: Output three packages: Hongmeng HAP, Android APK, and iOS IPA
  • Unified debugging: Preview the three-end interface simultaneously through the emulator

Interface adaptation example (ArkUI vs SwiftUI) 

// Hongmeng interface (responsive layout)
GridRow {  
  GridCol({ span: { xs: 12, lg: 6 } }) {  
    Text('Hello')  
      .fontSize({ xs: 16, lg: 24 })  
  }  
}
Enter fullscreen mode Exit fullscreen mode 
// iOS interface (automatic layout)
HStack {  
  Text("Hello")  
    .font(.system(size: UIDevice.current.userInterfaceIdiom == .pad ? 24 : 16))  
  Spacer()  
}
Enter fullscreen mode Exit fullscreen mode

2. Ark compiler: "accelerator" for performance optimization

Compilation process comparison

Platform Traditional Compilation Method Ark Compiler Method
Android Java → Bytecode → Virtual Machine Execution Directly compile to local machine code
Hongmeng Next ArkTS → Bytecode → Virtual Machine Execution Static Compilation into Binary File

Performance data (test application: video editing)

Indicators Android (ART) Hongmeng Next (Ark) Improvement
Startup Time 1.8s 1.2s 33%
Video rendering frame rate 28fps 35fps 25%

3. Adaptation strategy: "Precise Strike" in different scenarios 🎯

1. Interface layer: unified design language + platform-specific adaptation

Strategy

  • Basic Component Unification: Use cross-platform UI libraries (such as OpenHarmony's ArkUI-X)
  • Platform feature retention: Differentiate the navigation bar, button style, etc.

Code example (button style adaptation) 

// Cross-platform component library
class Button {  
  render() {  
    #ifdef ANDROID  
    return <AndroidButton style={androidStyle} />  
    #elif IOS  
    return <IosButton style={iosStyle} />  
    #else  
    return <ArkUIButton style={harmonyStyle} />  
    #endif  
  }  
}
Enter fullscreen mode Exit fullscreen mode

2. Functional layer: Core logic multiplexing + Platform API proxy

Strategy

  • Business logic is implemented using JS/TS: such as data processing, network request
  • Platform-specific function packaging: Isolated by interface (such as NotificationService)

Code Example (Notification Service Abstraction) 

// Abstract interface
interface NotificationService {  
  send(title: string, content: string): void;  
}  

// Hongmeng realization
class HarmonyNotification implements NotificationService {  
  send(title, content) {  
    pushManager.sendNotification({ title, content });  
  }  
}  

// Android implementation
class AndroidNotification implements NotificationService {  
  send(title, content) {  
    NotificationCompat.Builder(context, channelId)  
      .setContentTitle(title)  
      .setContentText(content)  
      .show();  
  }  
}
Enter fullscreen mode Exit fullscreen mode

3. Performance layer: Phase-based optimization + Hardware feature utilization

Strategy

  • First screen optimization: Hongmeng is accelerated by static compilation, and iOS is pre-rendered with launchScreen
  • Graphic rendering: Use RenderScript for Android, and use OpenHarmony graphics engine for Hongmeng
  • Background Tasks: Background Tasks for iOS, Deferred Task for Hongmeng

Hongmeng’s unique optimization: distributed task diversion 

// Distribute computing tasks to the tablet (specific to Hongmeng)
if (isTabletConnected()) {  
  taskScheduler.submitToDevice('tablet_id', heavyCalculationTask);  
} else {  
// Local execution
}
Enter fullscreen mode Exit fullscreen mode

4. Practical cases: The three-terminal adaptation path of e-commerce apps📱

Scenario: Shopping cart function is implemented across platforms

1. Interface adaptation

  • Android: The bottom navigation bar is fixed, supports physical return key
  • iOS: Slide the bottom tab bar toggle, swipe left to return
  • Hongmeng: Support gesture navigation, distributed shopping cart synchronization (mobile product selection → tablet settlement)

2. Functional adaptation

  • Pay: Use Alipay/WeChat SDK for Android, Apple Pay for iOS, and HMS Pay for Hongmeng
  • Address Management: The three-end unified data model, synchronized through distributed databases

3. Performance optimization

  • Image Loading: Glide for Android, SDWebImage for iOS, and Image component + memory cache for Hongmeng
  • List rendering: All three ends use virtual lists, Hongmeng additionally supports LazyForEach lazy loading

5. Avoiding pits: "Minefield" of cross-platform development ⚠️

1. Differences in language characteristics

  • ❌ A unique syntax for mixed use (such as iOS @objc reported an error in Hongmeng compiled)
  • ✅ Write core logic in TypeScript/Java, and call the platform API through conditional compilation

2. Permission Management

  • Android: Dynamic permissions (such as cameras, positioning) need to be processed in Activity
  • iOS: Permission requests need to be declared in Info.plist and pop-up window prompt
  • Hongmeng: Declare permissions in module.json5, some of which require manual authorization by users

3. Ecological dependence

  • When the Hongmeng alternative library is missing: 
// Example: Android's EventBus is replaced by custom distributed events in Hongmeng
  class EventBus {  
    static on(event: string, callback: () => void) {  
distributedEvent.on(event, callback); // Hongmeng distributed event
    }  
  }
Enter fullscreen mode Exit fullscreen mode

Summary: Cross-platform development "three-step method"

  1. Abstract layer construction: Use interfaces to isolate platform differences (such as PlatformService)
  2. Core logic sinks: Use JS/TS to implement business logic to avoid forced binding with the platform
  3. Progressive adaptation: First implement basic functions, then optimize platform-specific experience (such as Hongmeng distributed and iOS animation effects)

Top comments (0)