小程序内嵌H5下载文件方案

首页
技术
小程序内嵌H5下载文件方案

文章摘要

智阅GPT

小程序内嵌H5下载文件方案

采用wx.miniProgram.navigateTo实现实时下载文件
弃用wx.miniProgram.postMessage，原因向小程序发送消息，会在以下特定时机触发组件的message事件：小程序后退、组件销毁、分享、复制链接。无法实现实时下载文件

参考方案：

实现方案：

前置：需要小程序端创建一个下载路由/pages/downloadJxj/index，用于navigateTo跳转

H5端：

function downloadFile(filename) {
       if (typeof wx !== 'undefined' && wx.miniProgram) {
                // 小程序环境
                const downloadUrl = `https://your-api.com/download/${filename}`;
                wx.miniProgram.navigateTo({
                    url: `/pages/downloadJxj/index?url=${encodeURIComponent(downloadUrl)}`
                });
            } else {
                // 普通H5环境
                alert('请在微信小程序中打开此页面');
            }
        }

小程序端：

app.json
"pages": [
   "pages/index/index",
   "pages/home/index",
   "pages/my/index",
   "pages/info/index",
   "pages/downloadJxj/index"  // 新的路由地址
],

在pages/downloadJxj/index.js路由页面实现

pages/downloadJxj/index.js

Page({
  data: {},

  // 下载 PDF
  doDownload(url) {
    wx.showLoading({ title: '下载中...' });

    wx.downloadFile({
      url,
      success: (res) => {
        wx.hideLoading();
        wx.openDocument({
          filePath: res.tempFilePath,
          showMenu: true,
          success: () => {
            // 下载完成后返回上一页
            wx.navigateBack({
              delta: 1  // 返回上一页
            });
          }
        })
      },
      fail(err) {
        wx.hideLoading();
        wx.showToast({
          title: '下载失败',
          icon: 'none'
        });
        console.error("文件下载失败", err);
      }
    });
  },

  onLoad(options) {
    console.log(options);
    if (options.url) {
      const url = decodeURIComponent(options.url)  // 解码
      console.log("下载 URL =", url)
      this.doDownload(url)
    } else {
      console.error("没有传入URL");
    }
  }
})