微信小程序> 微信小程序保存图片到手机相册代码详解-微信产生很多小图片在相册里-小程序分享图片大小

微信小程序保存图片到手机相册代码详解-微信产生很多小图片在相册里-小程序分享图片大小

浏览量:1403 时间: 来源:winne雪
前言:1.

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

buttonbindopensetting"onOpenSetting"open-type"openSetting"保存图片到手机/button业务思路:2.

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

详细代码:3.

1、saveImg.wxml

viewclass"box"imageclass"img"src"{{photoUrl}}"bindtap'onPreviewImage'/imageviewclass"btn"buttonwx:if"{{!isAuthSavePhoto}}"bindtap"onSaveToPhone"class"btnbutton-hover"保存图片到手机/buttonbuttonwx:elsebind:tap"showModal"class"btnbutton-hover"保存图片到手机/button!--我们不使用点击按钮即打开设置页面的方式,而是使用上面那种先显示提示框让用户点确定按钮后再打开设置页面--!--buttonwx:elsebind:opensetting"onOpenSetting"open-type"openSetting"class"btnbutton-hover"保存二维码到手机/button--/view/view4.

2、saveImg.wxss

page{background:#fff;text-align:center;}.box{padding:30rpx80rpx;}.img{width:430rpx;height:430rpx;margin:20rpx0;}button{width:100%;background:#ffffff;border:none;border-radius:0rpx;padding:0;margin:0;}.btn{background:green;color:#ffffff;border-radius:0;}5.

3、saveImg.js

Page({data:{photoUrl:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u1003256280,1176261798fm26gp0.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(){returnnewPromise((resolve,reject){wx.getSetting({success:res{resolve(res)}})})},//发起首次授权请求authorize(){returnnewPromise((resolve,reject){wx.authorize({scope:'scope.writePhotosAlbum',success:(){resolve()},fail:res{//这里是用户拒绝授权后的回调console.log('拒绝授权')reject()}})})},savedownloadFile(img){this.downLoadFile(img).then((res){returnthis.saveImageToPhotosAlbum(res.tempFilePath)}).then((){})},//单文件下载(下载文件资源到本地),客户端直接发起一个HTTPSGET请求,返回文件的本地临时路径。downLoadFile(img){returnnewPromise((resolve,reject){wx.downloadFile({url:img,success:(res){console.log('downloadfile',res)resolve(res)}})})},//保存图片到系统相册saveImageToPhotosAlbum(saveUrl){returnnewPromise((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()//打开设置页面}elseif(res.cancel){console.log('用户点击取消')}}})}})6.

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎