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


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中关于indexOf的使用方法与问题小结
Aug 05 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
javascript实现五星评分功能
Nov 10 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
详解React中setState回调函数
Jun 14 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 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执行sql语句的写法
2009/03/10 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
laravel安装和配置教程
2014/10/29 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
javaScript基础详解
2017/01/19 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
python 运算符 供重载参考
2009/06/11 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
深入理解Django的中间件middleware
2018/03/14 Python
Python绘制3D图形
2018/05/03 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
python中如何写类
2020/06/29 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
大学生四个方面的自我评价
2013/09/19 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript