小程序web-view嵌套H5如何实现图片下载或json数据传输

最近公司小程序做了一个功能，web-view嵌套的html页面文件小程序是不支持下载的，问题来了，如何实现这个功能呢？

第一步：在html页面引入这个通讯js

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

第二步：html页面

<button class="img-save" onclick="saveImg()" style="border: none;">保存</button>

第三步：触发点击事件之后，其实有多种方式传输

--------------------------------------------------------------------------------第一种方式，保存文件要返回上个页面才能执行，不推荐------------------------------------------------------------------------

1.第一种方式页面返回时触发返回我们想要的数据，这里的图片我是以base64的流传输，data中就是你要传的数据了，wx.miniProgram.navigateBack({ delta: 1 })，页面返回上一页才会触发推送数据

function saveImg(){
		var imgData=$("#save").attr("href");
		var configLike=$("#configLike").val();
		if(imgData!=''&&imgData!=null){
			wx.miniProgram.postMessage({
					data: {
							imgData: imgData, // 刚才拿到的base64 数据
							configLike:configLike //点赞数量，传到小程序，非VIP只能设置100
					}
			})
			wx.miniProgram.navigateBack({ delta: 1 }) //注意这里.
							
		}else{
			alert("服务正忙");
		}
						
}

在小程序中怎么处理获取的数据呢，我这里的小程序使用的是uniapp写的，微信api的方法不一样，@message代表页面返回触发，接受到数据，可以去看官方的讲解。上面一步推送过来这里设置了会自动接受到消息的

 <web-view :src="webViewUrl" @message="getMessage"></web-view>

        getMessage(e){
				console.log(e);
				console.log("------------");
			    let img =  e.detail.data[0].imgData;
				var configLikeCount=e.detail.data[0].configLike;//点赞数量
				 this.saveImg(img);
			},
			

-------------------------------------------------------第二种，推荐-------------------------------------------------------------

1.html代码，跳转页面时会在小程序onload加载获取到参数

                function saveImg(){
						var imgData=$("#save").attr("href");
						var configLike=$("#configLike").val();
						wx.miniProgram.navigateTo({url:'/pages/interesting/interst-sucess/interst-sucess?imgData='+imgData+"&configLike="+configLike})
						
					}

2.小程序页面

onLoad(e) {
			if(e){
//接收上面的参数
				this.imgData=e.imgData;
//保存图片,保存方法和上门的一直
				this.saveImg();
			}
		},

-----最后，保存图片的方法，保存都手机相册中

        saveImg(){
				var _this=this;
				var img=this.imgData;
				uni.showLoading({title:'正在下载中...'});
				wx.getFileSystemManager().writeFile({
				  filePath: wx.env.USER_DATA_PATH + '/qrcode.png',  //这里先把文件写到临时目录里. 
				  data: img.slice(22), //注意这里
				  encoding: 'base64',
				  success: res => {
				    console.log('success')
				    wx.saveImageToPhotosAlbum({
				      filePath: wx.env.USER_DATA_PATH + '/qrcode.png', //这是把临时文件 保存到 相册, 收工
				      success: res => {
						  uni.hideLoading();
						  setTimeout(function() {
						 	uni.showToast({
						 		title: '下载成功，请到相册查看',
						 		duration: 2000,
						 		icon: 'none'
						 	});
						 }, 1000)  //延迟时间
				      },
				      fail: error => { 
						  console.log(error)
					      wx.showToast({ title: '服务正忙' })
					   }
				    })
				  },
				  fail: error => { 
					  console.log(error)
					  wx.showToast({ title: '服务正忙' })
				   }
				})
			}