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


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 prev ~ siblings选择器使用介绍
Aug 09 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
3种js实现string的substring方法
Nov 09 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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
dedecms模板标签代码官方参考
2007/03/17 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
php命名空间学习详解
2014/02/27 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
python实现贪吃蛇小游戏
2020/03/21 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
python中操作文件的模块的方法总结
2021/02/04 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
法国在线药房:1001Pharmacies
2021/03/07 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
linux面试题参考答案(9)
2015/01/07 面试题
五一手机促销方案
2014/03/08 职场文书
学生个人总结范文
2015/02/15 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
毕业生政审意见范文
2015/06/04 职场文书
结婚典礼致辞
2015/07/28 职场文书
校园安全教育心得体会
2016/01/15 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers