当前位置:首页 > uni-app

uniapp断点下载

2026-03-05 04:59:31uni-app

断点下载实现原理

断点下载的核心是通过HTTP请求头Range字段指定下载范围,服务器返回对应文件片段。客户端需记录已下载的字节位置,中断后从断点位置继续请求。

基本步骤

配置manifest.json
manifest.json中启用网络下载权限:

{
  "networkTimeout": {
    "downloadFile": 60000
  },
  "uni-app": {
    "downloadFile": true
  }
}

核心代码实现

  1. 初始化下载任务并记录进度:
    
    let downloadTask = uni.downloadFile({
    url: 'https://example.com/largefile.zip',
    header: { 'Range': 'bytes=' + alreadyDownloaded + '-' },
    success: (res) => {
     if (res.statusCode === 206) {
       // 处理分片数据
     }
    }
    });

// 监听进度 downloadTask.onProgressUpdate((res) => { console.log('下载进度:', res.progress); console.log('已下载:', res.totalBytesWritten); });


2. 存储断点信息  
使用`uni.setStorageSync`保存已下载字节数:  
```javascript
uni.setStorageSync('downloadedBytes', res.totalBytesWritten);
  1. 恢复下载时读取断点
    const alreadyDownloaded = uni.getStorageSync('downloadedBytes') || 0;

注意事项

  • 服务器需支持Range请求,否则返回状态码200而非206
  • 大文件下载建议分片处理(如每10MB一个分片),减少内存压力。
  • 安卓平台需检查文件存储权限,iOS需确保沙盒路径可写。

错误处理

  • 网络中断时自动重试:
    
    let retryCount = 0;
    const maxRetry = 3;

function downloadWithRetry() { downloadTask.abort(); if (retryCount < maxRetry) { retryCount++; setTimeout(downloadWithRetry, 2000); } }


- 捕获异常并记录日志:  
```javascript
uni.downloadFile({
  fail: (err) => {
    console.error('下载失败:', err);
    uni.reportAnalytics('download_error', { url: err.url });
  }
});

完整示例

// 初始化下载
function startDownload() {
  const savedBytes = uni.getStorageSync('file_downloaded_bytes') || 0;
  const task = uni.downloadFile({
    url: 'https://example.com/file.mp4',
    header: { 'Range': `bytes=${savedBytes}-` },
    success: (res) => {
      if (res.statusCode === 206) {
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: (saveRes) => {
            uni.removeStorageSync('file_downloaded_bytes');
          }
        });
      }
    }
  });

  task.onProgressUpdate((res) => {
    uni.setStorageSync('file_downloaded_bytes', res.totalBytesWritten);
  });
}

uniapp断点下载

标签: 断点uniapp
分享给朋友:

相关文章

uniapp极光推送

uniapp极光推送

uniapp极光推送集成步骤 准备工作 注册极光推送开发者账号,创建应用获取AppKey。确保uniapp项目已配置好原生插件支持。 安装插件 在uniapp项目manifest.json文件中,…

uniapp设置title

uniapp设置title

设置页面标题的方法 在UniApp中设置页面标题可以通过以下几种方式实现,适用于不同场景和需求。 通过pages.json配置 在pages.json文件中,可以为每个页面单独配置导航栏标题。找到…

uniapp 如何封装request请求

uniapp 如何封装request请求

封装 request 请求的核心思路 在 UniApp 中封装请求通常基于 uni.request,通过统一处理 URL、参数、header 和拦截逻辑提升代码复用性。以下是一个完整封装方案: 创建…

uniapp实现标题栏渐变

uniapp实现标题栏渐变

实现标题栏渐变的方法 在UniApp中实现标题栏渐变效果,可以通过修改页面的导航栏样式或使用自定义导航栏来实现。以下是几种常见的方法: 方法一:使用原生导航栏渐变 通过修改pages.json中的…

uniapp adb

uniapp adb

在UniApp中使用ADB的方法 ADB(Android Debug Bridge)是Android开发中常用的调试工具,可用于UniApp项目的真机调试、日志查看等操作。以下是具体使用方法: 连接…

uniapp擎

uniapp擎

uniapp 引擎简介 uniapp 是一个基于 Vue.js 的开发框架,允许开发者使用一套代码同时构建跨平台应用(如 iOS、Android、H5、小程序等)。其核心引擎负责将 Vue 语法转换为…