微信小程序实现图片下载与保存功能

具体思路:

  1. 首先,定义了一个全局的定时器变量timer
  2. downloadImage函数中,如果timer已经存在,就清除它,以确保每次只有一个下载任务在进行。
  3. 然后,设置一个新的定时器,延迟1秒后开始执行下载任务。这是为了防止频繁触发下载操作。
  4. 在定时器的回调函数中,首先显示一个加载提示,然后开始下载图片。
  5. 图片的URL是从页面的data中获取的,保存在fullScreenImageUrl字段中。
  6. 使用wx.downloadFile函数下载图片,如果下载成功,就获取到图片的临时文件路径。
  7. 接下来,检查用户是否已经授权小程序保存图片到相册。如果没有授权,就请求授权。如果用户拒绝授权,就显示一个模态对话框,引导用户去设置中开启授权。
  8. 如果用户已经授权,或者在请求授权后用户同意授权,就调用saveImage函数,将图片保存到系统相册。
  9. saveImage函数中,使用wx.saveImageToPhotosAlbum函数将图片保存到系统相册。如果保存成功,就显示一个成功提示;如果保存失败,就显示一个失败提示。

完整代码:

let timer; // 定义一个定时器

Page({
    data: {
        fullScreenImageUrl: "", // 下载图片的URL
    },
    downloadImage() {
        let that = this;
        // 清除上一次的定时器
        if (timer) {
            clearTimeout(timer);
        }
        // 设置新的定时器
        timer = setTimeout(function() {
            // 显示加载提示
            wx.showToast({
                title: '下载中...',
                icon: 'loading'
            });
            let link = that.data.fullScreenImageUrl; // 获取图片URL
            // 下载文件
            wx.downloadFile({
                url: link,
                success(res) {
                    if (res.statusCode === 200) {
                        const filePath = res.tempFilePath; // 获取图片临时文件路径
                        // 检查权限
                        wx.getSetting({
                            success(res) {
                                if (!res.authSetting['scope.writePhotosAlbum']) {
                                    // 请求授权
                                    wx.authorize({
                                        scope: 'scope.writePhotosAlbum',
                                        success() {
                                            that.saveImage(filePath); // 保存图片
                                        },
                                        fail() {
                                            // 引导用户开启授权
                                            wx.showModal({
                                                title: '提示',
                                                content: '您已拒绝我们保存图片到相册,您可以在设置中开启',
                                                success(res) {
                                                    if (res.confirm) {
                                                        wx.openSetting({
                                                            success(res) {
                                                                console.log(res.authSetting)
                                                            }
                                                        })
                                                    }
                                                }
                                            })
                                        }
                                    })
                                } else {
                                    that.saveImage(filePath); // 保存图片
                                }
                            }
                        });
                    }
                },
                fail() {
                    wx.showToast({ // 添加失败提示框
                        title: '下载失败',
                        icon: 'none',
                        duration: 2000
                    });
                }
            });
        }, 1000); // 1000 毫秒的延迟
    },
    // 保存图片
    saveImage(filePath) {
        // 保存图片到系统相册
        wx.saveImageToPhotosAlbum({
            filePath: filePath,
            success(res) {
                wx.showToast({ // 添加成功提示框
                    title: '保存图片成功',
                    icon: 'success',
                    duration: 2000
                });
            },
            fail() {
                wx.showToast({ // 添加失败提示框
                    title: '保存图片失败',
                    icon: 'none',
                    duration: 2000
                });
            }
        });
    },
});

相关推荐

最近更新

  1. TCP协议是安全的吗?

    2023-12-16 04:52:01       14 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-16 04:52:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-16 04:52:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-16 04:52:01       18 阅读

热门阅读

  1. Kotlin中对生成二维码的使用详解

    2023-12-16 04:52:01       34 阅读
  2. jmeter 的beanshell使用

    2023-12-16 04:52:01       25 阅读
  3. GAN 介绍

    2023-12-16 04:52:01       40 阅读
  4. redis服务器版本升级问题

    2023-12-16 04:52:01       34 阅读
  5. 明明随机数

    2023-12-16 04:52:01       43 阅读
  6. react内置组件之<StrictMode></StrictMode>

    2023-12-16 04:52:01       30 阅读
  7. 通过Ai帮我们写前端界面设计

    2023-12-16 04:52:01       39 阅读
  8. Llinux面试题2

    2023-12-16 04:52:01       32 阅读