【非常全】微信小程序下载图片到相册,微信小程序自动获取分享图片到相册

简介: 【非常全】微信小程序下载图片到相册,微信小程序自动获取分享图片到相册

背景:微信小程序用户分享时后端生成分享图片传给前端图片地址

主要用到的方法:

wx.downloadFile方法下载图片到本地并获取本地文件路径。

wx.openSetting 方法引导用户打开授权设置页面

wx.saveImageToPhotosAlbum 方法将临时文件保存到用户手机的相册中。

保存图片完整代码示例


    wx.downloadFile({
      url: '文件路径', 
      success (res) {
        if (res.statusCode === 200) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(res) {
              
            wx.showToast({
              title: '保存成功'
            });
            },
            fail (err) {
              if (
                err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || 
                err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || 
                err.errMsg === "saveImageToPhotosAlbum:fail authorize no response"
              ) {
                wx.showModal({
                  title: '提示',
                  content: '需要您授权保存相册',
                  showCancel: false,
                  success: res=> {
                    wx.openSetting({
                      success(res) {
                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                          wx.showModal({
                            title: '提示',
                            content: '获取权限成功,再次点击分享即可保存',
                            showCancel: false,
                          })
                        } else {
                          wx.showModal({
                            title: '提示',
                            content: '获取权限失败,将无法保存到相册哦~',
                            showCancel: false,
                          })
                        }
                      },
                      fail(err) {
                        console.log("fail", err)
                      },
                      complete(res) {
                        console.log("finish", res)
                      }
                    })
                  }
                })
              } else if (err.errMsg === "saveImageToPhotosAlbum:fail cancel") {
                wx.showModal({
                  title: '提示',
                  content: '取消了保存分享图片,再次点击分享即可保存',
                  showCancel: false,
                })
              } else {
              }
            }
          })
        } else {
          util.hideToast()
          wx.showModal({
            title: '提示',
            content: "图片下载失败",
            showCancel: false,
          })
        }
      },
      fail () {
        util.hideToast()
        wx.showModal({
          title: '提示',
          content: "图片下载失败",
          showCancel: false,
        })
      }
    })
目录
相关文章
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
3663 12
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
3771 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
移动开发 小程序 前端开发
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
647 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
361 0
在线课堂+工具组件小程序uniapp移动端源码
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
417 1
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
3670 3