DEV Community: lyc233333

🎥 Hongmeng ArkWeb component multimedia practice: the entire strategy from video playback to audio control

lyc233333 — Thu, 26 Jun 2025 14:37:49 +0000

As a developer who has strayed in cross-platform multimedia development, today we will reveal the multimedia capabilities of ArkWeb components!When I first used ArkWeb to implement local video takeover, my colleague thought I used a native player, but in fact I just mastered this magical tool for the integration of Web and native~

1. Video playback: Web and native "stage switching"

1. Play native videos on the web

import { webview } from '@ohos.web.webview';

@Entry
@Component
struct VideoPage {
  private controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column {
// Load a web page with video
      Web({
        src: 'https://harmonyos.com/video-demo',
        controller: this.controller
      })
      .width('100%')
      .height(300)

Button('Enable native player')
        .onClick(() => this.enableNativePlayer())
    }
    .width('100%')
    .padding(20)
  }

// Enable native player takeover
  enableNativePlayer() {
    this.controller.enableNativeMediaPlayer({
      enable: true,
shouldOverlay: true // Native player overwrites the web page
    });

// Register native player to create callbacks
    this.controller.onCreateNativeMediaPlayer((handler, mediaInfo) => {
      if (mediaInfo.type === webview.MediaType.VIDEO) {
return new HarmonyVideoPlayer(handler, mediaInfo); // Return to the native player instance
      }
      return null;
    });
  }
}

2. Native player implementation (core interface)

// Native video player implementation
class HarmonyVideoPlayer implements webview.NativeMediaPlayerBridge {
  private handler: webview.NativeMediaPlayerHandler;
private nativePlayer: VideoPlayer; // Native video component

  constructor(handler: webview.NativeMediaPlayerHandler, mediaInfo: webview.MediaInfo) {
    this.handler = handler;
    this.nativePlayer = new VideoPlayer();
    this.nativePlayer.setSource(mediaInfo.uri);
  }

// Receive playback control of web components
  play() {
    this.nativePlayer.play();
this.handler.handleStatusChanged(webview.PlaybackStatus.PLAYING); // Notify the web status
  }

  pause() {
    this.nativePlayer.pause();
    this.handler.handleStatusChanged(webview.PlaybackStatus.PAUSED);
  }

// Update play area
  updateRect(x: number, y: number, width: number, height: number) {
    this.nativePlayer.setPosition(x, y, width, height);
  }

// Free up resources
  release() {
    this.nativePlayer.release();
  }
}

2. Audio playback: "sound collaboration" between the backend and the frontend

1. Basics of web audio playback

// Web-side JavaScript code
const audio = new Audio('https://harmonyos.com/bg-music.mp3');
audio.loop = true; // Loop play
audio.volume = 0.5; // Volume 50%
audio.play().catch(err => {
console.error('audio playback failed:', err);
});

2. Native audio takeover (backstage playback scenario)

import { webview } from '@ohos.web.webview';

@Entry
@Component
struct AudioPage {
  private controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column {
      Web({
        src: 'https://harmonyos.com/audio-demo',
        controller: this.controller
      })
      .width('100%')
      .height(200)

Button('Enable native audio')
        .onClick(() => this.enableNativeAudio())
    }
  }

  enableNativeAudio() {
    this.controller.enableNativeMediaPlayer({
      enable: true,
ShouldOverlay: false // Audio does not need to overwrite the UI
    });

    this.controller.onCreateNativeMediaPlayer((handler, mediaInfo) => {
      if (mediaInfo.type === webview.MediaType.AUDIO) {
        return new HarmonyAudioPlayer(handler, mediaInfo);
      }
      return null;
    });
  }
}

3. Background audio player (supports lock screen playback)

class HarmonyAudioPlayer implements webview.NativeMediaPlayerBridge {
  private handler: webview.NativeMediaPlayerHandler;
private audioService: AudioService; // Background audio service

  constructor(handler: webview.NativeMediaPlayerHandler, mediaInfo: webview.MediaInfo) {
    this.handler = handler;
    this.audioService = new AudioService();
    this.audioService.setSource(mediaInfo.uri);
    this.audioService.setOnPlayStatusChanged(this.onStatusChange.bind(this));
  }

  play() {
    this.audioService.play();
  }

  pause() {
    this.audioService.pause();
  }

// Key: Handle audio state changes
  private onStatusChange(status: AudioStatus) {
    let playbackStatus: webview.PlaybackStatus;
    switch (status) {
      case AudioStatus.PLAYING: playbackStatus = webview.PlaybackStatus.PLAYING; break;
      case AudioStatus.PAUSED: playbackStatus = webview.PlaybackStatus.PAUSED; break;
      default: playbackStatus = webview.PlaybackStatus.STOPPED;
    }
    this.handler.handleStatusChanged(playbackStatus);
  }
}

3. Camera and microphone: The "sensory interface" of the web

1. Call the camera on the web page (scan the code scene)

// Web page JS code: Request camera permissions
navigator.mediaDevices.getUserMedia({
  video: { width: 640, height: 480 },
  audio: false
}).then(stream => {
  const video = document.getElementById('qrCamera');
  video.srcObject = stream;
  video.play();

// Scan code logic...
}).catch(err => {
console.error('Camera permission denied:', err);
});

2. Application-side permission processing (key configuration)

import { webview } from '@ohos.web.webview';

@Entry
@Component
struct CameraPage {
  private controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Web({
      src: 'https://harmonyos.com/qr-scanner',
      controller: this.controller
    })
    .onPermissionRequest((event) => {
// Process camera permission request
      if (event.request.getName() === 'ohos.permission.CAMERA') {
event.request.grant(); // Authorized camera
      } else if (event.request.getName() === 'ohos.permission.MICROPHONE') {
event.request.grant(); // Authorize microphone
      }
    })
    .width('100%')
    .height('100%')
  }
}

3. Configuration file permission statement

{
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.CAMERA",
        "usedScene": {
          "when": "inUse",
"description": "You need to use a camera to scan the code"
        }
      },
      {
        "name": "ohos.permission.MICROPHONE",
        "usedScene": {
          "when": "inUse",
"description": "Microphone is required for voice input"
        }
      }
    ]
  }
}

4. Multimedia optimization: "Behind the Scenes" of smooth experience

1. Video playback optimization strategy

Optimization items	Web playback plan	Native takeover plan
Stuck processing	Adaptive bit rate	Hardware decoding
Backstage playback	Limited by web page life cycle	Continuous playback of independent processes
Power Consumption Control	Browser Automatic Management	Custom Power Consumption Policy

2. Audio background playback implementation

// Native audio service (backend mode)
class BackgroundAudioService {
  private audioPlayer: AudioRenderer;
  private isBackground: boolean = false;

  init(uri: string, isBackground: boolean) {
    this.isBackground = isBackground;
    this.audioPlayer = new AudioRenderer();
    this.audioPlayer.setSource(uri);

    if (isBackground) {
      this.setupBackgroundMode();
    }
  }

  private setupBackgroundMode() {
// Configure background audio parameters
    this.audioPlayer.setAudioUsage(AudioUsage.MEDIA);
this.audioPlayer.setKeepAlive(true); // Keep active in the background
  }
}

5. Practical cases: The "fusion stage" between live web broadcast and native barrage

1. Architectural Design

┌───────────────┐     ┌───────────────┐     ┌───────────────┐  
│ Web Live Page │──────→│ ArkWeb Component │─────→│ Native Barrage Layer │
│ (Video Streaming + Basic Control) │ │ (Video Takeover) │ │ (Same-layer rendering) │
└───────────────┘     └───────────────┘     └───────────────┘

2. Key code implementation

// Live page component
@Entry
@Component
struct LivePage {
  private controller: webview.WebviewController = new webview.WebviewController();
  @State danmakuList: string[] = [];

  build() {
    Stack() {
// Live web video (native takeover)
      Web({
        src: 'https://harmonyos.com/live-stream',
        controller: this.controller
      })
      .width('100%')
      .height('100%')

// Native barrage layer (floating above the video)
      Column {
        ForEach(this.danmakuList, (text) => {
          Text(text)
            .fontSize(18)
            .fontColor(Color.White)
            .backgroundColor('#50000000')
            .padding(5)
            .margin({ top: 10 })
        })
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .onPageShow(() => {
      this.initLive();
    })
  }

  initLive() {
// Enable native video takeover
    this.controller.enableNativeMediaPlayer({
      enable: true,
      shouldOverlay: true
    });

// Register barrage reception event
    this.controller.on('danmaku', (data) => {
      this.danmakuList.push(data);
      if (this.danmakuList.length > 20) {
this.danmakuList.shift(); // Limit the number of barrages
      }
    });
  }
}

6. Compatibility and security: Multimedia's "Protective Shield"

1. Format compatibility scheme

Format	Web native support	Native takeover support	Recommended solutions
MP4	✅	✅	Priority Web Playback
WebM	✅	✅	Select on Demand
AVI	❌	✅	Must be taken over natively
FLV	❌	✅	Native Takeover

2. Security Policy

Domain Whitelist: Restricting loadable media resource domains
HTTPS Force: All media resources are loaded using HTTPS
Dynamic application for permissions: Dynamic application for permissions when using camera/microphone

Summary: The "Convergence Way" of ArkWeb Multimedia

The ArkWeb component achieves the seamless integration of the Web and native multimedia capabilities through the dual-mode architecture of "web native playback + local takeover".Developers can choose according to the scenario:

Simple video/audio: directly use web page native playback
High performance requirements: Enable native takeover (video hardware decoding, audio background playback)
Interaction enhancement: combine native components (barrage, special effects) to achieve innovative experience

HarmonyOS Stage Model: In-depth analysis of processes, threads and configuration files

lyc233333 — Thu, 26 Jun 2025 14:37:29 +0000

1. The process architecture of the Stage model: the balancing of isolation and efficiency

1. Core design of process model

Process Type	Include Components	Advantages	Application Scenarios
Unified Process	UIAbility/ServiceExtension	Convenient Data Sharing	Interaction with Components in the Module
Independent process	FormExtension/Input method	Safe isolation	Independent functions such as card/Input method
WebView process	Web component rendering	Anti-UI lag	Web page content loading
Custom process	System application exclusive	Resource isolation	High-permission system services

2. Process isolation mechanism

Memory isolation: Independent processes have exclusive memory space, such as FormExtension crashes, does not affect the main process
Permission Isolation: Configure independent permissions through sandbox, if the input method is only available for text permissions
Security Sandbox: API 12+ is enabled by default, can be configured in module.json5:

  {
    "extensionAbilities": [
      {
        "name": ".FormExt",
        "sandbox": {
          "enabled": true,
          "permissions": ["ohos.permission.FORM_DISPLAY"]
        }
      }
    ]
  }

2. Thread model: "Task Scheduling Center" behind the stage

1. Three-thread collaborative working mode

① Main thread (UI thread)

Responsibilities: UI rendering, event processing, life cycle management
Tao: Time-consuming operations (such as network requests) are prohibited, otherwise it will cause UI to be stuck

② TaskPool Worker thread

Features: The system automatically manages thread pools and dynamically adjusts the number of threads
Applicable: Medium-time-consuming tasks such as network requests, data analysis, etc.
Code Example:

  import { taskPool } from '@ohos.thread';

// Submit the task to TaskPool
  taskPool.submit(() => {
const data = fetchNetworkData(); // Network request
EventHub.publish('dataReady', data); // Notify the main thread
  });

③ Worker thread

Features: Developers manually manage life cycles and support long-term operation
Applicable: Time-consuming tasks such as file reading and writing, big data processing, etc.
Code Example:

// Create Worker thread
  const worker = new Worker('worker.js');

// Inter-thread communication
  worker.onmessage = (event) => {
console.log('Worker data received:', event.data);
  };

worker.postMessage('Start Processing File');

2. Inter-thread communication: EventHub actual combat

// Main thread subscribes event
EventHub.on('networkData', (data) => {
this.uiData = data; // Update UI
});

// TaskPool thread release event
taskPool.submit(() => {
  const data = await fetch('https://api.harmony.com/data');
  EventHub.publish('networkData', data);
});

3. Configuration file: Stage's "Stage Building Blueprint"

1. app.json5: application-level global configuration

Key fields	Functions	Configuration examples
bundleName	App-unique ID	"com.example.harmonyapp"
version	version number	"1.0.0"
reqPermissions	Global Permission Statement	["ohos.permission.INTERNET"]

2. module.json5: module-level fine configuration

① Process configuration

{
  "module": {
"process": "com.example.harmonyapp.main", // Custom process name
    "thread": {
      "taskPool": {
"coreSize": 4, // Number of core threads
"maxSize": 8, // Maximum number of threads
"keepAliveTime": 60000 // Thread survival time (ms)
      }
    }
  }
}

② Component process isolation configuration

{
  "extensionAbilities": [
    {
      "name": ".SecureExt",
"process": "com.example.harmonyapp.secure" // Independent process
    }
  ]
}

4. Performance optimization: "Efficient operation tips" on the stage

1. Three principles of process optimization

Lightweight Process: No independent processes are created unless necessary to reduce memory usage
Process Reuse: Extension shared process of the same type (such as multiple Form use the same process)
Sandbox is enabled on demand: Only enable sandbox for security-sensitive components

2. Thread Scheduling Optimization

Optimization	Practice	Effect
Priority settings	taskPool.submit(task, { priority: 2 })	Priority execution of important tasks
Dynamic adjustment of thread count	Dynamic setting of coreSize according to device performance	Adapting to different hardware devices
Time-consuming task split	Large task split into multiple small tasks	Avoid long-term occupation of threads

5. Practical cases: thread management in high concurrency scenarios

Image loading optimization solution

import { taskPool, Worker } from '@ohos.thread';

class ImageLoader {
  private worker: Worker;

  constructor() {
    this.worker = new Worker('imageWorker.js');
    this.worker.onmessage = this.processImageResult.bind(this);
  }

// Main thread call
  loadImage(url: string) {
// Get thumbnails from TaskPool first
    taskPool.submit(() => {
      const thumbnail = getThumbnail(url);
      EventHub.publish('showThumbnail', thumbnail);

// Let Worker process the original image
      this.worker.postMessage(url);
    });
  }

  processImageResult(event: MessageEvent) {
    const fullImage = event.data;
    EventHub.publish('showFullImage', fullImage);
  }
}

6. Safety and stability best practices

1. Process security configuration

{
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.READ_USER_STORAGE",
        "usedScene": {
          "when": "inUse",
"description": "Read photo album pictures"
        }
      }
    ],
    "sandbox": {
      "enabled": true,
"restrictedCapabilities": ["fileSystem"] // Restrict file system access
    }
  }
}

2. Thread exception handling

// TaskPool exception capture
taskPool.submit(() => {
  try {
    dangerousOperation();
  } catch (error) {
console.error('TaskPool exception:', error);
    EventHub.publish('errorOccurred', error);
  }
});

// Worker exception listening
worker.onerror = (error) => {
console.error('Worker error:', error.message);
worker.terminate(); // Destroy Worker in exception
};

Summary: "Stage Management Philosophy" of Stage Model

The HarmonyOS Stage model achieves a balance between performance and security through the "unified process + independent process" architecture; the three-threaded model cooperates with EventHub communication to solve the problem of UI lag; the fine control of the configuration file allows developers to customize the optimal operating environment according to the scenario.Mastering these core mechanisms can build high-performance applications that are coordinated like symphonys and present a smooth user experience on the HarmonyOS stage.

🌐 Crossing the boundaries and integrating the future: Thoughts on ArkWeb empowering new experiences in social applications

lyc233333 — Thu, 26 Jun 2025 14:37:14 +0000

In today's world where social applications are extremely homogeneous, ArkWeb components are like opening up the "arbitrary door" between native and web.This article will use practical cases to analyze how to use ArkWeb to make social applications break through boundaries, realize seamless embedding and cross-platform sharing of web content, and create the next generation of social experience.

1. ArkWeb component: "any web door" for social applications

1. Panoramic view of core capabilities

Ability type	Specific functions	Examples of social application scenarios
Web page loading	Local/online web page rendering	Embed news, blogs, video websites
Interaction control	JavaScript interface call	Web page button triggers native sharing
Data Interoperability	PostMessage Two-way Communication	Web pages deliver sharing content to applications
Security protection	Traceless mode, ad blocking	Protect user privacy
Same-layer rendering	Native components and web mixing	Web content and native UI integration

2. Differences from traditional WebViews

Dimensions	Traditional WebView	ArkWeb Components
Rendering performance	Independent process, easy lag	Rendering in the same layer, fluency is improved by 50%
Native interaction	Limited interface	Full JS-native bidirectional communication
Security mechanism	Basic protection	Domain name whitelist + encrypted transmission
Extension capability	Function fixation	Support plug-in extension

2. ArkWeb practice in social applications: Three-step song for web embedding

1. Basic web page loading (news socialization case)

import { webview } from '@ohos.web.webview';

@Entry
@Component
struct SocialNewsPage {
  private controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column {
// Embed news page
      Web({
        src: 'https://news.harmonyos.com',
        controller: this.controller,
        onPageStarted: () => {
console.log('News page starts loading');
        },
        onPageFinished: () => {
console.log('News page loading is complete');
this.injectShareScript(); // Inject share script
        }
      })
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
  }

// Inject sharing function script
  injectShareScript() {
    this.controller.executeJavaScript(`
// Add a share button to the web page
      const shareBtn = document.createElement('button');
      shareBtn.id = 'socialShareBtn';
shareBtn.textContent = 'Share to social circle';
      document.body.appendChild(shareBtn);

// Binding and sharing events
      document.getElementById('socialShareBtn').addEventListener('click', function() {
        const title = document.title;
        const url = window.location.href;
window.appShare.postMessage({ title, url }); // Call the application sharing interface
      });
    `);
  }
}

2. "Two-way dialogue" between web pages and native

// Receive web messages on the application side
this.controller.on('message', (event) => {
  const message = event.data;
console.log(`Received the web message: ${JSON.stringify(message)}`);

// Process sharing content
  if (message.type === 'share') {
    this.shareToSocialPlatform(message.content);
  }
});

// Share to social platforms
shareToSocialPlatform(content: ShareContent) {
// Call the WeChat sharing API
  wechat.shareToWeChat({
    title: content.title,
    description: content.desc,
    imageUrl: content.imageUrl,
    success: () => {
this.showToast('Shared Successfully');
this.sendToWeb('Shared Successfully'); // Notify the webpage to share the results
    },
    fail: (err) => {
this.showToast('Sharing failed');
this.sendToWeb(`Share failed: ${err.message}`);
    }
  });
}

// The application sends a message to the web page
sendToWeb(message: string) {
  this.controller.postMessage(message);
}

3. Cross-platform sharing: "Information Leap" from web pages to social circles

1. Social Platform API Integration Flowchart

Web content (news/video) → ArkWeb component → Application native sharing module → Social platform API → Moments/Weibo
        ↑                                 ↓  
└───────────────┘

2. Complete implementation of WeChat sharing

import { wechat } from '@ohos.arkui';

// Share components
@Entry
@Component
struct SocialShare {
  @State shareContent: ShareContent = {
    title: '',
    desc: '',
    imageUrl: '',
    url: ''
  };

  build() {
    Column {
// Share preview
      Image(this.shareContent.imageUrl)
        .width(200)
        .height(150)
        .objectFit(ImageFit.Contain)

      Text(this.shareContent.title)
        .fontSize(18)
        .margin({ top: 10 })

      Text(this.shareContent.desc)
        .fontSize(14)
        .margin({ top: 5 })
        .lineClamp(2)

// Share button
Button('Share to WeChat Moments')
        .width('90%')
        .height(50)
        .onClick(() => this.shareToWeChat())
    }
    .padding(20)
    .width('100%')
  }

  shareToWeChat() {
    wechat.shareToWeChat({
scene: wechat.ShareScene.TIMELINE, // Share to friends circle
      title: this.shareContent.title,
      description: this.shareContent.desc,
      thumbImageUrl: this.shareContent.imageUrl,
      targetUrl: this.shareContent.url,
      success: () => {
console.log('WeChat sharing successfully');
this.showToast('Shared Successfully');
      },
      fail: (error) => {
console.error(`WeChat sharing failed: ${error.message}`);
this.showToast('Sharing failed, please try again');
      }
    });
  }
}

4. Deep integration: ArkWeb+ native "new social species"

1. Same-layer rendering: "seamless stitching" between web pages and native UI

@Entry
@Component
struct HybridSocialPage {
  private controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Stack() {
// The underlying web page (video live comment area)
      Web({
        src: 'https://live.harmonyos.com/12345',
        controller: this.controller
      })
      .width('100%')
      .height('100%')

// The upper layer native like button (suspended above the web page)
      Column {
        Button('👍')
          .width(60)
          .height(60)
          .backgroundColor('#FF0000')
          .borderRadius(30)
          .margin({ bottom: 50 })
      }
      .align(Alignment.BottomRight)
    }
    .width('100%')
    .height('100%')
  }
}

2. Data interoperability: Building a "social-Web" data closed loop

// The application delivers user social data to the web page
const userData = {
  nickname: 'HarmonyUser',
  avatarUrl: 'https://avatar.harmony.com/123.png',
socialTags: ['Technology', 'Digital', 'Hongmeng']
};

this.controller.postMessage({
  type: 'userData',
  data: userData
});

// The web page receives user data and displays it
window.appShare.on('message', (data) => {
  if (data.type === 'userData') {
    document.getElementById('userNickname').textContent = data.data.nickname;
    document.getElementById('userAvatar').src = data.data.avatarUrl;
// Render user tags
    renderTags(data.data.socialTags);
  }
});

5. Operational strategy: "value conversion" from traffic to stickiness

1. Personalized content recommendation system

Data dimensions	Collection method	Application scenarios
Web browsing behavior	ArkWeb component burial	Recommend similar web content
Sharing preferences	Sharing API statistics	Optimize sharing material types
Social interaction data	Native social function records	Personalized content aggregation

2. Social fission activity design

Web page content → One-click sharing (get points) → Point redemption (native social function) → Invite friends (web page + native double reward)

Case: Earn points by news sharing

Embed news content on the web page and add the "Share Earn Points" button
After sharing, the ArkWeb notification application will be added to the points system.
Points can be redeemed for membership benefits in native social applications

6. Future Outlook: ArkWeb-driven "Social Metaverse"

1. Three frontier directions

🌐 Web Game Socialization

ArkWeb embeds HTML5 games to realize "talk while playing"
Case: Social apps are embedded in Landlord games, supporting friend battles + voice chat

📺 Live broadcast interaction

ArkWeb loads live streams, native components provide gift and barrage functions
Technical points: live streaming and native UI rendering at the same level, interactive data synchronization in both directions

🕶️ Metaverse social scene

ArkWeb loads 3D virtual scenes, native components control virtual avatars
Case: Social applications are embedded in virtual exhibitions, users log in to roam through their native account

2. Technology evolution roadmap

Current stage (2023): Web page embedding + basic sharing → Next stage: same-layer rendering + data closed loop → Future: Web native fusion + meta universe

7. Practical combat pit avoidance guide

1. Three principles of performance optimization

Lazy Loading: Lazy Loading of non-home page content
Resource preload: Shared materials are cached in advance
Memory Monitoring: Clean the ArkWeb cache regularly

2. Key points of safety protection

Domain Whitelist: Restrict embeddable web domain names
JS interface permission control: Only necessary native interfaces are opened
Data encryption: Cross-end transmission of data encryption processing

Conclusion

ArkWeb components are reshaping the boundaries of social applications, from a simple information sharing platform to a fusion space of "Web content + native experience".In the future, with the continuous evolution of ArkWeb's capabilities, social applications will become a super entrance to connect all digital services, truly realizing the experience vision of "crossing boundaries and integrating the future".

🔗 HarmonyOS Deep Linking Practical Practical Practice: "Digital Key" that flexibly defines link rules

lyc233333 — Thu, 26 Jun 2025 14:36:56 +0000

As a developer who was once trapped by rules in application jumps, today I want to reveal the flexible gameplay of Deep Linking!When I first used a custom scheme to achieve cross-application jump, my colleague thought I had changed the underlying layer of the system, but in fact I just mastered the skills of using this "master key" ~

1. Deep Linking: "Arbitrary Door Key" between the application

1. What is Deep Linking?

Imagine you have a string of master keys:

Traditional jumps are like fixed keys, and can only open specific door locks (fixed application)
Deep Linking is like a master key, customize the key shape (scheme) which door you want to open which door you want

HarmonyOS's Deep Linking core capabilities:

Custom protocol: Define the door opening rules yourself (such as myapp://)
Parameter transfer: Open the door with parameters (such as myapp://product?id=123)
Flexible adaptation: You can jump to the browser when there is no application installed (alternative door opening solution)

2. Three core features

Features	Traditional Jump	Deep Linking
Protocol Definition	System Fixation	Customization (such as `shop://`)
Parameter support	Simple pass	Complex parameter structure
Not installed processing	Cannot jump	Browser or download page can be jumped

2. Implementation principle: "making process" of master key

1. Target application key module (register URL skill)

// key module in module.json5
{
  "module": {
    "abilities": [
      {
        "skills": [
          {
            "uris": [
              {
"scheme": "food", // Custom protocol name (key shape)
"host": "map", // Domain name (lock type)
"path": "/location" // Path (keyhole location)
              }
            ]
          }
        ]
      }
    ]
  }
}

2. The initiator sets up the key (constructs the link)

// Construct the door opening key (Deep Linking link)
const link = "food://map/location?lat=39.9&lng=116.4&address=Wangfujing";

3. System unlock (match jump)

The system presses "key shape" (scheme) to find matching applications
After finding it, press "Keyhole Position" (path) to open the corresponding page
Jump to the browser when no application is found (alternative solution)

3. Practical configuration: "Customization Guide" for key molds

1. Detailed explanation of URL skill parameters

Parameters	Functions	Examples
scheme	protocol name (key shape)	"food"
host	Domain name (lock type)	"map"
path	path (keyhole location)	"/location"
pathStartWith	Path prefix matching	"/api/"
pathRegex	path regular matching	"/product/\d+"

2. Complex matching example (supports regularity)

{
  "uris": [
    {
      "scheme": "shop",
      "host": "product",
"pathRegex": "/detail/\\d+" // Match /product/detail/123 and other paths
    }
  ]
}

Match link example:
shop://product/detail/123 → Match successfully
shop://product/detail/abc → Match failed

Four, three ways to unlock the lock: "Using skills" of the key

1. openLink interface: directly insert the key and open the door

import { common } from '@ohos.app.ability.common';

// Open the map application with the key
const context = this.getContext(this) as common.UIAbilityContext;
const link = "geo://map/location?lat=37.77&lng=122.42";
context.openLink(link, { appLinkingOnly: false }); // Allow Deep Linking

2. startAbility interface: open the door with parameters

import { common } from '@ohos.app.ability.common';

// Open the product details page with parameters
const want = {
  action: 'ohos.want.action.viewData',
  uri: "shop://product/detail/123",
parameters: { from: 'cart' } // Extra parameters
};
context.startAbility(want);

3. Web component interception: insert keys in web pages

import { webview } from '@ohos.arkweb';

// Identify Deep Linking on the web page and jump
this.controller.onLoadIntercept((event) => {
  const url = event.data.getRequestUrl();
  if (url.startsWith("shop://")) {
context.openLink(url); // Jump to the corresponding application
return true; // Prevent web page from loading
  }
});

5. Practical scenario: "Application Cases" of Keys

1. Takeaway app jump to map (navigate to store)

// Construct Deep Linking with coordinates
const shopLink = "geo://map/location?lat=39.9&lng=116.4&shopName=Haidilao";

// Jump the map application
context.openLink(shopLink, { appLinkingOnly: false });

2. Social sharing with reference page (product sharing)

// Generate sharing link with product ID
const shareLink = `shop://product/detail/123?from=social&userId=567`;

// Share to WeChat
shareToWeChat(shareLink);

// Processing by the receiver
onCreate(want) {
  const productId = url.URL.parseURL(want.uri).params.get('id');
  loadProductDetail(productId);
}

6. Safety precautions: "Anti-theft guide" for keys

1. Three measures to prevent malicious counterfeiting

scheme naming anti-conflict:
Written in reverse with the company domain name (such as com.example.shop)
❌ Danger naming: map ✅ Safe naming: com.example.map
Parameter encryption transmission:
Sensitive parameter encryption (such as token=encrypted string)
Backend verification source:
In-app verification link source domain name

2. Not installed processing best practices

context.openLink(link, {
  appLinkingOnly: false,
openInBrowser: true, // Open the browser when it is not installed
browserUrl: "https://shop.com/product/123" // Custom browser opening address
});

7. The difference from App Linking: "Level Difference" of Keys

Comparison	Deep Linking	App Linking
Protocol Type	Custom Scheme	HTTPS Standard Protocol
Security	Easily fake	Domain name verification + HTTPS encryption
Applicable scenarios	Internal jump of enterprises	External sharing and advertising traffic
Not installed processing	Need to custom processing	Automatic jump to the application market

The last thought

I remember when I used Deep Linking for social sharing for the first time, my custom share:// protocol was criticized by my colleagues for being like "black magic". Now I use this solution to achieve seamless jump between various applications. The user said "It's as convenient as magic."

🔒 HarmonyOS App Linking Practical Practice: A Guide to HTTPS Security Jump

lyc233333 — Thu, 26 Jun 2025 14:36:38 +0000

1. Core advantages of App Linking

1. Triple safety guarantee

Domain name verification: Verify domain name ownership through the server applinking.json file
HTTPS Encryption: All links are transmitted using the HTTPS protocol
Anti-forgery mechanism: Automatically direct browser for illegal domain name jump

2. Cross-scene capability

Scenarios	Application Examples	Advantages
Scan the QR code to go directly	Scan the QR code to open product details	Anti-malice links
Social Sharing	Share in-app page to social platform	Open directly after installing, jump to download page without installing
Advertising traffic	Click on ads to go directly to in-app activities	Accurate tracking of sources

2. Four-step process for accessing

1. AGC console activation service

Log in to AGC and enter "Growth > App Linking" to open the service
Record the app ID of the app (in "Project Settings > General")

2. Server configuration verification file

Create .well-known/applinking.json on the domain name server`
File content example: json { "app_id": "your_app_id_here" }

3. AGC associated domain name

Fill in the application's URL domain name in AGC (such as harmony.example.com)
Turn on domain name verification and publish, waiting for system verification

4. Process links in-app

`typescript
import { UIAbility, Want } from '@ohos.app.ability.common';
import { url } from '@ohos.arkts';

export default class EntryAbility extends UIAbility {
onCreate(want: Want) {
const uri = want.uri;
if (uri) {
const urlObj = url.URL.parseURL(uri);
const action = urlObj.params.get('action');
switch(action) {
case 'product': this.openProductDetail(urlObj.params.get('id'));
case 'event': this.openEventPage(urlObj.params.get('eventId'));
}
}
}
}
`

3. Safe jump implementation

1. Initiate App Linking jump

`typescript
import { common } from '@ohos.app.ability.common';

const context = this.getContext(this) as common.UIAbilityContext;
const link = 'https://harmony.example.com/shop/product?id=123';
const options = {
appLinkingOnly: true, // Force use of App Linking
openInBrowser: true // Redirect the browser when the domain name verification fails
};
context.openLink(link, options);
`

2. No processing logic installed

The system will automatically handle uninstalled situations:

The domain name verification has been passed but the application is not installed → Jump to the application market download page
Domain name verification failed → Open the browser to access the link directly

4. Practical scenario examples

1. Scan the QR code to go to the product page

typescript // Generate App Linking with Parameters const generateProductLink = (productId: string) => { returnhttps://harmony.example.com/product?id=${productId}&action=view`;
};

// Scan the code and jump
context.openLink(generateProductLink('P001'), { appLinkingOnly: true });
`

2. Social sharing with reference page

`typescript
// Share link with reference
const shareLink = 'https://harmony.example.com/event?eid=567&from=social';
shareToWeChat(shareLink);

// In-app processing sharing link
onCreate(want) {
const eid = url.URL.parseURL(want.uri).params.get('eid');
this.loadEventDetail(eid);
}
`

5. Development precautions

Domain name configuration
HTTPS protocol must be used
Verification files must be placed under .well-known in the root directory of the server
Security of Parameters
Sensitive parameters are recommended to be encrypted and placed in the URL
Preferred to pass parameters using URL Query instead of Path
Compatibility
API 12 and above support
Older versions of devices are automatically downgraded to normal Deep Linking

Summarize

App Linking achieves secure and reliable inter-application jump through domain name checksum HTTPS encryption.Developers only need four steps to configure (AGC activation → server verification → domain name association → in-app processing) to provide a safe one-click direct experience in scenarios such as scanning codes and sharing, and automatically handle uninstalled scenarios to improve user conversion rate and security.

🔧 HarmonyOS system features are convenient to access: seamless calls from camera to settings

lyc233333 — Thu, 26 Jun 2025 14:36:22 +0000

1. System Picker component: "Quick Channel" for resource selection

1. Camera and Scan Code (CameraPicker)

Function: Take photos, record video, scan code, and identify documents
Core parameters:
type: PICTURE (photo taken)/VIDEO (video recording)/BARCODE (scan code)
quality: picture quality (HIGH/MEDIUM/LOW)

import { CameraPicker } from '@ohos.arkui.ability.camera';

const cameraPicker = new CameraPicker();
cameraPicker.startCamera({
  type: CameraPickerType.PICTURE,
  quality: CameraQuality.HIGH,
  onResult: (data) => {
const imageUri = data.uri; // Photo result URI
  }
});

2. File Management (DocumentViewPicker)

Function: Select documents, audio, video and other files
Core parameters:
type: ALL (all)/DOCUMENT (document)/AUDIO (audio)

import { DocumentViewPicker } from '@ohos.arkui.ability.filemanager';

const documentPicker = new DocumentViewPicker();
documentPicker.startDocumentView({
  type: DocumentViewPickerType.DOCUMENT,
  onResult: (data) => {
const fileUri = data.uri; // Selected file URI
  }
});

3. ContactsPicker

Function: Select contact information
Core parameters:
type: ALL (all)/PHONE (phone)/EMAIL (email)

import { ContactsPicker } from '@ohos.arkui.ability.contacts';

const contactsPicker = new ContactsPicker();
contactsPicker.startContacts({
  type: ContactsPickerType.ALL,
  onResult: (data) => {
const contactInfo = data; // Contact name, phone number and other information
  }
});

2. System function interface: direct core capability

1. SettingAbility

Jumping method: Pull up through Action
Core parameters:
- action：'ohos.intent.action.SHOW_SETTINGS'
uri: Set page identity (such as appsetting/wifi)

import { common } from '@ohos.app.ability.common';

const want = {
  action: 'ohos.intent.action.SHOW_SETTINGS',
uri: 'wifi' // Turn on WiFi settings directly
};
context.startAbility(want);

2. Make a phone call (TelephonyKit)

Permission: ohos.permission.CALL_PHONE required
Core interface: makeCall(phoneNumber)

import { Telephony } from '@ohos.arkui.ability.telephony';

const telephony = Telephony.getTelephony();
telephony.makeCall('10086'); // Call customer service

3. CalendarAbility

Jumping method: Pull up through Action
Parameter extension: Can carry date parameters to target the specified date

import { common } from '@ohos.app.ability.common';

const want = {
  action: 'ohos.intent.action.SHOW_CALENDAR',
parameters: { date: '2023-12-31' } // Open the specified date
};
context.startAbility(want);

3. Key points of development

1. Permission processing

Functions	Required Permissions	Description
Camera	`ohos.permission.CAMERA`	Photo/video must be taken
Contact	`ohos.permission.READ_CONTACTS`	Read contact information
Make a call	`ohos.permission.CALL_PHONE`	Direct dialing required

2. Result callback processing

// Unified result processing mode
{
  onResult: (data) => {
    if (data.success) {
      processData(data.result);
    } else {
showToast('Action Cancel');
    }
  },
  onError: (code, msg) => {
console.error(`Error code ${code}: ${msg}`);
  }
}

3. System application adaptation

Different device system application versions may be different, exception handling is required
Priority is given to the use of system Picker components, compatibility is better than direct jump

Summarize

HarmonyOS provides the ability to easily access cameras, files, contacts and other system functions through system Picker components and specific interfaces.During development, you need to pay attention to permission application, result callback processing and device compatibility. Use startAbility and system components reasonably to create a smooth system function call experience and improve application practicality and user experience.

🎙️ HarmonyOS typed application pull up: Let users choose their own collaboration tools

lyc233333 — Thu, 26 Jun 2025 14:36:06 +0000

1. Vertical application types and core parameters

1. Navigation class application (type `navigation`)

Parameter name	Type	Required	Description
sceneType	number	Yes	1-Route Planning 2-Navigation 3-Location Search
destinationLatitude	number	Yes	End Latitude
destinationLongitude	number	Yes	End Longitude
vehicleType	number	No	0-Driving 1-Walk 2-Cycling 3-Bus

Code Example

const wantParam = {
  sceneType: 1,
  destinationLatitude: 39.9042,
  destinationLongitude: 116.4074,
  vehicleType: 0
};
context.startAbilityByType("navigation", wantParam, callback);

2. Financial applications (type `finance`)

Parameter name	Type	Required	Description
sceneType	number	Yes	1-Transfer 2-Credit Card Repayment
bankCardNo	string	No	Bank Card Number

Code Example

const wantParam = {
  sceneType: 1,
  bankCardNo: "6222021100012345678"
};
context.startAbilityByType("finance", wantParam, callback);

2. Media and file processing types

1. Image editing (type logo `photoEditor`)

// Pull up the image editing application and pass the image URI
const wantParam = {
  uri: "file:///sdcard/photo.jpg"
};
context.startAbilityByType("photoEditor", wantParam, (result) => {
const editedUri = result?.uri; // Process the edited image URI
});

2. File processing (pull up through Action)

// Open the text file
const want = {
  action: "ohos.want.action.viewData",
  uri: "file:///sdcard/doc.txt",
  type: "general.plain-text",
  flags: common.WantConstant.Flags.FLAG_AUTH_READ_URI_PERMISSION
};
context.startAbility(want);

3. Mail application (type `mail`)

Parameter name	Type	Description
email	string[]	recipient's email
subject	string	email subject
body	string	email text
stream	string[]	Attachment URI List

Code Example

const wantParam = {
  email: ["user@example.com"],
subject: "Feedback Email",
body: "Problem description...",
  stream: ["file:///sdcard/attachment.jpg"]
};
context.startAbilityByType("mail", wantParam, callback);

4. Core points of development

Type identification specification
The system-defined type identifier must be used (such as navigation/finance)
Custom types need to declare skills in the configuration file
Callback processing

   const callback = {
onResult: (data) => { /* Processing returns result */ },
onError: (code, msg) => { /* Error handling */ }
   };

Permission Control
File class operations require the FLAG_AUTH_READ_URI_PERMISSION and other permission flags
It is recommended to add additional permission verification for sensitive operations (such as financial transfers).

Summarize

Through the startAbilityByType interface, HarmonyOS implements typed application pulling, allowing users to independently select applications of the same type (such as map/bank/editor).During development, you need to pay attention to type identification accuracy, parameter integrity and callback processing. Combined with WantParam, you can create a flexible application collaboration experience.

🔬 HarmonyOS precision control application: three major jump methods to combat

lyc233333 — Thu, 26 Jun 2025 14:35:51 +0000

1. Three accurate jump solutions

1. openLink: URL reaches target directly

Core role: Open the target application specified page directly through URL
Standard points:
link: Target URL (such as map coordinates geo:39.9, 116.4)
options.appLinkingOnly: Whether to jump with App Linking only

// Open the map to view coordinates
context.openLink('geo:39.9042,116.4074', { appLinkingOnly: false });

2. startAbility: precise control of Want object

Core Advantages: Support more parameter configurations, higher flexibility
Key parameters:
action: Target action (such as ohos.want.action.viewData)
uri: Target URI (such as mailto:user@example.com)

// Reply email application to send feedback
const want = {
  action: 'ohos.want.action.sendToData',
uri: 'mailto:support@harmony.com?subject=feedback',
  entities: ['entity.system.browsable']
};
context.startAbility(want);

3. Web component interception and jump

Applicable scenarios: Intercept specific protocol jumps in WebView native applications
Core Logic: Intercept URLs and process them through onLoadIntercept

// Intercept weather protocol jumps to weather application
controller.onLoadIntercept((event) => {
  const url = event.data.getRequestUrl();
  if (url.startsWith('weather:')) {
context.openLink(url); // Jump weather application
return true; // Prevent web loading
  }
});

2. Version compatibility instructions

Features	API 12+ Support	API 11 and before
Explicit Ability jump	❌ (Abandoned)	✅ (BundleName required)
App Linking	✅	❌
Deep Linking	✅	✅

3. Practical best practices

Not installed processing
Check whether the application exists before jumping:
common.getAbilityInfo({ bundleName: 'com.target.app' })
Security of Parameters
Sensitive parameters are passed through Want.parameters instead of URI
App Linking preferentially uses HTTPS protocol
User Experience Optimization
Provide application selection instructions when type jump
A clear error message is given when the jump fails

Summarize

HarmonyOS provides three precise jump methods: openLink/startAbility/Web interception. Developers can choose according to the scene: directly connect to the URL, startAbility for complex parameter control, and interception for web scenarios.Pay attention to the differences in API versions, do uninstalled processing and parameter security control to achieve a smooth cross-application collaboration experience.

🛒 Hongmeng Distributed Mall Development Streamline Guide: Core Architecture and Practical Points

lyc233333 — Thu, 26 Jun 2025 14:35:20 +0000

1. Overview of the project core architecture

1. Distributed Scenario Positioning

Multi-device collaboration: mobile phone (interactive core), tablet (large screen display), watch (fast operation)
Core requirements: real-time shopping cart synchronization, cross-device settlement, multi-terminal state maintenance

2. Four-layer architecture design

Front-end display layer (UI for each device) → Business logic layer (distributed services) → Data storage layer (distributed database) → Device management layer (task scheduling + security)

3. Service Splitting Principle

Products and services (display/search), shopping cart services (cross-device synchronization), payment services (safety priority)

2. Distributed data synchronization core

1. Key points of data model

Shopping cart model contains fields such as user ID, product list, total price, update time, etc.
Use DistributedData to achieve real-time cross-device synchronization

2. Synchronization Policy

Combination of local cache + distributed storage, update locally first and then synchronize remotely
Subscribe to data change events and refresh the UI of each device in real time

3. Cross-device task scheduling

1. Task allocation principle

Calculate tasks to tablets/mobile phones, pay tasks to mobile phones (safety)
Intelligent scheduling based on device type (tablet/phone/wearable)

2. Core Process

Watch start settlement → 2. Tablet calculate total price → 3. Mobile phone start payment → 4. All devices synchronize order status

4. Key points of multi-device UI adaptation

1. Responsive Design

Grid layout for tablets, and list layout for mobile phones/watches
Detect device type through tool functions such as isTabletDevice()

2. Component adaptation example

Shopping cart list: double-row display on tablets, simplified into single-row cards

5. Distributed payment process

1. Security-first policy

Payment tasks are forcibly distributed to mobile phone devices to avoid sensitive operations such as watches and other low-security devices
Payment password encrypted storage, combining device ID and user ID to generate encryption keys

2. Cross-device process

Watch click to settle → Mobile phone receive tasks to adjust payment SDK → All devices synchronize order status

6. Safety and performance optimization

1. Core security measures

Sensitive data encryption storage (EncryptedStorage)
Dynamic permission application (key permissions such as payment/storage)

2. Performance optimization results
| Optimization | Improvement |
|--------------|------------|

| Startup Time | 46.7% |
| Cart Loading | 61.1% |
| Cross-device synchronization | 75% |

7. Practical Golden Rules

Data first: Design a distributed data model first, and then develop functions
** Device adaptation**: Start designing from a small screen (watch) and then expanding to a large screen
Task Diversion: Assign tasks according to device capabilities to avoid centralized calls

Tip avoidance tips:

Avoid overdistributed, and local processing is preferred for simple functions
All cross-device calls must include a retry mechanism

🏷️ Huawei Hongmeng Stage model practical combat: building a super application that combines devices and collaborates

lyc233333 — Thu, 26 Jun 2025 14:35:05 +0000

As a developer who has been busy in multi-device development, today I want to share the ultimate practical battle of the Stage model!The smart home APP made with this solution can control mobile phones, tablets, and watches at the same time. Now, the "clearance secrets" of cross-device collaboration are fully disclosed~

1. Multi-device Collaboration: The "Distributed Stage" of the Stage Model

1. Equipment role division (analogous to band division)

Device Type	Role Positioning	Stage Model Application
Mobile	Lead singer (interactive core)	Main Stage, manage global status
Tablet	Guitarist (large screen display)	Substage Stage, extended display content
Watch	Drummer (data acquisition)	ExtensionAbility, real-time data acquisition
Smart speakers	Bassist (voice interaction)	ServiceExtension, backend service

2. Core capabilities of distributed stages

Components cross-device migration: Stage is like a mobile stage, and components can "tour" between devices
Real-time data synchronization: Data between the Stage of each device is like a tacit cooperation between band members
Task Intelligent Scheduling: Assign tasks according to device capabilities, such as calculating the heart rate of the watch, and displaying the results on the mobile phone

2. System architecture: "Building a Blueprint" for the distributed stage

1. Hierarchical architecture design

┌───────────────┐     ┌───────────────┐     ┌───────────────┐  
│ Mobile Phone Main Stage │──────│ Tablet Sub Stage │──────→│ Watch Extension│
│ (UIAbility)   │     │ (UIAbility)   │     │ (ServiceExt)  │  
└───────────────┘     └───────────────┘     └───────────────┘  
       │                    │                    │  
       ▼                    ▼                    ▼  
┌───────────────┐     ┌───────────────┐     ┌───────────────┐  
│ Distributed Task Scheduling │ │ Data Synchronization Center │ │ Equipment Capability Management │
└───────────────┘     └───────────────┘     └───────────────┘

2. Device discovery and connection combat

import { distributedDevice } from '@kit.DistributedDeviceKit';

// Discover peripheral equipment (like a band looking for teammates)
distributedDevice.discoverDevices().then((devices) => {
  devices.forEach((device) => {
console.log(`Discover device: ${device.deviceId}, type: ${device.deviceType}`);

// Assign Stage roles according to device type
    if (device.deviceType === 'phone') {
      this.assignMainStage(device);
    } else if (device.deviceType === 'tablet') {
      this.assignExtensionStage(device);
    }
  });
});

// Connect the device
async function connectToDevice(deviceId: string) {
  const result = await distributedDevice.connect(deviceId);
  if (result) {
console.log(`Successfully connected to device: ${deviceId}`);
  }
}

3. Stage model cross-device application: component "tournament"

1. Main Stage (mobile terminal): Stage Commander

import { UIAbility, distributedTask } from '@ohos.app.ability';

export default class MainStage extends UIAbility {
  onCreate() {
console.log('Main Stage starts, starts assignment of tasks');

// Assign display tasks to the tablet (like the lead singer to part of the guitarist)
    this.assignTabletTask();

// Assign data acquisition tasks to the watch
    this.assignWatchTask();
  }

  assignTabletTask() {
// Find available tablets
    distributedDevice.findDeviceByType('tablet').then((tabletId) => {
      if (tabletId) {
// Start Stage across devices (send a show invitation to the tablet)
        const want = {
          deviceId: tabletId,
          bundleName: 'com.example.multidevice',
          abilityName: 'TabletStage'
        };
        distributedTask.startAbility(want);
      }
    });
  }
}

2. Substage Stage (tablet): large screen display

import { UIAbility } from '@ohos.app.ability';

export default class TabletStage extends UIAbility {
  onStart(want) {
console.log('Plate Stage starts, receives the main Stage task');

// Subscribe to the main Stage data (like the guitarist listening to the lead singer's rhythm)
    this.subscribeMainStageData();
  }

  subscribeMainStageData() {
    const eventHub = this.context.eventHub;
    eventHub.on('mainStageData', (data) => {
// Update the flat panel display (play the guitar according to the lead vocal rhythm)
      this.updateDisplay(data);
    });
  }
}

3. ExtensionAbility (watch end): data acquisition

import { ServiceExtensionAbility } from '@ohos.app.ability';

export default class WatchService extends ServiceExtensionAbility {
  onCreate() {
console.log('Watch service starts, starts collecting data');

// Acquire heart rate regularly (like drummer beats)
    setInterval(() => {
      const heartRate = this.getHeartRate();
      this.sendToMainStage(heartRate);
    }, 1000);
  }

  sendToMainStage(data: number) {
    const eventHub = this.context.eventHub;
    eventHub.publish('heartRateData', data);
  }
}

4. Distributed task scheduling: the "conductor" of the stage

1. Task assignment strategy (analogous to band conductor)

Task Type	Assignment Principles	Implementation Method
High computing tasks	Give devices with strong computing power (tablet/mobile phone)	distributedTask.assign
Real-time data acquisition	Give to nearby equipment (watch/bracelet)	Priority allocation after equipment is discovered
Display tasks	Give large screen devices (flat-panel/TV)	Select equipment based on screen size

2. Task Scheduling Practical Code

import { distributedTask } from '@kit.DistributedTaskKit';

class TaskScheduler {
  scheduleTask(taskType: string, data: any) {
// Check the list of available devices (such as conductors to see the status of band members)
    distributedDevice.getOnlineDevices().then((devices) => {
//Select equipment according to the task type (the command decides who will play)
      const targetDevice = this.chooseDeviceByTaskType(taskType, devices);

      if (targetDevice) {
// Assign tasks (command command)
        distributedTask.schedule({
          deviceId: targetDevice.id,
          taskName: taskType,
          taskData: data
        }).then(() => {
console.log(`task${taskType} has been assigned to device${targetDevice.id}`);
        });
      }
    });
  }

  chooseDeviceByTaskType(taskType: string, devices: Device[]) {
// High computing tasks for tablets
    if (taskType === 'highCompute') {
      return devices.find(d => d.deviceType === 'tablet');
    }
// Collect it in real time for the watch
    if (taskType === 'realtimeCollect') {
      return devices.find(d => d.deviceType === 'wearable');
    }
// Default to mobile phone
    return devices.find(d => d.deviceType === 'phone');
  }
}

5. Cross-device UI adaptation: "Variety Magic" of Stage Set

1. Responsive layout (different equipment and different sets)

@Entry
@Component
struct CrossDeviceLayout {
  @State deviceType: string = 'phone';

  build() {
    Column() {
// Mobile layout (small stage set)
      if (this.deviceType === 'phone') {
Text('Mobile Interface')
          .fontSize(20)

Button('Send to Tablet')
          .onClick(() => this.sendToTablet())
      }
// Tablet end layout (large stage set)
      else if (this.deviceType === 'tablet') {
        Grid() {
Text('Big interface of tablet end')
            .gridArea('header')

          List() {
// Large list layout...
          }
          .gridArea('content')
        }
        .columnsTemplate('1fr')
        .rowsTemplate('50px 1fr')
        .gridAreas('"header" "content"')
      }
    }
    .width('100%')
    .height('100%')
    .onPageShow(() => {
this.detectDeviceType(); // Change the set of detection device type
    })
  }

  detectDeviceType() {
// Detect the current device type
    this.deviceType = distributedDevice.getLocalDeviceType();
  }
}

2. Cross-device component migration (actors change stage)

// Migrate components to tablet in the main Stage
function migrateComponentToTablet() {
  const want = {
    deviceId: 'tablet123',
    bundleName: 'com.example.app',
    abilityName: 'TabletAbility',
    parameters: {
componentData: this.componentData // Pass component data
    }
  };

// Start the tablet Stage and pass component data (the actor takes props to the tablet stage)
  distributedTask.startAbility(want);
}

6. Data synchronization: "Score Sharing" between stages

1. Distributed Data Center Design

┌───────────────────┐     ┌───────────────────┐     ┌───────────────────┐  
│ Mobile Data Center │───────→│ Tablet Data Center │──────→│ Watch Data Center │
│ (AppStorage)       │     │ (AppStorage)       │     │ (LocalStorage)     │  
└───────────────────┘     └───────────────────┘     └───────────────────┘  
       │                    │                    │  
       ▼                    ▼                    ▼  
┌───────────────────┐     ┌───────────────────┐     ┌───────────────────┐  
│ Data synchronization service │ │ Conflict resolution module │ │ Local caching policy │
└───────────────────┘     └───────────────────┘     └───────────────────┘

2. Real-time synchronization of practical code

import { distributedData } from '@kit.DistributedDataKit';

// Initialize the distributed data center
class DataCenter {
  constructor() {
// Start the data synchronization service (like the band unified score)
    this.initSyncService();

// Subscribe to changes in data of each device
    this.subscribeDeviceData();
  }

  initSyncService() {
    distributedData.init({
syncInterval: 500, // 500ms synchronize once
conflictResolver: this.resolveConflict // Conflict Resolution Function
    });
  }

  subscribeDeviceData() {
// Subscribe to mobile data
    distributedData.subscribe('phoneData', (data) => {
      this.updateAllDevices('phoneData', data);
    });

// Subscribe to tablet data
    distributedData.subscribe('tabletData', (data) => {
      this.updateAllDevices('tabletData', data);
    });
  }

  updateAllDevices(key: string, data: any) {
// Synchronize data to all devices (band members synchronize scores)
    distributedData.syncToAll(key, data);
  }
}

7. Security and Permissions: The "Security Check System" of the Stage

1. Cross-device permission control

Permission type	Control method	Implementation code
Device Access	Whitelist Mechanism	distributedDevice.authorize
Data operation permissions	Role-based access control	Custom permission verification
Task execution permissions	Dynamic permission application	context.requestPermission

2. Secure communication practice

import { distributedSecurity } from '@kit.DistributedSecurityKit';

// Equipment certification (security check admission)
async function authenticateDevice(deviceId: string) {
// Generate temporary key (security check pass)
  const key = await distributedSecurity.generateKey();

// Send authentication request
  const result = await distributedSecurity.authenticate(deviceId, key);

  if (result) {
console.log(`device${deviceId} authentication passed`);
    return true;
  }
  return false;
}

// Encrypted data transmission (encrypted music score transmission)
function sendEncryptedData(deviceId: string, data: any) {
  const encryptedData = distributedSecurity.encrypt(data);
  distributedData.sendToDevice(deviceId, encryptedData);
}

8. Practical case: Smart home cross-device control

1. Scene description

Turn on "Home Mode" on your phone, and at the same time: ✅ Flat panel display welcome interface ✅ Watch reminds that the door lock is open ✅ Smart speakers play welcome voice

2. Stage model implementation

// Mobile phone main Stage (Commander General)
onClickHomeMode() {
// Send instructions to tablets (Tablet Stage displays the welcome page)
  this.sendToTablet({ type: 'welcomePage' });

// Give instructions to watches (watch Extension reminder)
  this.sendToWatch({ type: 'unlockAlert' });

// Send commands to the speaker (speaker service plays voice)
  this.sendToSpeaker({ type: 'welcomeVoice' });
}

// Cross-device command sending
sendToDevice(deviceId: string, command: any) {
  const want = {
    deviceId,
    bundleName: 'com.example.smartHome',
    parameters: { command }
  };
  distributedTask.startAbility(want);
}

9. Performance optimization: "Efficient operation" of the stage

1. Multi-device startup optimization

Optimization items	Traditional methods	After Stage model optimization	Improvement range
Cross-device startup time	Average 3 seconds	Average 1.2 seconds	60%
Data synchronization delay	Average 800ms	Average 300ms	62.5%

2. Start the framework optimization code

// AppStartup configuration (multi-device startup acceleration)
{
  "startupTasks": [
    {
      "name": "deviceDiscovery",
      "priority": 5,
      "parallel": true,
      "deviceTypes": ["phone", "tablet", "wearable"]
    },
    {
      "name": "dataSyncService",
      "priority": 4,
      "dependsOn": ["deviceDiscovery"]
    }
  ]
}

The last thought

When I used the Stage model to make multiple device applications for the first time, the data between devices was not synchronized for three days. Now I use a distributed data center + EventHub, and cross-device synchronization is as smooth as local operation. It is recommended that novices start with small scenarios, such as simple collaboration between mobile phones and watches, and then gradually expand.

🗝️ Huawei Hongmeng Context In-depth Analysis: The Practical Guide to the Application of "Master Key"

lyc233333 — Thu, 26 Jun 2025 14:34:44 +0000

As a developer who once caused memory leaks due to improper use of Context, today we will reveal the HarmonyOS Context!The first time I misuse Context, the APP crashed, and now I will make the correct usage of this "app master key" public~

1. Context: The "universal ID card" used

1. What is Context?

Imagine you entering the mall:

Context is your "Mall Pass", with it: ✅ Enter the store (start component) ✅ Get map (get resources) ✅ Use elevator (system adjustment service)

HarmonyOS的Context核心能力：

Resource access: Get strings, pictures and other resources
Component Start: Open a new page, adjust the background service
System interaction: Use sensors, store data, etc.

2. Two types: "different permissions" of passes

Type	Permission Range	Analog
AbilityContext	Permissions for a single Ability	Store-only pass
ApplicationContext	All application permissions	Shopping Mall Universal Pass

2. Obtain Context: Find the right "certificate issuing authority"

1. Get it in Ability (most commonly used)

import { UIAbility } from '@ohos.app.ability';

export default class MainAbility extends UIAbility {
  onStart() {
// Method 1: Get it directly
    const context1 = this.context;

// Method 2: By applying the context
    const context2 = this.getApplicationContext();

    console.log(`AbilityContext: ${context1}`);
    console.log(`ApplicationContext: ${context2}`);
  }
}

2. Get it in AbilitySlice

import { AbilitySlice } from '@ohos.app.ability';

export class MainSlice extends AbilitySlice {
  onPageShow() {
// Get Context from the Ability
    const context = this.ability.context;
console.log(Context obtained in `Slice: ${context}`);
  }
}

3. Get it in custom components

import { getContext } from '@ohos.app.ability';

// Get it from the custom component
const context = getContext(this) as typeof import('@ohos.app.ability').Context;

3. File operation: Use Context to open the "file drawer"

1. Common file path acquisition

Method	Purpose	Sample Code
getFilesDir()	Application Data Directory	const filesDir = context.getFilesDir();
getCacheDir()	CacheDir (will be cleaned)	const cacheDir = context.getCacheDir();
getEncryptedFilesDir()	Encrypted directory (storage sensitive data)	const encryptedDir = context.getEncryptedFilesDir();

2. Practical combat: Save user data to the encrypted directory

// Check whether the device is encrypted
if (context.isDeviceEncrypted()) {
// Get the encrypted directory
  const encryptedDir = context.getEncryptedFilesDir().path;

// Store sensitive data (such as payment information)
  const filePath = `${encryptedDir}/payment_info.json`;
  fs.writeFileSync(filePath, JSON.stringify(paymentData));
}

4. Cross-component communication: Context's "Walkjet" function

1. EventHub: Broadcasting between components

// Subscribe to events (in the target component)
context.eventHub.on('newMessage', (data) => {
console.log(`Message received: ${data}`);
  this.updateUI(data);
});

// Send event (at the sender)
context.eventHub.publish('newMessage', 'Hello from Context!');

2. AppStorage: All apps share data

// Store data (such as user information)
context.appStorage.put('userInfo', { name: 'HarmonyUser', level: 'VIP' });

// Get data (in other components)
const userInfo = context.appStorage.get('userInfo');
console.log(`user information: ${userInfo.name}`);

3. LocalStorage: component-specific data

// Store data (only available to the current component)
context.localStorage.put('componentState', { isLoading: false });

// Get data
const state = context.localStorage.get('componentState');
if (!state.isLoading) {
  this.loadData();
}

5. Practical pit avoidance: "Using specifications" of passes

1. Memory leak risk (the easiest pit)

// Error demonstration: Long life cycle object holds short life cycle Context
let badContext: Context;

function wrongWay(abilityContext: AbilityContext) {
badContext = abilityContext; // Dangerous!Context leaks after Ability is destroyed
}

// Correct way: Use ApplicationContext
function rightWay(context: Context) {
// Use application-level Context for longer life cycle
  const appContext = context.getApplicationContext();
}

2. Choose the right Context type in different scenarios

Scenario	Correct Context Type	Error Type	Consequence
Start a new Ability	AbilityContext	ApplicationContext	Some features are not available
Global Data Storage	ApplicationContext	AbilityContext	Data Lost after Component Destruction

6. Performance optimization: "Efficient use method" of the pass

1. Cache Context references

export class AppData {
  private static _context: Context;

// Save once and use it everywhere
  static init(context: Context) {
    this._context = context.getApplicationContext();
  }

  static get context() {
    return this._context;
  }
}

// Initialization
AppData.init(context);

// use
AppData.context.getFilesDir();

2. Avoid frequent acquisitions

// Bad writing method (take it every time)
for (let i = 0; i < 100; i++) {
  const dir = this.context.getFilesDir();
// operate...
}

// Optimized writing method (take it once first)
const dir = this.context.getFilesDir();
for (let i = 0; i < 100; i++) {
// Use dir variable
}

7. Interview FAQ: Context’s “soul-totoring”

1. What is the difference between AbilityContext and ApplicationContext?

Life Cycle: AbilityContext is destroyed with Ability, ApplicationContext is destroyed with application exit
Purpose: The former is used to start the component, the latter is used to global data storage

2. Why can't you start an Activity with Application's Context in Activity?

Report android.util.AndroidRuntimeException
Correct way: Use the Context of Activity or create the FLAG_ACTIVITY_NEW_TASK flag

The last thought

I remember the first time I used the Context of Activity in a custom view, which caused the View to hold the Context after the Activity was destroyed, and the memory leaked to the APP crashed~ Now I have developed the habit of using ApplicationContext to store global data, and I am no longer afraid of leaking~

🚀 Huawei Hongmeng Next: Analysis and practical application of AppStartup startup framework

lyc233333 — Thu, 26 Jun 2025 14:34:27 +0000

As a developer who was forced to the early morning by application startup lag, today I will reveal the AppStartup framework of HarmonyOS!After using it for the first time, the application startup speed increased by 40%. Now, the practical skills of this "start accelerator" are fully disclosed~

1. AppStartup: "Traffic Commander" launched by the application

1. What is AppStartup?

Imagine driving to work in the morning:

Traditional startups are like finding keys, adjusting seats, and checking navigation after getting on the car, and they are busy
AppStartup plans the process in advance like: ignite → adjust the seat → turn on navigation, orderly and efficiently

HarmonyOS's AppStartup core capabilities:

Task Queuing: Schedule the order of starting tasks according to dependencies
Parallel Acceleration: Allows dependency-free tasks to run simultaneously
Late loading: Non-critical tasks are started later, display the interface first

2. Three advantages: The secret of lightning-fast startup

Advantages	Traditional Startup	AppStartup Startup
Task Management	Scattered everywhere, difficult to maintain	Centralized configuration, easy to see
Dependency processing	Prone to order errors	Automatically sort by dependency
Startup speed	Average start time 1.5 seconds	0.9 seconds after optimization

2. Start mode: Flexible "start gearbox"

1. Automatic start: worry-free "automatic transmission"

Suitable for simple applications, start all tasks with one click:

import { AppStartup } from '@ohos.app.startup';

// Direct call to the application portal
AppStartup.getInstance().autoStartup();

2. Manual start: flexible "manual transmission"

Suitable for complex applications, start tasks on demand:

// Start in stages
onFirstStage() {
AppStartup.getInstance().startTask('InitDatabase'); // Initialize the database first
}

onSecondStage() {
AppStartup.getInstance().startTask('LoadNetwork'); // Load the network again
}

3. Configuration file: "Construction Blueprint" for starting the task

1. Task dependency configuration example

{
  "app_startup": [
    {
"name": "InitDatabase", // Task name
"dependency": [] // No dependencies, can be executed first
    },
    {
"name": "LoadUserConfig", // Load user configuration
"dependency": ["InitDatabase"], // Depend on database initialization
"parallel": true // Can be executed in parallel
    },
    {
"name": "InitNetwork", // Initialize the network
      "dependency": [],
      "parallel": true
    },
    {
"name": "ShowSplash", // Show the startup page
"dependency": ["LoadUserConfig", "InitNetwork"] // Wait for the first two to be completed
    }
  ]
}

2. Detailed explanation of the configuration field

Field	Function	Example Value
name	Task unique identifier	"InitDatabase"
dependency	Dependency Task List	["InitDatabase"]
parallel	Whether to execute in parallel	true
delay	delay execution time (ms)	500

4. Parameter configuration: "Performance Regulator" for tasks

1. Task parameter setting example

import { AppStartup, StartupConfig } from '@ohos.app.startup';

// Create task configuration
const networkConfig = new StartupConfig({
  taskName: 'SetupNetwork',
priority: 2, // Priority: The larger the value, the more it will be executed first
parallel: true, // Allow parallelism
delay: 1000, // Delay 1 second execution
required: true // Must be executed
});

// Register configuration
AppStartup.getInstance().addConfig(networkConfig);

2. Priority Policy

High priority: UI rendering, core service initialization (priority 5)
Priority: Network connection, database operation (Priority 3)
Low priority: Ad loading, statistical reporting (priority 1)

5. Practical development: the construction of the "production line" of the mission

1. Task development examples

import { IStartupTask } from '@ohos.app.startup';

// Network initialization task
export class NetworkTask implements IStartupTask {
// Task execution logic
  execute() {
    this.initNetwork();
console.log('Network initialization is completed');
  }

  private initNetwork() {
// Actual network initialization code
  }

// Return to the dependent task list
  getDependencies() {
return ['InitDatabase']; // Depend on database initialization
  }
}

// Register a task
AppStartup.getInstance().registerTask(new NetworkTask());

2. Parallel task optimization

// Two parallel tasks
export class ConfigTask implements IStartupTask {
  getDependencies() { return []; }
execute() { /* Load configuration */ }
}

export class ImageTask implements IStartupTask {
  getDependencies() { return []; }
execute() { /* Preloaded image */ }
}

// Set parallel=true when registering
AppStartup.getInstance().registerTask(new ConfigTask(), { parallel: true });
AppStartup.getInstance().registerTask(new ImageTask(), { parallel: true });

6. Performance optimization: "accelerator" for startup speed

1. Startup time comparison

Optimization items	Traditional startup (ms)	AppStartup optimization (ms)	Improvement range
Simple Application	1200	700	41.7%
Complex Applications	2500	1500	40%

2. Optimization Tips

Stage startup: First display blank pages, then gradually load content
Delayed non-critical tasks: Advertising, recommendation and other tasks delayed to start by 500ms
Parallel execution: Dependency-free tasks run at the same time, such as configuration loading + image prefetching

7. Practical cases: Start-up optimization of e-commerce applications

1. Start task planning

Stage 1 (must be executed immediately):
Database initialization (priority 5)
User login status check (priority 4)
Stage 2 (parallel execution):
Home page configuration loading (priority 3, parallel)
Product image prefetch (priority 3, parallel)
Stage 3 (Delayed Execution):
Ad loading (delay of 1000ms, priority 1)
Statistical reporting (delay of 800ms, priority 2)

2. Configuration file implementation

{
  "app_startup": [
    { "name": "CheckLogin", "priority": 4 },
    { "name": "InitDB", "priority": 5 },
    { "name": "LoadHomeConfig", "priority": 3, "parallel": true },
    { "name": "PrefetchImages", "priority": 3, "parallel": true },
    { "name": "LoadAd", "priority": 1, "delay": 1000 },
    { "name": "ReportStat", "priority": 2, "delay": 800 }
  ]
}

The last thought

I remember the first time I used AppStartup to optimize the e-commerce app, the startup speed dropped from 2.3 seconds to 1.4 seconds. The boss thought I had changed my phone to test it~ Now I have developed the habit of planning the startup task first with a new function, and I am no longer afraid of startup lags~