在做小程序項目的時候，有需求要做一個開票功能，開票之后自然就需要查看發(fā)票，在讓后臺做成圖片返回之后，我想了一下，查看發(fā)票除了需要看發(fā)票圖片，提供預(yù)覽圖片可以放大縮小看外，最好應(yīng)該還要有一個保存圖片的功能吧。
剛好微信小程序提供了預(yù)覽和保存相冊兩個API，就正好用上。因為預(yù)覽比較簡單，我就只是把保存相冊的開發(fā)流程寫下來，供大家也供自己往后參考了，有什么問題大家可以直接指正。
步驟一：編寫HTML布局結(jié)構(gòu)：
<button class="default-btn" hover-class="default-btn-active" bindtap="saveInvoice">保存</button>
布局里一個按鈕，是調(diào)起保存相冊API的，也就保存功能的按鈕。
步驟二：編寫調(diào)用保存相冊API的邏輯代碼：
/*下載發(fā)票圖片*/
saveInvoice: function () {
var self = this,
timestamp = new Date().getTime(),
file = wx.getFileSystemManager();
file.writeFile({
filePath: `${wx.env.USER_DATA_PATH}/invoice_${timestamp}.jpeg`,
data: self.data.invoiceImg,
encoding: 'base64',
success: res => {
self.saveToAlbum(timestamp);
},
fail: err => {
showMsg('保存失敗');
}
});
},
/*保存發(fā)票圖片到用戶相冊，調(diào)用小程序API*/
saveToAlbum: function (timestamp) {
var self = this;
wx.saveImageToPhotosAlbum({
filePath: `${wx.env.USER_DATA_PATH}/invoice_${timestamp}.jpeg`,
success: res => {
showMsg('圖片已保存至相冊');
},
fail: err => {
console.log(err);
}
});
},
因為保存相冊API中的filePath參數(shù)是需要圖片文件路徑的，而我拿到的是圖片的base64數(shù)據(jù)，所以需要結(jié)合writeFile()的API先把圖片文件寫入設(shè)置的用戶路徑，再用路徑去調(diào)用保存相冊API來完成保存操作。
是不是大家覺得這樣寫完就完事啦？當(dāng)初我也以為是這樣的，寫完之后我自測了一下，一點按鈕就會彈出“允許保存相冊”的授權(quán)框，允許后圖片就保存下來啦，爽歪歪~~
但是，在我再次自測的時候，點了按鈕發(fā)現(xiàn)沒有任何反應(yīng)，然后通過fail的監(jiān)聽失敗事件發(fā)現(xiàn)原來是因為我之前授權(quán)的時候選擇了拒絕，然后點保存按鈕，它就再也沒詢問我授權(quán)而是直接獲取了之前拒絕的授權(quán)記錄跳到失敗去了。
好吧，掉進(jìn)一個坑里，只能擼起袖子填了。既然拒絕授權(quán)被記錄了，那有沒有辦法在每次點保存的時候查一下授權(quán)，如果未允許的就主動調(diào)起授權(quán)彈窗，這樣就能保證未授權(quán)的會再次彈出授權(quán)彈窗，已授權(quán)的就正常調(diào)用API。
方法一：
使用wx.getSetting獲取用戶當(dāng)前的授權(quán)狀態(tài)，如果是未授權(quán)的，就使用 wx.authorize 向用戶發(fā)起授權(quán)請求，這樣是不是就能達(dá)到目的了。
很遺憾，經(jīng)過實踐之后發(fā)現(xiàn)在拒絕授權(quán)后使用這個方法，依然是不可行的，沒有再重新調(diào)起授權(quán)彈窗了。（既然不成功，代碼就不展示了）
再次經(jīng)過百度，發(fā)現(xiàn)可以通過調(diào)用 wx.openSetting 打開設(shè)置界面，引導(dǎo)用戶開啟授權(quán)，這樣拒絕的授權(quán)就可以調(diào)整過來啦。
方法二：
先附上代碼：
<button hidden='{{!openSettingBtnHidden}}' class="default-btn" hover-class="default-btn-active" bindtap="saveInvoice">保存</button>
<button hidden='{{openSettingBtnHidden}}' class="default-btn" hover-class="default-btn-active" open-type="openSetting" bindopensetting='handleSetting'>去授權(quán)</button>
/*下載發(fā)票圖片*/
saveInvoice: function () {
var self = this,
timestamp = new Date().getTime(),
file = wx.getFileSystemManager();
file.writeFile({
filePath: `${wx.env.USER_DATA_PATH}/invoice_${timestamp}.jpeg`,
data: self.data.invoiceImg,
encoding: 'base64',
success: res => {
self.saveToAlbum(timestamp);
},
fail: err => {
showMsg('保存失敗');
}
});
},
/*保存發(fā)票圖片到用戶相冊，調(diào)用小程序API*/
/*要考慮處理用戶拒絕授權(quán)之后如何重新調(diào)起授權(quán)請求的問題*/
saveToAlbum: function (timestamp) {
var self = this;
wx.saveImageToPhotosAlbum({
filePath: `${wx.env.USER_DATA_PATH}/invoice_${timestamp}.jpeg`,
success: res => {
showMsg('圖片已保存至相冊');
},
fail: err => {
console.log(err);
if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny' || err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied') {
self.setData({
openSettingBtnHidden: false
});
showMsg('已拒絕授權(quán)，請點擊重新授權(quán)');
} else {
showMsg('保存失敗');
}
}
});
},
/*用戶手動重新授權(quán)*/
handleSetting: function(e) {
var self = this;
if (!e.detail.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '若不打開授權(quán)，則無法將圖片保存在相冊中！',
showCancel: false
});
self.setData({
openSettingBtnHidden: true
})
} else {
wx.showModal({
title: '提示',
content: '您已授權(quán)，趕緊將圖片保存在相冊中吧！',
showCancel: false
})
self.setData({
openSettingBtnHidden: true
})
}
}
思路：
- 首先成功的邏輯還是保留，也就是如果第一次授權(quán)用戶允許了，基本上邏輯還是一樣的；
- 在調(diào)用
wx.saveImageToPhotosAlbum()API中fail監(jiān)聽中添加判斷邏輯，如果是因拒絕授權(quán)而失敗的情況，就會提供重新授權(quán)的按鈕。按鈕使用open-type="openSetting"開放能力，點擊就能調(diào)起打開授權(quán)設(shè)置界面，用戶就可以修改授權(quán)。
3.用戶手動重新授權(quán)之后的處理邏輯，查詢用戶是否真的允許了某個授權(quán)，若是，則提示成功，讓用戶重新點擊保存即可；若否，則提醒用戶因其未授權(quán)導(dǎo)致無法使用保存功能。
