微信小程序开发实战：实现图片保存到手机相册的方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序开发实战：实现图片保存到手机相册的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

随着微信小程序的普及，越来越多的人开始使用微信小程序来实现各种功能。其中，将图片保存到手机相册是一个常见的需求，但是如何实现呢？本文将介绍如何使用微信小程序实现将图片保存到手机相册，帮助大家快速掌握这一实用技能。

微信小程序相册,小程序,前端,小程序

实现思路

首先，在 data 中定义了两个变量，modalType 用于控制弹框的显示与隐藏，默认为 false，imgUrl 用于存储图片的地址；
接下来，定义了一个名为 downloadImg 的函数，用于处理点击下载图片的事件。在函数中，首先调用 wx.showLoading 方法显示加载中的提示框；
然后，使用 wx.downloadFile 方法下载图片资源到本地，传入图片地址 this.data.imgUrl 作为参数。下载成功后，会返回一个临时文件路径 res.tempFilePath；
接着，使用 wx.saveImageToPhotosAlbum 方法将图片保存到系统相册，传入临时文件路径 res.tempFilePath 作为参数。保存成功后，会显示保存成功的提示框，并隐藏加载中的提示框；
如果保存失败，会判断错误信息 err.errMsg 是否为授权相关的错误，如果是，则显示需要授权保存相册的提示框，并在用户点击确定后调用 wx.openSetting 方法打开设置页面，让用户进行授权操作。授权成功后，会显示获取权限成功的提示框，否则显示获取权限失败的提示框。

源码如下

wxml文件

<!-- 按钮触发事件 -->
<button bindtap="downloadImg">点击下载图片</button>

js文件

const app = getApp(); //获取app实例
Page({
    data: {
        modalType: false, //弹框默认不显示
        imgUrl: "https://s1.ax1x.com/2022/04/11/LV4c4J.jpg", //模拟图片
    },
    // 点击下载图片事件
    downloadImg() {
        wx.showLoading({
            title: '加载中...'
        });
        //wx.downloadFile方法：下载文件资源到本地
        wx.downloadFile({
            url: this.data.imgUrl, //图片地址
            success: function (res) {
                //wx.saveImageToPhotosAlbum方法：保存图片到系统相册
                wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath, //图片文件路径
                    success: function (data) {
                        wx.hideLoading(); //隐藏 loading 提示框
                        wx.showModal({
                            title: '提示',
                            content: '保存成功',
                            modalType: false,
                        })
                    },
                    // 接口调用失败的回调函数
                    fail: function (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: '需要您授权保存相册',
                                modalType: false,
                                success: modalSuccess => {
                                    wx.openSetting({
                                        success(settingdata) {
                                            console.log("settingdata", settingdata)
                                            if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                                wx.showModal({
                                                    title: '提示',
                                                    content: '获取权限成功,再次点击图片即可保存',
                                                    modalType: false,
                                                })
                                            } else {
                                                wx.showModal({
                                                    title: '提示',
                                                    content: '获取权限失败，将无法保存到相册哦~',
                                                    modalType: false,
                                                })
                                            }
                                        },
                                        fail(failData) {
                                            console.log("failData", failData)
                                        },
                                        complete(finishData) {
                                            console.log("finishData", finishData)
                                        }
                                    })
                                }
                            })
                        }
                    },
                    complete(res) {
                        wx.hideLoading(); //隐藏 loading 提示框
                    }
                })
            }
        })
    }
})