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


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 live函数
Dec 24 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
js打造数组转json函数
Jan 14 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
javascript中 try catch用法
Aug 16 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 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
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
Python迭代和迭代器详解
2016/11/10 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
python导入坐标点的具体操作
2019/05/10 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
python元组的概念知识点
2019/11/19 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
python 字段拆分详解
2019/12/17 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
双拥工作宣传标语
2014/06/26 职场文书
服务标语口号
2014/07/01 职场文书
师范毕业生求职信
2014/07/11 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python