微信小程序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 文件是空的，看个人需要）
以下代码在安卓上是没毛病的，苹果手机回存在打开预览就返回当前页去了。
那解决这个问题在返回上一页加一个时间函数就行了。
然后测试时部分苹果手机会出现预览成功了，但是显示空白界面（返回上一页 ）
解决这个问题 在可以在wx.downloadFile之后使用setTimeout来调用openDocument，这样可以确保文件下载并缓存后再进行预览
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);}})},
目前想到的方法就是这个，如果有更好的方法，欢迎指导