您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >
小程序開發-保存圖片到相冊
發表時間：2021-1-6
發布人：葵宇科技
浏覽次數：40
在做小程序項目的時候，有需求要做一個(gè)開票功能，開票之後自然就需要查看發票，在讓後台做成圖片返回之後，我想了一下(xià)，查看發票除了需要看發票圖片，提供預覽圖片可(kě)以放大縮小看外，最好應該還要有一個(gè)保存圖片的功能吧。
剛好微信小程序提供了預覽和(hé)保存相冊兩個(gè)API，就正好用上。因為預覽比較簡單，我就隻是把保存相冊的開發流程寫下(xià)來，供大家也供自己往後參考了，有什麼問(wèn)題大家可(kě)以直接指正。
步驟一：編寫HTML布局結構：
<button class="default-btn" hover-class="default-btn-active" bindtap="saveInvoice">保存</button>
布局裡一個(gè)按鈕，是調起保存相冊API的，也就保存功能的按鈕。
步驟二：編寫調用保存相冊API的邏輯代碼：
因為保存相冊API中(zhōng)的filePath參數是需要圖片文(wén)件路(lù)徑的，而我拿到的是圖片的base64數據，所以需要結合writeFile()的API先把圖片文(wén)件寫入設置的用戶路(lù)徑，再用路(lù)徑去調用保存相冊API來完成保存操作。
是不是大家覺得這樣寫完就完事啦？當初我也以為是這樣的，寫完之後我自測了一下(xià)，一點按鈕就會彈出“允許保存相冊”的授權框，允許後圖片就保存下(xià)來啦，爽歪歪~~
但是，在我再次自測的時候，點了按鈕發現沒有任何反應，然後通(tōng)過fail的監聽失敗事件發現原來是因為我之前授權的時候選擇了拒絕，然後點保存按鈕，它就再也沒詢問(wèn)我授權而是直接獲取了之前拒絕的授權記錄跳到失敗去了。
好吧，掉進一個(gè)坑裡，隻能撸起袖子(zǐ)填了。既然拒絕授權被記錄了，那有沒有辦法在每次點保存的時候查一下(xià)授權，如(rú)果未允許的就主動(dòng)調起授權彈窗，這樣就能保證未授權的會再次彈出授權彈窗，已授權的就正常調用API。
方法一：
使用wx.getSetting獲取用戶當前的授權狀态，如(rú)果是未授權的，就使用 wx.authorize 向用戶發起授權請求，這樣是不是就能達到目的了。
很遺憾，經過實踐之後發現在拒絕授權後使用這個(gè)方法，依然是不可(kě)行的，沒有再重新調起授權彈窗了。（既然不成功，代碼就不展示了）
再次經過百度，發現可(kě)以通(tōng)過調用 wx.openSetting 打開設置界面，引導用戶開啟授權，這樣拒絕的授權就可(kě)以調整過來啦。
方法二：
先附上代碼：
<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'>去授權</button>/*下(xià)載發票圖片*/
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('保存失敗');
}
});
},
/*保存發票圖片到用戶相冊，調用小程序API*/
/*要考慮處理用戶拒絕授權之後如(rú)何重新調起授權請求的問(wè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('已拒絕授權，請點擊重新授權');
} else {
showMsg('保存失敗');
}
}
});
},
/*用戶手動(dòng)重新授權*/
handleSetting: function(e) {
var self = this;
if (!e.detail.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '若不打開授權，則無法将圖片保存在相冊中(zhōng)！',
showCancel: false
});
self.setData({
openSettingBtnHidden: true
})
} else {
wx.showModal({
title: '提示',
content: '您已授權，趕緊将圖片保存在相冊中(zhōng)吧！',
showCancel: false
})
self.setData({
openSettingBtnHidden: true
})
}
}
思路(lù)：
- 首先成功的邏輯還是保留，也就是如(rú)果第一次授權用戶允許了，基本上邏輯還是一樣的；
- 在調用
wx.saveImageToPhotosAlbum()API中(zhōng)fail監聽中(zhōng)添加判斷邏輯，如(rú)果是因拒絕授權而失敗的情況，就會提供重新授權的按鈕。按鈕使用open-type="openSetting"開放能力，點擊就能調起打開授權設置界面，用戶就可(kě)以修改授權。
3.用戶手動(dòng)重新授權之後的處理邏輯，查詢用戶是否真的允許了某個(gè)授權，若是，則提示成功，讓用戶重新點擊保存即可(kě)；若否，則提醒用戶因其未授權導緻無法使用保存功能。
來源：簡書
