HarmonyOS NEXT應用開發—在Native側實現進度通知功能

介紹

本示例透過模擬下載場景介紹如何將Native的進度資訊實時同步到ArkTS側。

效果圖預覽

使用說明

1. 點選“Start Download“按鈕後，Native側啟動子執行緒模擬下載任務
2. Native側啟動子執行緒模擬下載，並透過Arkts的回撥函式將進度資訊實時傳遞到Arkts側

實現思路

1. 前端進度條使用Progress繪製

Progress({ value: this.progress, total: 100, type: ProgressType.Ring })
    .width($r("app.integer.progress_size"))
    .height($r("app.integer.progress_size"))
    .animation({ duration: NativeProgressNotifyConstants.PROGRESS_ANIMATION_DURATION, curve: Curve.Ease })
    .style({ strokeWidth: 15 })

2. JS側呼叫Native側方法，並傳入用於接收下載進度的回撥函式，在該回撥函式中更改狀態變數

naitiveprogressnotify.startDownload((data: number) => {
    this.progress = data;
    console.log("[NativeProgressNotify]progress:" + this.progress);
})

3. Naitive側使用std::thread建立子執行緒執行模擬下載的任務

std::thread downloadThread(downloadTask, asyncContext);
downloadThread.detach();

4. Native側模擬下載的執行緒中，每100ms執行一次uv_queue_work；向eventloop事件堆疊push非同步任務。

 while (context && context->progress < 100) {
     context->progress += 1;
     napi_acquire_threadsafe_function(tsfn);
     napi_call_threadsafe_function(tsfn, (void *)context, napi_tsfn_blocking);
     std::this_thread::sleep_for(std::chrono::milliseconds(100));
 }

5. 在模擬下載任務的子執行緒中，呼叫napi_call_function來執行Arkts回撥，向Arkts側傳遞進度資訊

 napi_create_int32(arg->env, arg->progress, &progress);
 napi_call_function(arg->env, nullptr, jsCb, 1, &progress, nullptr);

高效能知識點

本例中，在Native側使用子執行緒執行下載任務，從而避免對主執行緒資源的佔用，能有效提升效能

工程結構&模組型別

verifycode                                       // har型別
|---constants
|   |---NativeProgressNotifyContants.ets         // 常量
|---view
|   |---NativeProgressNotify.ets                 // 檢視層

模組依賴

不涉及

參考資料

1. Progress
2. Napi
3. libuv