小程序web-view嵌套H5如何实现图片下载或json数据传输
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/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: '服务正忙' })
}
})
}
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:2 个月前 )
960b763e
4 个月前
8c391e04
7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)