网站导航
> 技术文档 > 微信小程序web-view嵌套h5文件下载解决方案_小程序webview下载文件

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

网友: 技术文档 2025-08-08 05:29:51

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

一、业务场景

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

二、解决思路

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

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

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

在这里插入图片描述

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

  2. 代码实现
    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>  </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导致路由栈全都出栈了，左上角小房子是跳转回首页。

五、参考

https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

网络标签：

相关问题