vue+uniapp实现多任务并发下载文件 | 断点续下, 任务列表, 多任务并发限制

一、插件简介

zhimi-downloadManager(智密 - 多任务下载管理插件)是一个支持多任务多并发下载,支持多/单任务管理,并且实时反馈任务下载进度的uniapp原生插件。
平台支持:Android、IOS

 


 

 

二、效果预览
在App端测试效果如下:

vue+uniapp实现多任务并发下载文件 | 断点续下, 任务列表, 多任务并发限制 vue+uniapp实现多任务并发下载文件 | 断点续下, 任务列表, 多任务并发限制 vue+uniapp实现多任务并发下载文件 | 断点续下, 任务列表, 多任务并发限制

 

体验DEMO(安卓浏览器扫码下载)
vue+uniapp实现多任务并发下载文件 | 断点续下, 任务列表, 多任务并发限制

 


 

 

三、开始使用

(1): 引入插件

首先创建工程,添加完原生插件之后,需要引入插件

var downloadManager = uni.requireNativePlugin(‘zhimi-downloadManager‘)

具体的API在插件市场的API文档中可以查阅,有定制需求或bug提交的也可以自行联系客服微信(zhimitec)

 

(2): 监听任务

创建任务之前,我们需要全局监听任务进度变化回调

downloadManager.onDownloadChangCallback(downloadTask => {
  // 下载地址: downloadTask.url
  // 文件大小: downloadTask.expectedSize
  // 已下大小: downloadTask.receivedSize
  // 下载速度: downloadTask.speed
  // 下载状态: downloadTask.state 0默认 1等待 2下载中 3暂停 4下载完成 5下载错误
  // 保存路径: downloadTask.filePath
  // 文件名: downloadTask.filename
  console.log(downloadTask.url + ‘ has been change‘)
})

 

(3): 创建任务

对于 zhimi-downloadManager 来说,下载任务仅仅需要1个下载路径,如果你需要自定义文件名,传入fileName即可。
假设我们需要下载QQ的安装包:https://dldir1.qq.com/qqfile/QQforMac/QQ_6.7.0.dmg,只需要这样的一段代码即可

// 这里的fileName可传可不传
downloadManager.downloadData({ url: ‘https://dldir1.qq.com/qqfile/QQforMac/QQ_6.7.0.dmg‘, fileName: ‘macqq.dmg‘ })

仅仅一个方法,zhimi-downloadManager就会自动记录任务列表,开始下载任务,并且通过上面监听的回调返回任务下载进度


(4): 刷新任务列表

下载的功能实现了,这时候我们还需要回显给用户当前任务列表,在zhimi-downloadManager中,这一切变得非常简单,只需要调用以下代码即可直接返回任务列表(包括下载状态、进度等)

downloadManager.allDownloadsCallback(({ urls }) => {
  urls = [{
    receivedSize // 进度
    expectedSize // 大小
    speed        // 速度
    targetURL    // 地址
    state        // 下载状态 0默认 1等待 2下载中 3暂停 4下载完成 5下载错误
    url          // 下载地址
    filePath     // 保存地址
    filename     // 文件名
  }]
})

vue+uniapp实现多任务并发下载文件 | 断点续下, 任务列表, 多任务并发限制

 

(5): 更多方法
对于所有任务的操作以及单个任务的操作,zhimi-downloadManager都提供对应的api,在此仅做列举,具体使用方法参考插件市场内api文档说明https://ext.dcloud.net.cn/plugin?id=2877,有定制需求或bug提交的也可以自行联系客服微信(zhimitec)。

downloadManager.setDownloadingMaxNum // 设置任务并发数
downloadManager.startAllDownloads // 开始所有任务
downloadManager.cancelAllDownloads // 暂停所有任务
downloadManager.removeAllData // 删除所有任务
downloadManager.downloadData // 创建新的下载任务
downloadManager.downloadData // 开始单个任务
downloadManager.cancelData // 暂停单个任务
downloadManager.removeData // 暂停单个任务

 

vue+uniapp实现多任务并发下载文件 | 断点续下, 任务列表, 多任务并发限制

上一篇:bind,call,apply的实现


下一篇:Create React App 支持 Less Modules 的配置说明