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

 更新时间:2018年11月30日 11:10:36   作者:RossDan  
项目中有个保存二维码到相册的功能,所以涉及到用户是否授权相册权限的问题。这篇文章主要介绍了微信小程序实现保存图片到相册功能,需要的朋友可以参考下

项目中有个保存二维码到相册的功能,所以涉及到用户是否授权相册权限的问题。废话不多说,直接上干货...

   功能逻辑:

    先检查用户请求过的权限中是否允许"保存到相册"权限,如果没有请求过这个权限,应该向用户发起授权请求(弹窗授权),如果请求过这个权限,并且授权了,那就保存图片,显示保存成功;如果请求过,但是是拒绝的,就跳到设置页,重新授权。

  上代码:

<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
      })
     }
    })
   }
  })
 }

注:如果你不点击"保存到相册"的时候去看设置页,是没有"保存到相册"的开关的,只有点过了保存到相册,请求过这个弹窗授权后,设置页才会有"保存到相册"的开关

总结

以上所述是小编给大家介绍的微信小程序实现保存图片到相册功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 使用D3.js构建实时图形的示例代码

    使用D3.js构建实时图形的示例代码

    这篇文章主要介绍了使用D3.js构建实时图形的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • javascript 中按属性值查找数组中的对象多种方法

    javascript 中按属性值查找数组中的对象多种方法

    JavaScript 数组可以保存混合类型的不同值,例如字符串、空值或布尔值,并且不需要数组的大小来指定它在哪里自动增长和动态,这篇文章主要介绍了javascript 中按属性值查找数组中的对象多种方法,需要的朋友可以参考下
    2023-06-06
  • uniapp,微信小程序中使用 MQTT的问题

    uniapp,微信小程序中使用 MQTT的问题

    这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • 微信小程序显示倒计时功能示例【测试可用】

    微信小程序显示倒计时功能示例【测试可用】

    这篇文章主要介绍了微信小程序显示倒计时功能,结合实例形式分析了微信小程序针对给定时间的倒计时功能相关界面显示与逻辑运算操作技巧,需要的朋友可以参考下
    2018-12-12
  • JS实现留言板功能[楼层效果展示]

    JS实现留言板功能[楼层效果展示]

    小编最近在基于js实现留言板功能,实现的功能有发布人和发布内容做非空校验,楼层效果展示和发布时间展示。具体实例代码大家参考下本文
    2017-12-12
  • es6函数之尾递归用法实例分析

    es6函数之尾递归用法实例分析

    这篇文章主要介绍了es6函数之尾递归用法,结合实例形式分析了es6函数尾递归原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • 通过javascript把图片转化为字符画

    通过javascript把图片转化为字符画

    平时我们都是使用软件把图片转化为字符画,今天我就用JAVASCRIPT把图片转化成字符画,在娱乐中学习一些JS、HTML5、canvas的使用方法。
    2013-10-10
  • js数组删除问题(splice和delete的用法)

    js数组删除问题(splice和delete的用法)

    这篇文章主要介绍了js数组删除问题(splice和delete的用法),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • js 实现无干扰阴影效果 简单好用(附文件下载)

    js 实现无干扰阴影效果 简单好用(附文件下载)

    js实现无干扰阴影效果,简单好用,需要的朋友可以参考下。
    2009-12-12
  • 简单快速的实现js计算器功能

    简单快速的实现js计算器功能

    这篇文章主要教大家如何快速简单的实现js计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08

最新评论