微信小程序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容器页)
那么在小程序中webview文件下载完成后，如果想返回PageB,就没法做到了，因为relaunch导致路由栈全都出栈了，左上角小房子是跳转回首页。
用 naviageTo 是否好一些？
onShow () {
if (this.data.previewDocument) {
wx.navigateBack()
}
},
onHide () {
this.data.previewDocument = true
}