首页 > 其他分享 >HarmonyOS NEXT应用开发—在Native侧实现进度通知功能

HarmonyOS NEXT应用开发—在Native侧实现进度通知功能

时间:2024-04-20 20:34:12浏览次数:24  
标签:Arkts NEXT HarmonyOS 线程 下载 progress napi Native

介绍

本示例通过模拟下载场景介绍如何将Native的进度信息实时同步到ArkTS侧。

效果图预览

image

使用说明

  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 })
  1. JS侧调用Native侧方法,并传入用于接收下载进度的回调函数,在该回调函数中更改状态变量
naitiveprogressnotify.startDownload((data: number) => {
    this.progress = data;
    console.log("[NativeProgressNotify]progress:" + this.progress);
})
  1. Naitive侧使用std::thread创建子线程执行模拟下载的任务
std::thread downloadThread(downloadTask, asyncContext);
downloadThread.detach();
  1. 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));
 }
  1. 在模拟下载任务的子线程中,调用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

标签:Arkts,NEXT,HarmonyOS,线程,下载,progress,napi,Native
From: https://www.cnblogs.com/HarmonyOSNext/p/18148113

相关文章

  • HarmonyOS NEXT应用开发—翻页动效案例
    介绍翻页动效是应用开发中常见的动效场景,常见的有书籍翻页,日历翻页等。本例将介绍如何通过ArkUI提供的显示动画接口animateTo实现翻页的效果。效果图预览使用说明本例通过setInterval函数每秒调用一次翻页动画,实现连续翻页效果。实现思路如图,左右两侧分别代表打开书籍的......
  • HarmonyOS NEXT应用开发之下拉刷新与上滑加载案例
    介绍本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。效果图预览使用说明进入页面,下拉列表触发刷新数据事件,等待数据刷新完成。上滑列表到底部,触发加载更多数据事件,等待数据加载完成。实现思路使用第三方库pullToRefresh组件,将列......
  • HarmonyOS NEXT应用开发之深色跑马灯案例
    介绍本示例介绍了文本宽度过宽时,如何实现文本首尾相接循环滚动并显示在可视区,以及每循环滚动一次之后会停滞一段时间后再滚动。效果图预览使用说明:1.进入页面,检票口文本处,实现文本首尾相接循环滚动,且在同一可视区,滚动完成之后,停滞一段时间后继续滚动。实现思路由于ArkUI中......
  • 如何评价 Next.js?
    作者:你不知道我是谁链接:https://www.zhihu.com/question/52365623/answer/2814907079来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。16年的问题了,在6年后的平安夜刷到了。Next.js,是第二个让我由心觉得好用,觉得「我艹,可以啊」的一个框架。第一个......
  • 没 2 年 React Native 开发经验,你都遇不到这些坑
    ......
  • HarmonyOS NEXT应用开发之深色模式适配
    介绍本示例介绍在开发应用以适应深色模式时,对于深色和浅色模式的适配方案,采取了多种策略如下:固定属性适配:对于部分组件的颜色属性,如背景色或字体颜色,若保持不变,可直接设定固定色值或引用固定的资源文件。双资源目录适配:在resources目录下新增dark子目录,用于存放深色模式下的特......
  • HarmonyOS NEXT应用开发之异常处理案例
    介绍本示例介绍了通过应用事件打点hiAppEvent获取上一次应用异常信息的方法,主要分为应用崩溃、应用卡死以及系统查杀三种。效果图预览使用说明:点击构建应用崩溃事件,3s之后应用退出,然后打开应用进入应用异常页面,隔1min左右后,显示上次异常退出信息。点击构建应用卡死事件,需手......
  • 鸿蒙HarmonyOS实战-ArkUI动画(布局更新动画)
    ......
  • React 简单登录平台Demo(1):Next.js配置
    目录前言体验Next.js中文文档路径问题创建项目启动报错测试TailWindCSS热重载如何添加路由第三方库引入tailwindcss配置相关链接布局新建布局布局也是嵌套影响的根节点layout配置路由跳转Link跳转Hook跳转简单的登录页面前言我之前的那个项目写到后面,发现还不如直接用Next.js呢......
  • HarmonyOS NEXT应用开发之多层嵌套类对象监听
    介绍本示例介绍使用@Observed装饰器和@ObjectLink装饰器来实现多层嵌套类对象属性变化的监听。效果图预览使用说明加载完成后显示商品列表,点击刷新按钮可以刷新商品图片和价格。实现思路创建FistGoodsModel类,类对象是用@Observed修饰的类SecondGoodsItemList,SecondGoods......