ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

微信小程序实现保存图片(唤起用户授权)

2021-11-07 13:05:38  阅读:268  来源: 互联网

标签:success 程序实现 微信 路径 唤起 res 授权 scope wx


1.实现效果

在这里插入图片描述

2.实现原理

2.1文档地址!!!保存图片,需要用户授权。

在这里插入图片描述
在这里插入图片描述

wx.saveImageToPhotosAlbum({
  success(res) { }
})

注意:保存的图片需要是临时文件路径或本地路径(不支持网络路径)

2.2 获取本地路径

wx.getImageInfo(Object object)

wx.getImageInfo({
  src: 'images/a.jpg',//==>图片的路径,支持网络路径、本地路径、代码包路径
  success (res) {
    console.log(res.path)//====>图片的本地路径
  }
})

2.3用户授权(需要 scope.writePhotosAlbum)

2.3.1获取用户授权设置

开发者可以使用 wx.getSetting 获取用户当前的授权状态。

wx.getSetting({
  success (res) {
    console.log(res.authSetting)
    // res.authSetting = {
    //   "scope.userInfo": true,
    //   "scope.userLocation": true
    // }
  }
})

在这里插入图片描述

2.3.2用户拒绝授权

用户拒绝授权,引导用户打开设置界面进行授权。
用户可以在小程序设置界面(「右上角」 - 「关于」 - 「右上角」 - 「设置」)中控制对该小程序的授权状态。开发者可以调用 wx.openSetting 打开设置界面,引导用户开启授权。
在这里插入图片描述
在这里插入图片描述

wx.openSetting({
  success (res) {
    console.log(res.authSetting)
    // res.authSetting = {
    //   "scope.userInfo": true,
    //   "scope.userLocation": true
    // }
  }
})

2.3.3 提前发起授权请求

开发者可以使用 wx.authorize 在调用需授权 API 之前,提前向用户发起授权请求。
在这里插入图片描述

在这里插入图片描述

3.实现代码

//相机授权
  isAuthorize() {
    return new Promise((resolve, reject) => {
      wx.authorize({
        scope: 'scope.writePhotosAlbum'
      }).then(() => {
        resolve()
      }).catch(() => {
        wx.getSetting().then(res => {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            wx.showModal({
              title: '是否授权保存到相册',
              content: '请确认授权,否则无法保存到相册',
              success: res => {
                if (res.confirm) {
                  wx.openSetting()
                }
              }
            })
          }
        })
      })
    })
  },
 // 下载图片
  downloadImg() {
    let {
      poster
    } = this.data;
    // 下载文件不支持网络路径,需要先将网络路径转换为
    this.isAuthorize().then(() => {
      wx.getImageInfo({
        src: poster,
        success: (res) => {
          let path = res.path;
          wx.saveImageToPhotosAlbum({
            filePath: path,
            success: (res) => {
              util.toolsFn.toastMsg('保存成功!')
              this.setData({
                show_poster: true
              })
            },
            fail: (res) => {
              util.toolsFn.toastMsg('保存失败')
            }
          })
        },
        fail(res) {
          util.toolsFn.toastMsg('保存失败')
        }
      })
    })
  }

4.更多小程序源码,关注苏苏的码云,一起学习,共同进步。

标签:success,程序实现,微信,路径,唤起,res,授权,scope,wx
来源: https://blog.csdn.net/qq_48085286/article/details/121190045

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有