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


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和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 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
php定界符
2014/06/19 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
学习ExtJS Column布局
2009/10/08 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
js中string和number类型互转换技巧(分享)
2016/11/28 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
vue--vuex详解
2019/04/15 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
Python中你应该知道的一些内置函数
2017/03/31 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
下载官网python并安装的步骤详解
2019/10/12 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
25道Java面试题集合
2013/05/21 面试题
推荐信格式范文
2014/05/09 职场文书
语文教研活动总结
2014/07/02 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
教师节座谈会主持词
2015/07/03 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang