【uniapp小程序】实现二维码图片弹窗、保存图片功能
小程序uniapp需要实现一个点击某个按钮后,弹出二维码图片,并且有保存图片的功能。代码实现:html部分:使用uniapp中的unipopup组件进行弹窗<uni-popup ref="kefu" type="center" :mask-click="false" class="kefu"><view class="popup"><view class="icon-
·
小程序uniapp需要实现一个点击某个按钮后,弹出二维码图片,并且有保存图片的功能。
代码实现:
html部分:
使用uniapp中的unipopup组件进行弹窗
<uni-popup ref="kefu" type="center" :mask-click="false" class="kefu">
<view class="popup">
<view class="icon-close">
<uni-icons type="close" size="30" @click="close" color="#fff">
</uni-icons>
</view>
<image src="../../static/images/showModal/qrcode.png" mode="widthFix"
class="QRcode"></image>
<button type="warn" size="default" class="btn-savecode"
@click="saveQRcode">保存图片</button>
</view>
</uni-popup>
css部分:
注意事项:
由于uniapp的unipoup组件有隐藏的白色背景,以及当字体图标需要出现在图片右上角时,所以需要修改组件类css中的background-color为透明,overfloew-y防止图标远离图片后会被隐藏
/deep/.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box{
background-color: transparent;
position: relative;
max-width: 80%;
max-height: 80%;
overflow-y: visible;
.popup{
width: 100%;
.icon-close{
display: block;
text-align: right;
margin-right: -60rpx;
}
.QRcode{
width: 450rpx;
display: block;
}
.btn-savecode{
margin: 20rpx 100rpx;
border-radius: 50rpx;
font-size: 30rpx;
}
}
}
JS部分:
Uniapp在使用uni.authorize进行授权时,如果用户第一次点击拒绝,再次想进行授权时,发现授权页面无法弹出,而会直接授权失败,非常影响用户体验。这时需要弹出提醒,让用户手动设置授权。
saveQRcode(){
uni.getSetting({
success:(res)=>{
if(res.authSetting['scope.writePhotosAlbum']){ //验证用户是否授权可以访问相册
this.saveQRcodeToPhotosAlbum();
}else{
uni.authorize({
scope:'scope.writePhotosAlbum',
success:(res)=>{
console.log('有授权的信息:',res);
this.saveQRcodeToPhotosAlbum();
},
fail:(err)=>{ //取消授权后再获取授权,需手动设置
uni.showModal({
content:'检测到你没打开保存相册权限,是否去设置打开',
confirmText:'确认',
cancelText:'取消',
success(res){
if(res.confirm){
uni.openSetting({
success(res) {
console.log('授权成功');
}
})
}else{
console.log('取消授权');
}
}
})
}
})
}
}
})
},
saveQRcodeToPhotosAlbum(){
let that = this
uni.saveImageToPhotosAlbum({
filePath:'static/images/showModal/qrcode.png',
success(res) {
uni.showToast({
title:'保存成功',
icon:'success'
})
that.close()
},
fail(err){
console.log(err);
}
})
}
更多推荐
已为社区贡献7条内容
所有评论(0)