DEV Community

魔眼天王
魔眼天王

Posted on

Comprehensive Guide to Developing HarmonyOS Atomic Services (Practical Implementation)

#harmony

I. Core Understanding of Atomic Services

Atomic Services (formerly known as Atomicized Services) are lightweight service forms unique to HarmonyOS, characterized by three core features:

  1. ​Zero Installation: Users can launch services instantly without downloading packages

  2. ​Multi-device Adaptability: Supports 18+ devices including smartphones, tablets, and smart screens

  3. ​Card-based Interaction: Exposes services through Smart Cards for quick access

Comparison with traditional apps:

Aspect Atomic Services Traditional Apps
Package Size ≤10MB total ≥100MB
Launch Methods 6+ entry points (e.g., Smart Screen search, voice activation) App drawer/icon only
Development ArkTS language + Stage model Full-stack development

II. Development Environment Setup

1. Tool Preparation 

# Install DevEco Studio 4.0+ Download: https://developer.harmonyos.com/cn/develop/deveco-studio # Configure HarmonyOS SDK Select API 11 (NEXT Developer Preview1) or higher
Enter fullscreen mode Exit fullscreen mode

2. Project Creation 

// Project creation workflow File → New → Create Project → Atomic Service → Empty Ability
Enter fullscreen mode Exit fullscreen mode

Key configurations:

  • Package naming: com.example.service

  • Device template: Select Phone/Tablet

  • Enable distributed capabilities: Check "Distributed Data"

III. Core Feature Implementation

1. Home Screen Development (index.ets) 

@Entry @Component struct SmartTool { @State inputText: string = "" @State result: string = "" build() { Column.create() .child(SearchBar({ placeholder: "Enter query...", onInput: (val) => this.inputText = val })) .child(Button("Search").onClick(() => this.executeQuery())) .child(ResultDisplay(this.result)) .width('100%') .height('100%') } private async executeQuery() { if(this.inputText.trim() === "") return this.result = await fetch(`https://api.example.com?q=${encodeURIComponent(this.inputText)}`) } }
Enter fullscreen mode Exit fullscreen mode

2. Data Interaction Implementation 

// Network request encapsulation class ApiService { static async get(url: string): Promise<any> { const response = await fetch(url, { headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + auth.getToken() } }) return response.json() } } // Usage example const data = await ApiService.get('/weather?city=beijing')
Enter fullscreen mode Exit fullscreen mode

IV. Service Card Development

1. Static Card Configuration (widget.ets) 

@Entry @Component struct WeatherCard { @State temperature: number = 22 @State condition: string = "Sunny" build() { GridContainer() { Image($r("app.media.cloud")) .width(40) .height(40) Text(this.temperature + "℃") .fontSize(24) .fontWeight(FontWeight.Bold) Text(this.condition) .fontSize(18) .fontColor(Color.Blue) } .width('100%') .height(120) .padding(8) } }
Enter fullscreen mode Exit fullscreen mode

2. Dynamic Card Interaction 

// Click event handling @Entry @Component struct InteractiveCard { private isExpanded = false build() { Column.create() .child(Button("Expand").onClick(() => this.isExpanded = !this.isExpanded)) .child(ConditionalRender(this.isExpanded, () => DetailView())) .height(this.isExpanded ? '100%' : 120) } }
Enter fullscreen mode Exit fullscreen mode

V. Debugging & Deployment

1. Device Debugging Configuration 

# Generate debug signature ./deveco-cli signing:generate --type debug # Deploy to device ./deveco-cli run --device phone --profile debug
Enter fullscreen mode Exit fullscreen mode

2. AppGallery Submission

  1. ​Certificate Preparation:

  • Create AGC project ID

  • Generate .p12 keystore (≥8 characters password)

  • Upload CSR certificate

  1. ​Build Configuration: 
 // build-profile.json5 { "signingConfigs": { "release": { "certificatePath": "keystore.p12", "certificatePassword": "123456", "alias": "my_alias" } } }
Enter fullscreen mode Exit fullscreen mode
  1. ​Submission Materials:

  • Privacy policy (publicly accessible URL)

  • App icon (1024x1024px SVG)

  • Service documentation

VI. Performance Optimization

  1. ​Resource Management: 
 // Lazy image loading example Image($r("app.media.large_bg")) .loadingPolicy(ImageLoadingPolicy.Lazy)
Enter fullscreen mode Exit fullscreen mode
  1. ​Memory Control:

  • ≤150MB per-page memory usage

  • Use WeakRef for temporary objects

 let cache = new WeakRef({})
Enter fullscreen mode Exit fullscreen mode
  1. ​Launch Acceleration:
  • Preload critical resources 
 // preload.json { "preloads": ["/resources/fonts/main.ttf"] }
Enter fullscreen mode Exit fullscreen mode

Recommendation: Use DevEco Studio's ​Performance Analyzer​ to monitor FPS and memory usage. Test card rendering with ​Device Preview​ mode. Ensure no local storage dependencies during debugging to maintain zero-install compliance.

This practical guide provides essential skills for HarmonyOS Atomic Service development. Start with simple tools and gradually master distributed data management and cross-device interaction. For advanced implementations, refer to Huawei's Atomic Service Development Specifications.

Top comments (0)