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

首先我们要知道,如果小程序首次发起授权被拒绝之后,再次点击同一个按钮执行的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 证书” 这个选项,不然会报域名类的错误。

你可能感兴趣的:(微信小程序,javascript,微信小程序,小程序,前端)