嵌套页面h5怎么调起手机文件_以 web-view 嵌入在小程序中 h5 页面，如何处理附件下载...

前言

由于项目体积过大，以至于分包后也逐步超过了小程序的限制，所以将 h5 端的页面以 web-view 的方式嵌入了小程序。这也产生了一些意料之外的问题，这里记一个关于文件预览下载的问题。

在 h5 端中，针对图片和视频会使用 img、video 标签达到预览的效果，其余的文件类型会直接粗暴的调用 window.open 的方式打开，如果浏览器能够解析则预览，不能解析浏览器会默认下载。(这里有个问题，ios 的手机对于不能识别的文件会显示乱码)

嵌入小程序并配置了附件存储的业务域名之后发现使用 android 手机调用 window.open 会出现白屏，ios 手机则没有问题。

尝试使用 iframe 标签达到类似的效果，但是在小程序中也是没有效果的。

解决的方法

后面同事给了个思路，对于需要 window.open 打开的文件，直接跳转到一个特定的小程序原生页面，借助小程序的 api 预览文件。如果小程序环境也无法预览的文件，则使用小程序的 api 下载文件。

h5 页面的处理

import wx from 'weixin-js-sdk'

if (

process.env.TARO_ENV === 'h5' &&

window.__wxjs_environment &&

window.__wxjs_environment === 'miniprogram'

) {

wx.miniProgram.navigateTo({

url: `/pages/file/index?<