前言:首先我们要知道,如果小程序首次发起授权被拒绝之后,再次点击同一个按钮执行的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.wxsspage { 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.jsPage({ 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 证书” 这个选项,不然会报域名类的错误。
微信小程序——保存图片到手机相册(代码详解)
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序——保存图片到手机相册(代码详解)
相关推荐
如何实现线上卖断货?私域流量与公域流量哪个重要?15013808327
公众号再次改版高坪区E企盈小程序小程序又多了一个入口
数据恢复软件(二):用C++重写恢复B乐都县E企盈小程序MP位图文件的小程序
微信小程序加载图片时,湘桥区E企盈小程序先拉长,再恢复正常
转:(很有用)有多个按钮,点击一个变色,点击另吴中区E企盈小程序一个变色,原来的恢复颜色的方法
第12课微信小程序Component构造器自道里区E企盈小程序定义组件:
导航中的南海区E企盈小程序小竖线总结
小程序:after实现德格县E企盈小程序1px纵向分割线
汉沽区E企盈小程序企业微信内测朋友圈和客户群功能:小程序C位出道!
小程序运行加载密山市E企盈小程序机制
小程通城县E企盈小程序序中间有字的分隔线
公众号和小程序可以同名了名称支持同主体复盘锦E企盈小程序用
最新评论
独特万商直播系统,直播系统技术开发公司
万商直播系统开发公司
优秀的团队,万商直播管理系统
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务