微信小程序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);

        }
    })
  },

目前想到的方法就是这个，如果有更好的方法，欢迎指导