当前位置：首页 > news >正文

Uniapp/微信小程序授权设置并实现点击保存图片

news 来源：原创 2024/5/10 1:21:19

一：需要用到的API

1.uni.authorize(OBJECT) -- 提前向用户发起授权请求。

uni.authorize({scope: 'scope.userInfo',success() {console.log('授权成功');}
});

注：如果用户之前拒绝了授权，此接口会直接进入失败回调。一般需要搭配uni.getSetting和uni.openSetting使用。

2.uni.getSetting (Object object) --获取用户的当前设置消息

uni.getSetting({success(res) {if (res.authSetting['scope.userInfo']) {console.log('用户已授权');} else {console.log('用户未授权');}}
});

3.uni.openSetting(Object object) --用户手动进行授权设置

uni.openSetting();

4.uni.uploadFile(OBJECT) --将本地资源上传到开发者服务器

5.uni.downloadFile(OBJECT) --下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。

6. uni.saveImageToPhotosAlbum(OBJECT) --保存图片到系统相册

二：思路

1.过程

1.判断用户是否授权保存图片到系统相册

1：如果未授权（两种情况）：调授权再保存图片

（1）用户第一次调用（uni.authorize）

（2）用户之前拒绝授权（uni.openSetting)

如果之前拒绝，过阵子想再次保存，需要判断是否第一次授权

（注意：前面已经提过了authorize只弹窗一次，如果之前拒绝过了，接口直接进入失败回调，所以需要判断是否首次）

2：如果已授权：直接保存图片

三：代码实现

1.先配置：manifest.json

"mp-weixin": {"permission": {"scope.writePhotosAlbum": {"desc": "你的图片将保存到手机相册"}},},

注：微信小程序在2023年10月17日之后，使用API需要配置隐私协议

------获取具体信息请移步官方文档uni.chooseImage(OBJECT) | uni-app官网

2. 保存图片功能代码实现：（无判断授权情况）

  downSaveImage(imgurl) {uni.showModal({title: '保存图片',content: '是否保存当前图片？',success: (res) => {if (res.confirm) {uni.downloadFile({url: imgurl,//图片地址success: (res) => {if (res.statusCode === 200) {// console.log(res.tempFilePath,'res.tempFilePathres.tempFilePath');uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function () {uni.showToast({title: '保存成功',duration: 2000,})},fail: function () {uni.showToast({title: '保存失败，请稍后重试',icon: 'none',})},})}},})} else if (res.cancel) {uni.showToast({title: "你取消了该操作",icon:'none',duration: 2000});}},})},

（2）用户授权情况部分代码

  downSaveImage(imgurl) {uni.getSetting({success(res) {if (res.authSetting['scope.writePhotosAlbum']) {// 已授权，直接保存图片//这里写保存图片代码.......} else if (res.authSetting['scope.writePhotosAlbum'] === false) {// 用户已拒绝授权，提示用户授权uni.showModal({title: '提示',content: '您未授权保存图片到相册，是否前往设置页面进行授权？',success: function (res) {if (res.confirm) {uni.openSetting({success: function (res) {if (res.authSetting['scope.writePhotosAlbum']) {//这里写保存图片代码.......}},})} else if (res.cancel) {uni.showToast({title: '您取消了授权',icon: 'none',duration: 2000,})}},})} else {// 用户第一次调用，调用授权接口uni.authorize({scope: 'scope.writePhotosAlbum',success() {//这里写保存图片代码.......},fail() {uni.showToast({title: '授权失败，请稍后重试',icon: 'none',duration: 2000,})},})}},})},

（3）添加授权+保存图片功能的完整代码

downSaveImage(imgurl) {uni.getSetting({success(res) {if (res.authSetting['scope.writePhotosAlbum']) {// 已授权，直接保存图片uni.downloadFile({url: imgurl,success: (res) => {if (res.statusCode === 200) {uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function () {uni.showToast({title: '保存成功',duration: 2000,})},fail: function () {uni.showToast({title: '保存失败，请稍后重试',icon: 'none',})},})}},})} else if (res.authSetting['scope.writePhotosAlbum'] === false) {// 用户已拒绝授权，提示用户授权uni.showModal({title: '提示',content: '您未授权保存图片到相册，是否前往设置页面进行授权？',success: function (res) {if (res.confirm) {uni.openSetting({success: function (res) {if (res.authSetting['scope.writePhotosAlbum']) {uni.downloadFile({url: imgurl,success: (res) => {if (res.statusCode === 200) {uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function () {uni.showToast({title: '保存成功',duration: 2000,})},fail: function () {uni.showToast({title: '保存失败，请稍后重试',icon: 'none',})},})}},})}},})} else if (res.cancel) {uni.showToast({title: '您取消了授权',icon: 'none',duration: 2000,})}},})} else {// 用户第一次调用，调用授权接口uni.authorize({scope: 'scope.writePhotosAlbum',success() {uni.downloadFile({url: imgurl,success: (res) => {if (res.statusCode === 200) {uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function () {uni.showToast({title: '保存成功',duration: 2000,})},fail: function () {uni.showToast({title: '保存失败，请稍后重试',icon: 'none',})},})}},})},fail() {uni.showToast({title: '授权失败，请稍后重试',icon: 'none',duration: 2000,})},})}},})
}

四：项目中注意的问题：

1.微信小程序模拟器可以保存图片，但是手机真机调试不行。

问题描述：项目中如果图片地址是后台返回的临时地址，在微信小程序模拟器返回的地址开头是：

http://tmp/.......jpg

但是真机上调试返回图片地址开头是：

wxfile://tmp/......jpg

原因：临时地址是没用的，需要使用uni.uploadFile上传到服务器上转换永久地址

代码：

   uni.uploadFile({url: 'https://app.wugongyuan.cn/api/common/uploadFile', // 上传的服务器地址filePath: res, // 临时文件路径name: 'file', // 上传文件的字段名success: function (res) {this.upLoadImgUrl = JSON.parse(res.data).data.fileUrlconsole.log(this.upLoadImgUrl, 'upImgUrl---------------')// 为什么一直先走下面的// setTimeout(()=>{console.log(this.upLoadImgUrl, 'this.upLoadImgUrl')// that.downSaveImage(this.upLoadImgUrl)that.$tools.downSaveImage(this.upLoadImgUrl)// },5000)},fail: function (error) {console.log(error)// 处理上传失败的情况},})

以上会引起作用域this指向问题，可以参考另一篇文章函数内引入外部函数的调用顺序问题及解决方案-CSDN博客