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

这篇具有很好参考价值的文章主要介绍了微信小程序——保存图片到手机相册（代码详解）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

业务思路：
1、保存图片到相册的api：wx.saveImageToPhotosAlbum()需要用户授权scope.writePhotosAlbum，所以我们一开始就要先判断用户是否已经授予这个权限了。wx.getSetting(...)来获取用户授予了哪些权限，再进行判断。
2、如果用户没有授予这个权限
情况一：首次打开小程序，那么就调用
wx.authorize({scope: 'scope.writePhotosAlbum'})
来发起授权弹窗请求；
情况二：首次已经发起授权弹框了，但是用户拒绝授权了。我们就需要引导用户到设置页面进行手动授权。
3、用户已经授权了之后就可以使用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表示还没首次进行弹框授权，或者已经授权了；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 证书” 这个选项，不然会报域名类的错误。文章来源地址https://www.toymoban.com/news/detail-761491.html

到了这里，关于微信小程序——保存图片到手机相册（代码详解）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！