需求是这样的，我需要在我的微信小程序上用webview加载一个第三方的h5页面，是用vue3做的，这个h5页面有一个下载pdf文件的功能，问题来了，这是人家h5页面的下载文件，但在我的小程序的webview里就不行作用了，我想到的办法就是，客户点下载文件按钮时，我让h5把pdf的文件url给我，我再通过小程序的方法来下载文件。
webview文件代码 ：jumpUrl中是要展示的h5页面的地址。
<template>
<view>
<web-view :src="jumpUrl" @load="bindload" @message="handleMessage" @error="binderror"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
jumpUrl:''
}
},
async onLoad(){
this.jumpUrl=uni.getStorageSync('jumpUrl')
},
methods:{
async handleMessage(event) {
console.log("handleMessage3")
console.log('从H5接收到的数据:33', event.detail.data);
let data=event.detail.data[0].url
console.log(data)
uni.downloadFile({
url: data,
success: function (res) {
console.log("成功!")
console.log(res)
var filePath = res.tempFilePath;
uni.openDocument({
filePath: filePath,
showMenu: true,
success: function (res) {
console.log('打开文档成功');
},
fail(err) {
console.log("失败了")
uni.showToast({
icon:'none',
title:err
})
console.log(err);
}
});
}
});
},
bindload(event){
console.log("加载完成!!!")
console.log(event)
},
binderror(){
console.log("加载失败")
},
download(){
console.log("sss")
}
}
}
</script>
<style scoped>
.xxx{position: fixed;bottom:10vh;right:2vh;z-index: 999;}
</style>
下面是h5页面代码：
需要先安装：npm install weixin-js-sdk -S
<script setup lang="ts">
import wx from "weixin-js-sdk"
const handleClick=()=>{
console.log('点击')
console.log("ssss")
alert("在打开页面点击右上角的...，然后'保存到手机'即可 ！！")
wx.miniProgram.navigateBack({delta: 1} as any)
wx.miniProgram.postMessage({
data: {url: "https://pdf.chunten.com/1.pdf"}
})
}
</script>
<template>
<div>
<button @click="handleClick">点击</button>
</div>
</template>
<style scoped>
</style>
