vue3+ts+uniapp(微信小程序)---- 点击按钮保存图片的功能
描述:后台会给一张二维码图片,用户点击保存按钮即可保存图片到相册。
注意:
1)图片要是https形式;
2)要在微信公众平台中更新隐私协议,添加相册写入授权;
3)要在微信公众平台中开发设置中配置服务器域名中的downloadFile合法域名。
- 封装保存图片功能的ts,名称为downloadFile.ts
javascript
/*
* @Description: 点击按钮保存图片
*/
//引导用户开启权限
const isAuth = () => {
uni.showModal({
content: '由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权。',
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (result) => {
console.log(result.authSetting)
}
})
}
}
})
}
//保存网络图片到本地
const saveNetImageToLocal = (url: string) => {
uni.downloadFile({
url: url,
success: (res) => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
setTimeout(() => {
uni.$u.toast('保存成功!')
}, 1000)
},
fail: (err) => {
console.log(err.errMsg)
uni.$u.toast(err.errMsg)
},
//无论成功失败都走的回调
complete: () => {
uni.hideLoading()
}
})
} else {
uni.$u.toast('网络错误!')
}
}
})
}
/**
* @description: 点击保存图片
* @return {*}
*/
export default function downloadFile(url: string) {
uni.showLoading({
title: '正在保存图片...'
})
//向用户发起授权请求
uni.authorize({
scope: 'scope.writePhotosAlbum',
success: () => {
//授权成功保存图片到系统相册
uni.hideLoading()
saveNetImageToLocal(url)
},
//授权失败
fail: () => {
uni.hideLoading()
uni.$u.toast('未授权保存图片到相册!')
//获取用户的当前设置。获取相册权限
uni.getSetting({
success: (res) => {
uni.$u.toast(res)
//如果没有相册权限
if (!res.authSetting['scope.writePhotosAlbum']) {
isAuth()
}
},
complete: () => {
uni.hideLoading()
}
})
}
})
}
- 在页面中进行调用
javascript
<template>
<view class="py-[30rpx] px-[30rpx] box-border w-[600rpx]">
<view class="text-xl font-bold text-center mb-[40rpx]">分享二维码</view>
<view class="w-[400rpx] h-[400rpx] m-auto">
<u-image width="400rpx" height="400rpx" :src="shareCodeImg" closeable></u-image>
</view>
<view class="w-[300rpx] m-auto mt-[40rpx]">
<u-button type="primary" @click="downloadImg(shareCodeImg)">保存图片</u-button>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import downloadFile from '@/hooks/downloadFile.ts'
const shareCodeImg = ref('') // 二维码图片
/**
* @description: 点击按钮保存图片
* @param {*} url:图片路径
* @return {*}
*/
const downloadImg = (url) => {
downloadFile(url)
}
</script>