微信小程序圖片保存到本地
發(fā)布時間：2021-06-21 09:53 所屬欄目：小程序開發(fā)教程
微信小程序圖片保存到本地是一個常用功能：
這里講解下完整實現(xiàn)思路：
因為微信官方的授權(quán)只彈一次，用戶拒絕后再次調(diào)用，就需要結(jié)合button組件的微信開放能力來調(diào)起，以下方案在微信各種授權(quán)中可參考。
wxml部分：一個保存圖片按鈕（A），一個button組件(B)用來觸發(fā)授權(quán)，B透明度為0，蓋在A上，用一個變量來控制是否存在頁面中。
<view class='btn ' bindtap='saveImg'>保存</view>
<button class='openSetting' open-type="openSetting" bindopensetting='handleSetting' hidden='{{openSettingBtnHidden}}'>授權(quán)</button>
|
js中：
data:{
openSettingBtnHidden: true,//是否授權(quán)
imgUrl: '圖片地址'
},
// 保存圖片
saveImg:function(e){
let that = this;
//獲取相冊授權(quán)
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
//這里是用戶同意授權(quán)后的回調(diào)
that.saveImgToLocal();
},
fail() {//這里是用戶拒絕授權(quán)后的回調(diào)
that.setData({
openSettingBtnHidden: false
})
}
})
} else {//用戶已經(jīng)授權(quán)過了
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
})
},
})
}
})
},
// 授權(quán)
handleSetting: function (e) {
let that = this;
// 對用戶的設(shè)置進(jìn)行判斷，如果沒有授權(quán)，即使用戶返回到保存頁面，顯示的也是“去授權(quán)”按鈕；同意授權(quán)之后才顯示保存按鈕
if (!e.detail.authSetting['scope.writePhotosAlbum']) {
// wx.showModal({
// title: '警告',
// content: '若不打開授權(quán)，則無法將圖片保存在相冊中！',
// showCancel: false
// })
that.setData({
openSettingBtnHidden: false
})
} else {
// wx.showModal({
// title: '提示',
// content: '您已授權(quán)，趕緊將圖片保存在相冊中吧！',
// showCancel: false
// })
that.setData({
openSettingBtnHidden: true
})
}
},
|
