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

冷不防 2022-12-29 14:14 472阅读 0赞

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

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

第二步：html页面

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

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

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

在小程序中怎么处理获取的数据呢，我这里的小程序使用的是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: '服务正忙' })
    				   }
    				})
    			}