微信小程序开发笔记（一）如何使用downloadFile下载文件

最新推荐文章于 2025-06-20 17:09:12 发布

原创最新推荐文章于 2025-06-20 17:09:12 发布 · 2.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #笔记 #uni-app

uni.downloadFile(OBJECT)可以去uni-app官网去查看具体详细信息。

uni.uploadFile(OBJECT) | uni-app官网

以下代码分步骤是实现了文件的下载，使用downloadFile的接口。

 <view v-else class="file">
     <button class="mini-btn" @click="downLoad" type="primary">课程文件下载</button>
</view>

下载的点击事件，实现下载文件（docx，mp4，pdf等文件），下面来具体分析一下代码步骤。这是完整的一个文件下载代码。

// 下载
function downLoad() {
    console.log('下载');
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    const isH5 = systemInfo.platform === 'h5';  // 判断是否是H5平台
    console.log(systemInfo);
    console.log(isH5);
    if (isH5) {
        console.log('当前环境是H5');
        // 如果是H5，可以在这里进行一些H5特有的处理
        // 比如提示用户下载会受到浏览器限制，或者直接跳转到下载链接等
        window.open(courseDetail.file, '_blank');  // '_blank'表示在新标签页中打开
    } else {
        console.log('当前环境是非H5平台');
        uni.downloadFile({
            url: courseDetail.file,
            method: 'GET',
            success: (data) => {
                console.log(data);
                if (data.statusCode === 200) {
                    console.log(data);
                    //文件保存到本地
                    uni.saveFile({
                        tempFilePath: data.tempFilePath, //临时路径
                        success: function (res) {
                            console.log(res);
                            uni.showToast({
                                icon: 'none',
                                mask: true,
                                title: '文件已保存：' + res.savedFilePath, //保存路径
                                duration: 3000,
                            });
                            setTimeout(() => {
                                //打开文档查看
                                uni.openDocument({
                                    filePath: res.savedFilePath,
                                    success: function (res) {
                                        console.log('打开文档成功');
                                    }
                                });
                            }, 3000)
                        }
                    });
                }
            },
            fail: (err) => {
                console.log(err);
                if (err.errMsg == "downloadFile:fail") {
                    setTimeout(() => {
                        // window.open(courseDetail.file, '_blank');
                    }, 2000);
                }
                uni.showToast({
                    title: '下载失败请重新下载',
                    icon: 'none',
                    mask: true
                });
            },
        });
    }
}

uni.downloadFile的object里参数需要填写的有

url是用来表示下载的资源（也就是我上述代码中接口返回需要下载的一个文件地址）必填的！
filePath是指定文件下载后存储的路径 (本地路径)
success下载成功后以 tempFilePath 的形式传给页面，res = {tempFilePath: '文件的临时路径'}
fail是接口调用失败的回调函数
complete是接口调用结束的回调函数（调用成功、失败都会执行）

实现具体步骤

使用 uni.getSystemInfoSync() 方法同步获取当前系统的信息，并存储在 systemInfo 变量中。
通过比较 systemInfo.platform 的值是否为 'h5' 来判断当前环境是否为H5平台。如果是，存储在 isH5 变量中。
根据平台类型处理下载：
- 如果是H5平台：
  - 打印信息表示当前环境是H5。
  - 使用 window.open(courseDetail.file, '_blank') 在新标签页中打开下载链接（注意：这里假设 courseDetail.file 是已经定义好的下载链接）。
- 如果是非H5平台：
  - 打印信息表示当前环境是非H5平台。
  - 使用 uni.downloadFile 方法发起下载请求。
在 success 回调中，检查返回的 data.statusCode 是否为200，表示下载成功。
使用 uni.saveFile 方法将下载的文件保存到本地。
在 saveFile 的 success 回调中，打印保存信息，并使用 uni.showToast 显示文件保存路径的提示。
使用 setTimeout 延时3秒后，调用 uni.openDocument 方法尝试打开保存的文件。