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


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 相关文章推荐
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
js实现文字头像的生成代码
Mar 07 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 分页类 扩展代码
2009/06/11 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
四个PHP非常实用的功能
2015/09/29 PHP
php实现Mysql简易操作类
2015/10/11 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
js获取url传值的方法
2015/12/18 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
python安装oracle扩展及数据库连接方法
2017/02/21 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
总会计师岗位职责
2014/02/19 职场文书
机械专业技术员求职信
2014/06/14 职场文书
学生安全责任书模板
2014/07/25 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python
再谈python_tkinter弹出对话框创建
2022/03/20 Python
Redis实战高并发之扣减库存项目
2022/04/14 Redis