微信小程序图片保存到本地
发布时间：2021-06-21 09:53 所属栏目：小程序开发教程
微信小程序图片保存到本地是一个常用功能：
这里讲解下完整实现思路：
因为微信官方的授权只弹一次，用户拒绝后再次调用，就需要结合button组件的微信开放能力来调起，以下方案在微信各种授权中可参考。
wxml部分：一个保存图片按钮（A），一个button组件(B)用来触发授权，B透明度为0，盖在A上，用一个变量来控制是否存在页面中。
<view class='btn ' bindtap='saveImg'>保存</view>
<button class='openSetting' open-type="openSetting" bindopensetting='handleSetting' hidden='{{openSettingBtnHidden}}'>授权</button>
|
js中：
data:{
openSettingBtnHidden: true,//是否授权
imgUrl: '图片地址'
},
// 保存图片
saveImg:function(e){
let that = this;
//获取相册授权
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
//这里是用户同意授权后的回调
that.saveImgToLocal();
},
fail() {//这里是用户拒绝授权后的回调
that.setData({
openSettingBtnHidden: false
})
}
})
} else {//用户已经授权过了
that.saveImgToLocal();
}
}
})
},
saveImgToLocal: function (e) {
let that = this;
let imgSrc = that.data.imgUrl;
wx.downloadFile({
url: imgSrc,
success: function (res) {
console.log(res);
//图片保存到本地
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function (data) {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
},
})
}
})
},
// 授权
handleSetting: function (e) {
let that = this;
// 对用户的设置进行判断，如果没有授权，即使用户返回到保存页面，显示的也是“去授权”按钮；同意授权之后才显示保存按钮
if (!e.detail.authSetting['scope.writePhotosAlbum']) {
// wx.showModal({
// title: '警告',
// content: '若不打开授权，则无法将图片保存在相册中！',
// showCancel: false
// })
that.setData({
openSettingBtnHidden: false
})
} else {
// wx.showModal({
// title: '提示',
// content: '您已授权，赶紧将图片保存在相册中吧！',
// showCancel: false
// })
that.setData({
openSettingBtnHidden: true
})
}
},
|
