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


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之卸载鼠标事件的代码
May 14 Javascript
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
微信小程序如何获取手机验证码
Nov 04 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位运算的简单权限设计
2013/06/30 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
python生成随机图形验证码详解
2017/11/08 Python
python 列表降维的实例讲解
2018/06/28 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
python多线程http压力测试脚本
2019/06/25 Python
wxPython实现整点报时
2019/11/18 Python
python实现同一局域网下传输图片
2020/03/20 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
C#笔试题和英文面试题
2013/02/07 面试题
竞选大队委员演讲稿
2014/04/28 职场文书
初中政治教学工作总结
2015/08/13 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA