微信小程序实现保存图片到相册功能


Posted in Javascript onNovember 30, 2018

项目中有个保存二维码到相册的功能,所以涉及到用户是否授权相册权限的问题。废话不多说,直接上干货...

 

功能逻辑:

先检查用户请求过的权限中是否允许"保存到相册"权限,如果没有请求过这个权限,应该向用户发起授权请求(弹窗授权),如果请求过这个权限,并且授权了,那就保存图片,显示保存成功;如果请求过,但是是拒绝的,就跳到设置页,重新授权。

上代码:

<view bindtap='save'>保存图片到相册</view>
//点击保存图片
 save () {
  let that = this
  //若二维码未加载完毕,加个动画提高用户体验
  wx.showToast({
   icon: 'loading',
   title: '正在保存图片',
   duration: 1000
  })
  //判断用户是否授权"保存到相册"
  wx.getSetting({
   success (res) {
    //没有权限,发起授权
    if (!res.authSetting['scope.writePhotosAlbum']) {
     wx.authorize({
      scope: 'scope.writePhotosAlbum',
      success () {//用户允许授权,保存图片到相册
       that.savePhoto();
      },
      fail () {//用户点击拒绝授权,跳转到设置页,引导用户授权
       wx.openSetting({
        success () {
         wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
           that.savePhoto();
          }
         })
        }
       })
      }
     })
    } else {//用户已授权,保存到相册
     that.savePhoto()
    }
   }
  })
 },
//保存图片到相册,提示保存成功
 savePhoto() {
  let that = this
  wx.downloadFile({
   url: that.data.imgUrl,
   success: function (res) {
    wx.saveImageToPhotosAlbum({
     filePath: res.tempFilePath,
     success(res) {
      wx.showToast({
       title: '保存成功',
       icon: "success",
       duration: 1000
      })
     }
    })
   }
  })
 }

注:如果你不点击"保存到相册"的时候去看设置页,是没有"保存到相册"的开关的,只有点过了保存到相册,请求过这个弹窗授权后,设置页才会有"保存到相册"的开关

总结

以上所述是小编给大家介绍的微信小程序实现保存图片到相册功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript的一种模块模式
Mar 22 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
react-router中的属性详解
Jun 01 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
js canvas实现写字动画效果
Nov 30 #Javascript
webpack打包多页面的方法
Nov 30 #Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 #Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 #Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 #Javascript
js字符串倒序的实例代码
Nov 30 #Javascript
实例讲解JavaScript截取字符串
Nov 30 #Javascript
You might like
PHP调用三种数据库的方法(1)
2006/10/09 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
js 小贴士一星期合集
2010/04/07 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Django Rest framework频率原理与限制
2019/07/26 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
商务主管岗位职责
2013/12/08 职场文书
三好学生评语大全
2014/12/29 职场文书
北京故宫的导游词
2015/01/31 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
php将xml转化对象的实例详解
2021/11/17 PHP