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

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

具体思路:

  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
                });
            }
        });
    },
});

文章来源地址https://www.toymoban.com/news/detail-777465.html

到了这里,关于微信小程序实现图片下载与保存功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包