微信小程序——保存图片到手机相册（代码详解）

首先我们要知道，如果小程序首次发起授权被拒绝之后，再次点击同一个按钮执行的wx.authorize(...)不会再弹出授权窗口。所以我们需要到引导用户到设置页面进行手动授权。
引导用户到设置页面授权的方式有两种：
第一种：使用小程序api ：wx.openSetting(...)打开设置页面
第二种：使用button按钮，并写上如下代码，点击此按钮打开设置页面

 
	保存图片到手机

业务思路：
1、保存图片到相册的api：wx.saveImageToPhotosAlbum()需要用户授权scope.writePhotosAlbum，所以我们一开始就要先判断用户是否已经授予这个权限了。wx.getSetting(...)来获取用户授予了哪些权限，再进行判断。
2、如果用户没有授予这个权限
情况一：首次打开小程序，那么就调用
wx.authorize({scope: 'scope.writePhotosAlbum'})
来发起授权弹窗请求；
情况二：首次已经发起授权弹框了，但是用户拒绝授权了。我们就需要引导用户到设置页面进行手动授权。
3、用户已经授权了之后就可以使用wx.downloadFile(...)获取临时本地保存路径，然后调用wx.saveImageToPhotosAlbum(...)保存图片到临时路径相册中了。

详细代码：
1、saveImg.wxml

    
    
      
        保存图片到手机
      
                  
        保存图片到手机
      
      
      
    

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表示还没首次进行弹框授权，或者已经授权了；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() // 接受授权后保存图片

        }

      }
    })
   
  },
  // 获取用户已经授予了哪些权限
  getSetting() {
    return new Promise((resolve, reject) => {
      wx.getSetting({
        success: res => {
          resolve(res)
        }
      })
    })
  },
  // 发起首次授权请求
  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(() => {      
    })
  },
  //单文件下载(下载文件资源到本地)，客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径。
  downLoadFile(img) {
    return new Promise((resolve, reject) => {
      wx.downloadFile({
        url: img,
        success: (res) => {
          console.log('downloadfile', res)
          resolve(res)
        }
      })
    })
  },
  // 保存图片到系统相册
  saveImageToPhotosAlbum(saveUrl) {
    return new Promise((resolve, reject) => {
      wx.saveImageToPhotosAlbum({
        filePath: saveUrl,
        success: (res) => {
          wx.showToast({
            title: '保存成功',
            duration: 1000,
          })
          resolve()
        }
      })
    })
  },
  // 弹出模态框提示用户是否要去设置页授权
  showModal(){
    wx.showModal({
      title: '检测到您没有打开保存到相册的权限，是否前往设置打开？',
      success: (res) => {
        if (res.confirm) {
          console.log('用户点击确定')
          this.onOpenSetting() // 打开设置页面          
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
})

ps：注意练习的时候要在开发者工具中勾上“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书” 这个选项，不然会报域名类的错误。