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


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 相关文章推荐
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
微信小程序实现单选功能
Oct 30 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python之str操作方法(详解)
2017/06/19 Python
python获取代码运行时间的实例代码
2018/06/11 Python
python后端接收前端回传的文件方法
2019/01/02 Python
python3下pygame如何实现显示中文
2020/01/11 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
遇到的Mysql的面试题
2014/06/29 面试题
优秀的教师个人的中文求职信
2013/09/21 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
英语分层教学实施方案
2014/06/15 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
保密工作整改报告
2014/11/06 职场文书
自我检讨书范文
2015/01/28 职场文书
管理人员岗位职责
2015/02/14 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
用人单位聘用意向书
2015/05/11 职场文书
教你用python控制安卓手机
2021/05/13 Python