微信小程序圖片保存到本地是一個常用功能:
這里講解下完整實現(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> |
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 }) } }, |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)