最近公司小程序做了一个功能,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: '服务正忙' })
				   }
				})
			}

 

GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:2 个月前 )
960b763e 4 个月前
8c391e04 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐