小程式–儲存圖片到相簿功能實現

RossDan發表於2018-11-30

　　專案中有個儲存二維碼到相簿的功能，所以涉及到使用者是否授權相簿許可權的問題。廢話不多說，直接上乾貨…

 　　功能邏輯：

　　　先檢查使用者請求過的許可權中是否允許”儲存到相簿”許可權，如果沒有請求過這個許可權，應該向使用者發起授權請求（彈窗授權），如果請求過這個許可權並且授權了，那就儲存圖片，顯示儲存成功；如果請求過且拒絕授權,就跳到設定頁，讓使用者重新授權。

　　上程式碼：

<view bindtap=`save`>儲存圖片到相簿</view>
 1 //點選儲存圖片
 2   save () {
 3     let that = this
 4     //若二維碼未載入完畢，加個動畫提高使用者體驗
 5     wx.showToast({
 6       icon: `loading`,
 7       title: `正在儲存圖片`,
 8       duration: 1000
 9     })
10     //判斷使用者是否授權"儲存到相簿"
11     wx.getSetting({
12       success (res) {
13         //沒有許可權，發起授權
14         if (!res.authSetting[`scope.writePhotosAlbum`]) {
15           wx.authorize({
16             scope: `scope.writePhotosAlbum`,
17             success () {//使用者允許授權，儲存圖片到相簿
18               that.savePhoto();
19             },
20             fail () {//使用者點選拒絕授權，跳轉到設定頁，引導使用者授權
21               wx.openSetting({
22                 success () {
23                   wx.authorize({
24                     scope: `scope.writePhotosAlbum`,
25                     success() {
26                       that.savePhoto();
27                     }
28                   })
29                 }
30               })
31             }
32           })
33         } else {//使用者已授權，儲存到相簿
34           that.savePhoto()
35         }
36       }
37     })
38   },
39 //下載圖片地址並儲存到相簿，提示儲存成功
40   savePhoto() {
41     let that = this
42     wx.downloadFile({
43       url: that.data.imgUrl,
44       success: function (res) {
45         wx.saveImageToPhotosAlbum({
46           filePath: res.tempFilePath,
47           success(res) {
48             wx.showToast({
49               title: `儲存成功`,
50               icon: "success",
51               duration: 1000
52             })
53           }
54         })
55       }
56     })
57   }

　注：如果你不點選”儲存到相簿”的時候去看設定頁，是沒有”儲存到相簿”的開關的，只有點過了儲存到相簿，請求過這個彈窗授權後，設定頁才會有”儲存到相簿”的開關

 

　兄弟姐妹們，如果有幫助，別忘了給個好評喲

相關文章