web-view内嵌h5，h5网页内支持下载预览

1.针对图片预览 h5可以

下载依赖

npm install vue-photo-preview --save

import Vue from 'vue';
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'



var option = {
  maxSpreadZoom: 1, // 控制预览图最大的倍数，默认是2倍，
 fullscreenEl: false, //控制是否显示右上角全屏按钮
  closeEl: false, //控制是否显示右上角关闭按钮
  tapToClose: true, //点击滑动区域应关闭图库
  shareEl: false, //控制是否显示分享按钮
  zoomEl: false, //控制是否显示放大缩小按钮
  counterEl: false, //控制是否显示左上角图片数量按钮
  arrowEl: true,  //控制如图的左右箭头（pc浏览器模拟手机时）
  tapToToggleControls: true, //点击应切换控件的可见性
  clickToCloseNonZoomable: true //点击图片应关闭图库，仅当图像小于视口的大小时
}
Vue.use(preview, option)

2.针对文件下载功能 可以通过跳转至小程序下载页面 进行下载 。 h5如下：

uni.webView.navigateTo({
   url:"/pages/index/downLoading?url="+encodeURIComponent(url) 
})

小程序页面 创建 downLoading

<template>
	<view class="u-downLoadinge">
		下载中。。。
	</view>
</template>

<script>
export default {
    data() {
		return {
		}
    },
    onLoad(e){
        this.handleDownload(decodeURIComponent(e.url));
    },
    methods: {
        handleDownload(url){
            uni.showLoading({
                    title: '下载中', //提示文字
                    mask: true, //是否显示透明蒙层，防止触摸穿透，默认：false
            });
            uni.downloadFile({
                url, 
                success: (res) => {
                    uni.hideLoading();
                    if (res.statusCode === 200) {
                    let { tempFilePath } = res
						
	               //*微信小程序已停止维护[wx.saveFile接口，建议使用[FileSystemManager]对象中的方法。		
                    wx.getFileSystemManager().saveFile({
						tempFilePath: tempFilePath, //临时路径
						success: (cbres)=> {
							uni.showToast({
								icon: 'success',
								mask: true,
								title: '下载成功' , 
								duration: 1500,
							});
							uni.openDocument({         
								filePath: cbres.savedFilePath,                                                        
								showMenu:true, //关键点该属性会显示右上角三个点支持文件下载，是否有可以转发分享的功能                                
								success: (cbSubRes) => {
									uni.navigateBack({
										delta: 1,
									});
								},fail: err => {
									uni.navigateBack({
										delta: 1,
									});
								}
							})
						},
						fail: err => {
								console.log('打印err',err)
						}
					})
				},
				fail: err => {
					uni.hideLoading();
					uni.showToast({
					title: '下载失败',
					icon: 'error',
					duration: 1500,
					});
					console.log(err);
					setTimeout(() => {
					uni.navigateBack({
						delta: 1,
					});
					}, 1500);
				}
			});
		}
			
	}
}
</script>

如果遇到 uni-app downloadFile下载文件后缀为.bin格式问题

建议请求的url 返回的数据 content-type里面没填写返回文件类型

之前考虑使用postMessage发送消息让小程序开发的 结果呢 差强人意 @onPostMessage 不生效 @message 非实时