微信小程序里的片怎么保存到相册,微信小程序怎样保存手机相册

前言：

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