【uniapp小程序】实现二维码图片弹窗、保存图片功能 |
您所在的位置：网站首页 › app弹窗图片 › 【uniapp小程序】实现二维码图片弹窗、保存图片功能 |
【uniapp小程序】实现二维码图片弹窗、保存图片功能
|
小程序uniapp需要实现一个点击某个按钮后，弹出二维码图片，并且有保存图片的功能。
代码实现： html部分： 使用uniapp中的unipopup组件进行弹窗 保存图片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); } }) } |
【本文地址】