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

 更新时间: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
      })
     }
    })
   }
  })
 }

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

总结

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

相关文章

  • 网站页面自动跳转实现方法PHP、JSP(上)

    网站页面自动跳转实现方法PHP、JSP(上)

    自动转向,也叫自动重定向。自动跳转,指当访问用户登陆到某网站时,自动将用户转向其它网页地址的一种技术。转向的网页地址可以是网站内的其它网页,也可以是其它网站。
    2010-08-08
  • 使用微信小程序API,调用微信的各种内置能力。

    使用微信小程序API,调用微信的各种内置能力。

    微信小程序如何使用小程序API,去调用微信提供的各种内置能力(即微信API)。小程序开发框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
    2022-12-12
  • JavaScript数组扁平转树形结构数据(Tree)的实现

    JavaScript数组扁平转树形结构数据(Tree)的实现

    本文主要介绍了JavaScript数组扁平转树形结构数据(Tree)的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • javascript实现随机抽奖功能

    javascript实现随机抽奖功能

    这篇文章主要为大家详细介绍了javascript实现随机抽奖功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 在JavaScript中如何访问暂未存在的嵌套对象

    在JavaScript中如何访问暂未存在的嵌套对象

    这篇文章主要给大家介绍了关于在JavaScript中如何访问暂未存在的嵌套对象的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • JS鼠标3次点击事件实现代码及扩展思路

    JS鼠标3次点击事件实现代码及扩展思路

    这篇文章主要介绍了JS鼠标3次点击事件实现及扩展思路,需要的朋友可以参考下
    2017-09-09
  • 分享5个JavaScript的写法小技巧

    分享5个JavaScript的写法小技巧

    写代码的时候总有一些东西是会重复出现的,次数多了你就会想找找捷径了,下面这篇文章主要给大家介绍了关于5个JavaScript的写法小技巧,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-02-02
  • 如何在webpack项目中调试loader插件

    如何在webpack项目中调试loader插件

    最近在学习webpack,本文主要介绍了loader插件的调试方法,需要的朋友们下面随着小编来一起学习学习吧
    2021-06-06
  • 微信小程序页面与组件之间信息传递与函数调用

    微信小程序页面与组件之间信息传递与函数调用

    不管是vue还是react中,都在强调组件思想,所以下面这篇文章主要给大家介绍了关于微信小程序页面与组件之间信息传递与函数调用的相关资料,需要的朋友可以参考下
    2021-05-05
  • javascript刷新父页面方法汇总详解

    javascript刷新父页面方法汇总详解

    这篇文章主要介绍了javascript刷新父页面方法汇总详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10

最新评论