微信小程序web-view嵌套h5文件下载解决方案

qq_45967343

于 2025-05-13 09:51:31 发布

阅读量975

点赞数 9

分类专栏：微信小程序文章标签：微信小程序前端 html5 webview

本文链接：https://blog.csdn.net/qq_45967343/article/details/147916433

版权

微信小程序专栏收录该内容

1 篇文章

订阅专栏

微信小程序web-view嵌套h5如何解决文件流下载

一、业务场景

使用微信小程序的web-view组件嵌套了个h5页面，h5是存在文件下载的逻辑，文件下载接口是文件流，h5使用的是文件流转Blob，然后使用a标签打开这个转化的Blob url，这样的方案在h5浏览器是可行的，但在嵌入了微信小程序环境的场景下是没用的。可能微信小程序针对blob的链接做了拦截，不让打开新的页面。

二、解决思路

微信小程序是有文件下载的相关api的，wx.downloadFile本身就是微信小程序文件流的下载方法，那么核心的思路就是让h5与小程序通信，将h5的下载逻辑放到小程序。

三、h5与微信小程序如何通信

微信小程序的web-view组件类似于h5的iframe组件，所以第一想到的是，能否有类似于iframe的postMessage方法让两个窗口进行通信，发现web-view确实有bindmessage的回调，jssdk也有postMessage的方法，但是小程序的postMessage只有在指定场景才能触发，那么就不能做到实时通信了。

在这里插入图片描述

那么这里的方案是通过路径跳转实现了h5与小程序的通信，使用的是小程序的reLaunch方法（或navigate方法，会跳转一个小程序的新页面，在返回时路由栈会多一个页面），让h5去打开小程序的页面，并在url里拼接文件下载需要的参数。

代码实现
h5端：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>h5页面</title>
      <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
      <!--引入微信jssdk -->   
  </head>
  <body>
    <h1 onclick="postMsgToMiniapp()">向小程序通信-h5下载文件触发</h1>
  </body>
  <script>
     function navigateToMinapp() {
      const url = "http://ip/dev/file/getManual/"; //文件下载接口
      wx.miniProgram.reLaunch({
		//拼接url
        url:
          "/pages/webView/webView?url=" +
          encodeURIComponent(url) +
          "&filename=" +
          encodeURIComponent("报告.pdf"),
      });
		
    }
  </script>

小程序端：

//webView.wxml
<web-view src="http://xxxxx/h5Url"/>

// webView.js
//在onLoad中获取从h5传递过来的参数
onLoad(options) {
    console.log(options)
    const url = decodeURIComponent(options.url || '')
	const fileName = decodeURIComponent(options.filename || '')
    if(url&&fileName){
      this.downloadFileH5(url,fileName)
    }
},

downloadFileH5(url,fileName){
    const mypath = `${wx.env.USER_DATA_PATH}/usr/${fileName}` //下载文件的路径
     wx.downloadFile({
      url: url,
      filePath: mypath,
      success: (res) => {
        console.log(res)
        if (res.statusCode == 200) {
          //下载完文件后，打开文件预览
          wx.openDocument({
            showMenu: true,
            filePath: mypath,
            success: (res) => {
              console.log('打开成功', res)
            },
            fail: (res) => {
              console.log('打开失败', res)
            }
          })
        })
}

四、方案优缺点

优点：解决了文件可以直接在小程序内下载，不需要引导用户复制下载链接自行打开浏览器下载，且在安卓和ios都能正常下载预览

缺点：下载文件时使用了小程序relaunch，关闭了当前webview的页面并重启了该页面，如果webview的页面也就是h5页面没有做状态持久化，会导致页面刷新没有数据，且由于relaunch了，导致小程序的页面路由栈全部出栈了，小程序页面左上角会出现小房子图标，如果小程序的页面之间存在依赖关系，例如，如果小程序的页面依赖关系是这样的：Index --> PageB --> webview(h5容器页)
ch了，导致小程序的页面路由栈全部出栈了，小程序页面左上角会出现小房子图标，如果小程序的页面之间存在依赖关系，例如，如果小程序的页面依赖关系是这样的：Index --> PageB --> webview(h5容器页)
那么在小程序中webview文件下载完成后，如果想返回PageB,就没法做到了，因为relaunch导致路由栈全都出栈了，左上角小房子是跳转回首页。