HarmonyOS Card Development Technical Guide

I. Card Development Architecture

1.1 System Service Framework

HarmonyOS Cards are built on a distributed capability framework with a layered architecture:

Application Layer (UIAbility) ↔ Card Service Layer (FormExtensionAbility) ↔ System Service Layer (CardService)

• ​UIAbility: Handles card UI rendering and interaction logic

• ​FormExtensionAbility: Manages card lifecycle and data interaction

• ​CardService: Provides system-level resource scheduling and permission control

1.2 Core Component Model

Card development includes three core components:

1. ​FormBindingData: Data binding container supporting JSON/XML injection

2. ​ComponentProvider: UI component factory for dynamic loading

3. ​EventDispatcher: Central event handler for interactions (clicks/long-presses)

II. Development Workflow & Key Technologies

2.1 Environment Configuration

2.2 Lifecycle Management

Card lifecycle includes six critical phases:

graph TD  
    A[onCreateForm] --> B[onStart]  
    B --> C[onActive]  
    C --> D[onInactive]  
    D --> E[onBackground]  
    E --> F[onDestroy]

• ​Cold Start Optimization: Component pre-loading reduces startup latency by 300ms

• ​State Persistence: UI state maintained via @State annotation

2.3 Dynamic Data Interaction

// Data binding implementation  
@Entry  
@Component  
struct WeatherCard {  
  @State temperature: string = "25℃"  

  build() {  
    Column() {  
      Text(this.temperature)  
        .fontSize(24)  
        .fontWeight(FontWeight.Bold)  
      Text("Sunny")  
        .fontSize(18)  
    }  
  }  
}  

// Data update mechanism  
const formBindingData = new FormBindingData();  
formBindingData.set("temperature", "28℃");  
this.updateForm(formId, formBindingData);

III. Card Types & Implementation

3.1 Service Card Categories

3.2 Advanced Features

3.2.1 Cross-Device Transfer

// Device data synchronization  
const deviceManager = deviceManager.getDefaultDeviceManager();  
deviceManager.on('deviceConnect', (device) => {  
  this.formBindingData.sync(device);  
});

3.2.2 Responsive Layout

// Responsive layout configuration  
@media (min-width: 600px) {  
  .main-container {  
    flex-direction: row;  
  }  
}

IV. Case Studies

4.1 Smart Home Control

// Device control card implementation  
class DeviceControlCard extends Component {  
  @Prop device: DeviceInfo  

  build() {  
    Button("Toggle")  
      .onClick(() => {  
        this.device.togglePower()  
      })  
  }  
}

4.2 Connected Vehicle Applications

• ​HUD Projection Cards: Real-time navigation display

• ​Vehicle Status Monitoring: Battery/Tire pressure visualization

HarmonyOS card development delivers efficient multi-device interaction through innovative distributed architecture and declarative UI frameworks. Strategic use of dynamic data binding ensures functional richness while maintaining performance optimization. With continuous ecosystem enhancements, cards are poised to revolutionize smart home and connected vehicle experiences.