首先我們要知道，如果小程序首次發(fā)起授權被拒絕之后，再次點擊同一個按鈕執(zhí)行的wx.authorize(...)不會再彈出授權窗口。所以我們需要到引導用戶到設置頁面進行手動授權。
引導用戶到設置頁面授權的方式有兩種：
第一種：使用小程序api ：wx.openSetting(...)打開設置頁面
第二種：使用button按鈕，并寫上如下代碼，點擊此按鈕打開設置頁面

<button bindopensetting="onOpenSetting" open-type="openSetting" > 
	保存圖片到手機
</button>

業(yè)務思路：
1、保存圖片到相冊的api：wx.saveImageToPhotosAlbum()需要用戶授權scope.writePhotosAlbum，所以我們一開始就要先判斷用戶是否已經(jīng)授予這個權限了。wx.getSetting(...)來獲取用戶授予了哪些權限，再進行判斷。
2、如果用戶沒有授予這個權限
情況一：首次打開小程序，那么就調用
wx.authorize({scope: 'scope.writePhotosAlbum'})
來發(fā)起授權彈窗請求；
情況二：首次已經(jīng)發(fā)起授權彈框了，但是用戶拒絕授權了。我們就需要引導用戶到設置頁面進行手動授權。
3、用戶已經(jīng)授權了之后就可以使用wx.downloadFile(...)獲取臨時本地保存路徑，然后調用wx.saveImageToPhotosAlbum(...)保存圖片到臨時路徑相冊中了。

詳細代碼：
1、saveImg.wxml

<view class="box">
    <image class="img" src="{{photoUrl}}" bindtap='onPreviewImage'></image>
    <view class="btn">
      <button wx:if="{{!isAuthSavePhoto}}" bindtap="onSaveToPhone"  class="btn button-hover" >
        保存圖片到手機
      </button>
      <button wx:else bind:tap="showModal"  class="btn button-hover" >            
        保存圖片到手機
      </button>
      <!-- 我們不使用點擊按鈕即打開設置頁面的方式，而是使用上面那種先顯示提示框讓用戶點確定按鈕后再打開設置頁面 -->
      <!-- <button wx:else bind:opensetting="onOpenSetting" open-type="openSetting"  class="btn button-hover" >  
        保存二維碼到手機
      </button> -->
    </view>
</view>

2、saveImg.wxss

page {
    background: #fff;
    text-align: center;
}

.box {
    padding: 30rpx 80rpx;
}

.img {
    width: 430rpx;
    height: 430rpx;
    margin: 20rpx 0;
}
button {
    width: 100%;
    background: #ffffff;
    border: none;
    border-radius: 0rpx;
    padding: 0;
    margin: 0;
}

.btn {
    background: green;
    color: #ffffff;
    border-radius: 0;
}

3、saveImg.js

Page({
  data:{
    photoUrl: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1003256280,1176261798&fm=26&gp=0.jpg",
    //（用來控制顯示哪個按鈕） false表示還沒首次進行彈框授權，或者已經(jīng)授權了；true表示在首次授權彈框時拒絕授權，或者在設置頁面還是拒絕了授權
    isAuthSavePhoto: false, 
  },
  // 保存圖片到手機
  onSaveToPhone() {
    this.getSetting().then((res) => {
      // 判斷用戶是否授權了保存到本地的權限
      if (!res.authSetting['scope.writePhotosAlbum']) {
        this.authorize().then(() => {
          this.savedownloadFile(this.data.photoUrl)
          this.setData({
            isAuthSavePhoto: false
          })
        }).catch(() => {
          wx.showToast({
            title: '您拒絕了授權',
            icon: 'none',
            duration: 1500
          })
          this.setData({
            isAuthSavePhoto: true
          })
        })
      } else {
        this.savedownloadFile(this.data.photoUrl)
      }
    })
  },
  //打開設置，引導用戶授權
  onOpenSetting() {
    wx.openSetting({
      success:(res) => {
        console.log(res.authSetting)
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.showToast({
            title: '您未授權',
            icon: 'none',
            duration: 1500
          })
          this.setData({// 拒絕授權
            isAuthSavePhoto: true
          })

        } else {// 接受授權
          this.setData({
            isAuthSavePhoto: false
          })
          this.onSaveToPhone() // 接受授權后保存圖片

        }

      }
    })
   
  },
  // 獲取用戶已經(jīng)授予了哪些權限
  getSetting() {
    return new Promise((resolve, reject) => {
      wx.getSetting({
        success: res => {
          resolve(res)
        }
      })
    })
  },
  // 發(fā)起首次授權請求
  authorize() {
    return new Promise((resolve, reject) => {
      wx.authorize({
        scope: 'scope.writePhotosAlbum',
        success: () => {
          resolve()
        },
        fail: res => { //這里是用戶拒絕授權后的回調
          console.log('拒絕授權')
          reject()
        }
      })
    })
  },
  savedownloadFile(img) {
    this.downLoadFile(img).then((res) => {
      return this.saveImageToPhotosAlbum(res.tempFilePath)
    }).then(() => {      
    })
  },
  //單文件下載(下載文件資源到本地)，客戶端直接發(fā)起一個 HTTPS GET 請求，返回文件的本地臨時路徑。
  downLoadFile(img) {
    return new Promise((resolve, reject) => {
      wx.downloadFile({
        url: img,
        success: (res) => {
          console.log('downloadfile', res)
          resolve(res)
        }
      })
    })
  },
  // 保存圖片到系統(tǒng)相冊
  saveImageToPhotosAlbum(saveUrl) {
    return new Promise((resolve, reject) => {
      wx.saveImageToPhotosAlbum({
        filePath: saveUrl,
        success: (res) => {
          wx.showToast({
            title: '保存成功',
            duration: 1000,
          })
          resolve()
        }
      })
    })
  },
  // 彈出模態(tài)框提示用戶是否要去設置頁授權
  showModal(){
    wx.showModal({
      title: '檢測到您沒有打開保存到相冊的權限，是否前往設置打開？',
      success: (res) => {
        if (res.confirm) {
          console.log('用戶點擊確定')
          this.onOpenSetting() // 打開設置頁面          
        } else if (res.cancel) {
          console.log('用戶點擊取消')
        }
      }
    })
  }
})

ps：注意練習的時候要在開發(fā)者工具中勾上“不校驗合法域名、web-view（業(yè)務域名）、TLS 版本以及 HTTPS 證書” 這個選項，不然會報域名類的錯誤。文章來源地址http://www.zghlxwxcb.cn/news/detail-761491.html

到了這里，關于微信小程序——保存圖片到手機相冊（代碼詳解）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！