uniApp小程序文件下载与分享

背景

小程序作为轻量化应用载体，在文件处理能力上存在一定局限性。传统的 PDF、CSV 文件下载普遍采用 H5 页面嵌入实现，导致用户体验割裂、开发流程复杂、维护成本高。本文将介绍如何利用 uniapp 和微信小程序原生 API，打造流畅高效的文件下载与预览功能，显著提升用户体验。

uniapp 小程序文件下载

代码详解：一步步理解实现原理

1. 跨平台文件下载设计

代码采用了 uniApp 提供的条件编译功能，通过 #ifdef 和 #endif 指令实现了在不同平台（APP、H5、小程序）下的差异化处理，确保代码在各端均可正常运行。核心思路是：

• 先通过 uni.downloadFile() 将文件下载到本地临时路径
• 根据当前运行环境，选择合适的方式处理文件

2. 小程序文件处理流程

在小程序环境中，代码主要完成了以下工作：

• 文件预览：调用 uni.openDocument() API 打开系统级预览界面，支持 PDF、DOCX、XLSX 等多种格式
• 分享功能：通过 wx.shareFileMessage() 实现文件的社交分享，提升交互体验
• 进度反馈：使用 downloadTask.onProgressUpdate() 实时显示下载进度，增强用户体验

3. 性能优化与错误处理

代码中包含了完整的错误处理机制：

• 网络请求失败反馈
• 文件打开异常处理
• 分享操作结果提示

每个环节都配有相应的 Toast 提示，确保用户获得清晰的操作反馈。

4. 跨端适配要点

• APP 端：文件保存至本地文件系统
• H5 端：通过创建虚拟链接实现下载
• 小程序端：利用系统文档预览能力和平台特有的分享 API

源码

const doDownload = () => {
  // 显示下载中的提示
  uni.showLoading({
    title: '文件下载中...',
  });

  const downloadTask = uni.downloadFile({
    /* 预览pdf */
    // url: '[文件地址]‘,

    /* 下载csv */
    // url: '[文件地址]',
    /* 下载pdf */
    url: '[文件地址]',
    success: (res) => {
      console.log('下载完成', res);
      if (res.statusCode === 200) {
        const tempFilePath = res.tempFilePath;

        // 根据平台执行不同的操作
        // #ifdef APP-PLUS
        // APP环境下，保存到相册或文件管理器
        uni.saveFile({
          tempFilePath: tempFilePath,
          success: (saveRes) => {
            uni.hideLoading();
            uni.showToast({
              title: '文件已保存: ' + saveRes.savedFilePath,
              icon: 'success',
              duration: 3000,
            });
          },
          fail: (err) => {
            console.error('保存文件失败', err);
            uni.hideLoading();
            uni.showToast({ title: '保存文件失败', icon: 'none' });
          },
        });
        // #endif

        // #ifdef H5
        // H5环境下，创建下载链接
        const a = document.createElement('a');
        a.href = tempFilePath;
        a.download = '下载文件.csv';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        uni.hideLoading();
        uni.showToast({ title: '下载完成', icon: 'success' });
        // #endif

        // #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU
        // 小程序环境，提供预览功能
        uni.openDocument({
          filePath: tempFilePath,
          fileType: 'csv',
          success: () => {
            uni.hideLoading();
            uni.showActionSheet({
              itemList: ['转发给微信好友'],
              success: function (res) {
                if (res.tapIndex === 0) {
                  // 使用微信小程序的分享文件消息接口
                  wx.shareFileMessage({
                    filePath: tempFilePath,
                    success() {
                      console.log('分享文件消息成功');
                    },
                    fail(res) {
                      console.error('分享文件消息失败', res);
                      uni.showToast({
                        title: '分享失败',
                        icon: 'none',
                      });
                    },
                  });
                }
              },
            });
            // uni.showToast({ title: '文件已打开', icon: 'success' });
          },
          fail: (err) => {
            console.error('打开文件失败', err);
            uni.hideLoading();
            uni.showToast({ title: '打开文件失败', icon: 'none' });
          },
        });
        // #endif
      } else {
        uni.hideLoading();
        uni.showToast({ title: '下载失败: ' + res.statusCode, icon: 'none' });
      }
    },
    fail: (err) => {
      console.error('下载失败', err);
      uni.hideLoading();
      uni.showToast({ title: '下载失败，请检查网络', icon: 'none' });
    },
  });

  // 添加下载进度监听
  downloadTask.onProgressUpdate((res) => {
    console.log('下载进度', res.progress);
    // 可以用进度条展示下载进度
    uni.showLoading({
      title: '下载中: ' + res.progress + '%',
    });
  });
};

展示

调用手机系统的预览

微信转发给好友