微信小程序web-view 嵌套h5界面实现文件预览效果

实现方法：(这里我是在小程序里面单独加了一个页面用来下载预览文件)

安装

使用方法请参考文档
npm 安装

npm install  weixin-js-sdk
import wx from 'weixin-js-sdk'

预览

h5界面代码

	<u-button @click="onclick" type="primary" :loading="butLoad" loadingText="加载中...">预览</u-button>

onclick(){const tempFilePath = 'http://example.com/somefile.pdf'if (window.__wxjs_environment !== 'miniprogram') {uni.openDocument({filePath: filePath,showMenu: true,success: function(res) {console.log('打开文档成功')},fail: function(err) {console.log('失败，', err);}})return}//这里需要注意一下，不要把下面这一行代码单独提出来放一下方法里面，会不生效（具体为啥我也没找到原因,如果有知道麻烦告知一下）wx.miniProgram.navigateTo({url: `/pages/weiVie/index?url=${tempFilePath}`})
},

小程序界面需要建一个文件
在这里插入图片描述
index.js 代码（index.wxml 文件是空的，看个人需要）

 onLoad(e){//获取从h5传过来的地址const {url}=e//   返回上一页 (这步骤加上不会出现空白页面，返回预览看的界面是你预览前的界面)wx.navigateBack({data:1})//   下载wx.downloadFile({url: e.url,success: function(res) {// 预览wx.openDocument({filePath:res.tempFilePath,showMenu: true,//是否打开右上角菜单success: function (res) {console.log('打开文档成功')},fail: function(err) {console.log('失败，',err);}})	},fail: function(err) {//   that.setData({fail:true,loading:false,text:'下载失败',})console.log('失败，', err);}})},