全棧工程師之路-中級篇之小程序開發-第三章第五節獲取用戶權限、下載文件、保存到相冊、用戶拒絕受權從新受權

繼上一節課，咱們已經簡要說明了將圖片保存到相冊的流程和方法。
這節課咱們圍繞這個問題，展開講解獲取用戶權限，將網絡圖片下載到臨時文件，最後保存到相冊。

獲取用戶權限 wx.authorize

使用方法以下：

// 能夠經過 wx.getSetting 先查詢一下用戶是否受權了
wx.getSetting({
    success(res) {
      if (!res.authSetting[scope]) {
        wx.authorize({
          scope: scope,
          success() {
              console.log('受權成功')
          }
})}}})

這裏的scope有5種參數，使用中間那行接口的時候，就要獲取相應的scope權限。

這裏咱們拿scope.writePhotosAlbum爲例。

咱們在小程序初始化的時候獲取權限，也能夠在要保存圖片的時候獲取權限。
保存運行效果以下：

這裏還有一個調試小技巧。

調試技巧

清楚受權緩存，就能夠不斷調試受權。

下載文件wx.downloadFile

咱們在點擊圖片的響應事件裏面調用下載文件的方法

showImg:function(event){
    var imgSrc = event.currentTarget.dataset.imgSrc;
    //下載文件
    wx.downloadFile({
      url:imgSrc,
      success:function (res){
        console.log(res);
      }
    })
},

保存運行，點擊圖片。能夠在console中查看日誌。

這裏的tempFilePath就是下載到本地的臨時文件。
能夠進一步的調用wx.saveFile將臨時文件保存爲永久文件。
注意這個文件大小限制了10M。

保存到相冊wx.saveImageToPhotosAlbum

接下來咱們將本地的臨時文件，保存到相冊裏。

wx.saveImageToPhotosAlbum({
      filePath: res.tempFilePath,
      success:function(data){
        console.log(data);
      },
      fail:function(err){
        console.log(err);
      }
})

這裏的res就是咱們調用下載文件的回調數據，實際代碼結構以下：

保存運行，點擊圖片。

在工具上調試，會彈出保存窗口。
能夠點擊肯定、取消。
到這裏咱們的功能就都完成了。
接下來咱們來看幾種錯誤狀況。
一、最開始用戶點擊了拒絕受權。（使用上面的調試技巧，清空一下受權記錄）
錯誤碼：errMsg:」saveImageToPhotosAlbum:fail auth deny」

二、用戶點擊了取消。
錯誤碼：errMsg:」saveImageToPhotosAlbum:fail cancel」

三、若是一開始用戶點擊了拒絕受權，那就一直是拒絕的。
咱們在保存錯誤回調中加入一下測試代碼

運行結果

用戶拒絕受權從新受權

可是咱們有不少小程序的設計都是在用戶贊成受權的狀況下，才能正常使用的。
這裏咱們能夠經過調用wx.openSetting的方法打開受權設置頁面。
修改咱們的測試代碼。

保存運行。點擊圖片。

就會打開受權管理頁面。
用戶設置完成點擊肯定，會響應success函數。
可是無論用戶是否從新打開都是響應同一個函數。
因此咱們能夠判斷咱們須要的權限是否打開，
而後分別給出提示。
咱們修改wx.openSetting函數，保存運行。點擊圖片。

wx.openSetting({
    success(settingdata){
        console.log(settingdata)
        if (settingdata.authSetting.scope.writePhotosAlbum){
            console.log('獲取權限成功，給出再次點擊圖片保存到相冊的提示。')
        }else{
            console.log('獲取權限失敗，給出不給權限就沒法正常使用的提示')
        }
    }
})

這裏有一個報錯，咱們的代碼裏settingdata.authSetting.scope.writePhotosAlbum這樣的取值猛地一看並無錯誤，這也是一個比較容易犯的一個錯誤，可能以爲沒有錯，後面的scope.writePhotosAlbum對應圖中紅框中的屬性名。可是按程序理解的話，上面的數據結構以下：

settingdata：{
  authSetting：{
    scope：{
      writePhotosAlbum：false
    }
  }  
}

因此這裏咱們修改一下settingdata.authSetting.scope.writePhotosAlbum，改爲settingdata.authSetting[‘scope.writePhotosAlbum’]。這裏就是js中的兩種取值方式了，點取值和中括號取值，中括號有一個最大的有點就是中括號內能夠寫一個變量。
保存運行，點擊圖片。先直接點擊關閉，再點擊圖片，勾選權限，再點擊關閉。日誌以下：

源代碼：百度雲 連接：http://pan.baidu.com/s/1dFgtiHN 密碼：77yw
這節課的內容就到這裏結束了。
感謝您的閱讀。
我是莽夫，但願你開心。
若是你以爲本文對你有幫助，請掃描文末二維碼，支持博主原創。
但願你們關注個人我的公衆號ionic_