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


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 Array对象
Dec 29 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
vue.js todolist实现代码
Oct 29 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
vue解决跨域问题(推荐)
Nov 10 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
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数字型字符串加解密代码
2008/04/24 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
PDO::query讲解
2019/01/29 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
python os.path模块常用方法实例详解
2018/09/16 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
教学实习自我评价
2014/01/28 职场文书
矛盾论读书笔记
2015/06/29 职场文书