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


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 XML实现两级级联下拉列表
Nov 10 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
JavaScript设计模型Iterator实例解析
Jan 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
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
php的4种常见运行方式
2015/03/20 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
php报错502badgateway解决方法
2019/10/11 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
JS 文件大小判断的实现代码
2010/04/07 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
js实现图片局部放大效果详解
2019/03/18 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
js实现简易ATM功能
2020/10/27 Javascript
Python中生成Epoch的方法
2017/04/26 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
Python正则表达式学习小例子
2020/03/03 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
Python如何读写CSV文件
2020/08/13 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
python解包概念及实例
2021/02/17 Python
应聘文员自荐信范文
2014/03/11 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
学生上课迟到检讨书
2015/01/01 职场文书