uni-app插件下载没有提示,不知道是否下载成功,也没有进度条

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app插件下载没有提示,不知道是否下载成功,也没有进度条

插件下载没有提示,不知道是否下载成功,也没有进度条

image

1 回复

在开发uni-app应用时,如果遇到插件下载没有提示、不知道是否下载成功以及缺少进度条的问题,可以通过编写自定义代码来监控插件的下载状态并显示进度。以下是一个基本的实现思路,主要通过uni.downloadFile API进行文件下载,并实时更新下载进度。

步骤一:创建一个插件下载管理器

首先,我们可以创建一个管理器来处理下载任务,并维护下载状态。

// downloadManager.js
const DownloadManager = {
    downloads: {},
    
    startDownload(url, filePath, callback) {
        const taskId = uni.downloadFile({
            url,
            filePath,
            success: (res) => {
                if (res.statusCode === 200) {
                    callback(null, res.tempFilePath);
                } else {
                    callback(`Download failed with status code: ${res.statusCode}`);
                }
            },
            fail: (err) => {
                callback(err.message);
            },
            complete: () => {
                delete this.downloads[taskId];
            }
        });
        
        this.downloads[taskId] = { url, filePath, callback, progress: 0 };
        
        // 使用定时器检查下载进度(这里简单处理,实际应优化)
        const interval = setInterval(() => {
            const task = this.downloads[taskId];
            if (!task) return clearInterval(interval);
            
            uni.getFileSystemManager().getFileInfo({
                filePath: task.filePath + '.tmp', // 假设下载过程中文件名为.tmp结尾
                success: (fileInfo) => {
                    const progress = fileInfo.size / (task.expectedSize || fileInfo.size) * 100;
                    if (progress < 100) {
                        task.progress = progress;
                        task.callback(`Progress: ${progress.toFixed(2)}%`);
                    }
                },
                fail: () => {}
            });
        }, 1000);
    }
};

module.exports = DownloadManager;

步骤二:使用下载管理器下载插件

在你的页面中或组件中引入并使用下载管理器。

// 在页面或组件中
const DownloadManager = require('../../downloadManager.js');

const url = 'https://example.com/your-plugin.zip';
const filePath = `${uni.env.USER_DATA_PATH}/your-plugin.zip`;

DownloadManager.startDownload(url, filePath, (err, filePath) => {
    if (err) {
        console.error('Download error:', err);
    } else {
        console.log('Download complete:', filePath);
    }
});

注意

  1. 上述代码示例中,使用了定时器检查文件大小来模拟进度条,这在生产环境中可能不是最佳实践,因为频繁的文件操作可能会影响性能。实际应用中,可以考虑结合服务器端提供的进度接口或其他更高效的方案。
  2. 示例中假设下载的文件会临时以.tmp结尾,实际开发中需根据具体情况调整。
  3. 错误处理和边界情况(如文件已存在、网络中断等)需要根据具体需求进行完善。
回到顶部