本文共 2745 字，大约阅读时间需要 9 分钟。

微信小程序长按保存图片功能的实现

在微信小程序开发中，长按屏幕可以让用户保存页面中的图片到相册。以下是实现该功能的开发思路和代码示例

WXML部分

JS部分

function longPressSaveImg(e) {  const that = this;  const url = e.currentTarget.dataset.url;  console.log(url);  // 检查是否支持图片保存  if (!wx.saveImageToPhotosAlbum) {    wx.showModal({      title: '提示',      content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'    });    return;  }  // 检查用户授权  wx.getSetting({    success(res) {      if (!res.authSetting['scope.writePhotosAlbum']) {        wx.authorize({          scope: 'scope.writePhotosAlbum',          success() {            that.saveImg(url);          },          fail() {            wx.showModal({              title: '保存图片',              content: '保存图片需要您授权',              showCancel: true,              confirmText: '确定',              success(res) {                if (res.confirm) {                  wx.openSetting({                    success(res) {                      if (res.authSetting['scope.writePhotosAlbum']) {                        that.saveImg(url);                      } else {                        wx.showToast({                          title: '授权失败!',                          icon: 'none'                        });                      }                    },                    fail(res) {                      wx.showToast({                        title: '授权失败!',                        icon: 'none'                      });                    }                  });                } else if (res.cancel) {                  wx.showToast({                    title: '您已取消授权!',                    icon: 'none'                  });                }              }            });          }        });      }    }  });  // 如果授权通过则直接保存  that.saveImg(url);}function saveImg(imageUrl) {  wx.getImageInfo({    src: imageUrl,    success(res) {      const path = res.path;      wx.saveImageToPhotosAlbum({        filePath: path,        success(res) {          wx.showToast({            title: '保存成功'          });        },        fail(res) {          wx.showToast({            title: '您已取消保存',            icon: 'none'          });        }      });    },    fail(res) {      console.log(res);    }  });}

关于图片保存功能的实现

在微信小程序中，用户需要保存页面中的图片到相册可以通过以下方式实现

使用wx.saveImageToPhotosAlbum方法

// 获取图片路径wx.getImageInfo({src: imageUrlsuccess(res) {const path = res.path;// 保存到相册wx.saveImageToPhotosAlbum({filePath: path,success(res) {wx.showToast({title: '保存成功'});},fail(res) {wx.showToast({title: '取消保存',icon: 'none'});}});},fail(res) {console.log(res);}})

图片下载与本地存储的问题

开发中需要注意图片存储可能占用本地内存需谨慎操作

改用wx.saveImageToPhotosAlbum方法而不是下载文件

图片存储功能的实现需要注意以下几点

图片存储的权限处理

需要用户授权'_scope.writePhotosAlbum'

图片存储的技术实现

图片存储可以采用以下方法

图片存储的功能开发

建议使用wx.saveImageToPhotosAlbum来直接保存图片

图片保存的最佳实践

图片保存需要注意存储路径及错误处理

以上就是完整的代码示例和实现方法

根据实际需求进行相应配置和调用