为什么小程序保存小红书图片总是失败？有没有稳定可靠的解决方法？

99ANYc3cd6 01-03 14

默认

摘要： 我们需要一个“曲线救国”的方法，核心思路是：将图片从“小红书环境”转移到“微信小程序环境”，下面我为你提供几种最常用且有效的方法,并附上详细的步骤和代码示例，保存到“我的收藏”（最...

我们需要一个“曲线救国”的方法，核心思路是：将图片从“小红书环境”转移到“微信小程序环境”。

（图片来源网络，侵删）

下面我为你提供几种最常用且有效的方法,并附上详细的步骤和代码示例。

保存到“我的收藏”（最推荐、最稳定）

这是目前最主流、最稳定、也是用户体验最好的方法，用户将小红书图片收藏到自己的“我的收藏”夹中，然后在小程序内读取这些收藏的图片,并提供保存功能。

工作流程：

用户操作：在小程序内，引导用户点击“保存到小红书收藏”按钮。
唤起小红书：小程序通过 wx.openMiniProgram API，跳转到小红书小程序,并传入当前图片的URL。
小红书保存：小红书小程序会接收到这个URL，并展示一个保存到收藏的界面，用户点击确认后,图片就被保存到他的小红书收藏夹了。
返回小程序：用户操作完成后,可以返回你的小程序。
小程序读取：你的小程序再通过 wx.getMyFavorites API 去获取用户在小红书收藏的图片列表。
最终保存：用户在小程序内选择刚刚收藏的图片，点击“保存到本地”按钮,将图片下载到手机相册。

优点：

（图片来源网络，侵删）

稳定可靠：利用官方提供的API,不会轻易失效。
用户体验好：符合用户在小红书内的使用习惯。
绕过防盗链：图片URL在小红书内部处理,没有防盗链问题。

代码示例：

在你的小程序中，引导用户保存到小红书收藏

// pages/index/index.js
saveToXHSFavorites(imageUrl) {
  wx.openMiniProgram({
    appId: 'wx5b0b6e38b531a9b4', // 小红书小程序的 AppID
    path: `pages/image/index?url=${encodeURIComponent(imageUrl)}`, // 小红书小程序接收图片URL的页面
    extraData: {
      // 可以在这里传递一些额外参数，小红书小程序可能会用到
    },
    success(res) {
      console.log('成功跳转到小红书小程序');
      // 跳转成功后，可以提示用户去小红书保存
      wx.showToast({
        title: '请前往小红书保存图片',
        icon: 'none'
      });
    },
    fail(err) {
      console.error('跳转失败', err);
      wx.showToast({
        title: '跳转失败，请重试',
        icon: 'none'
      });
    }
  });
}

在你的小程序中，获取用户的收藏列表并提供保存功能

// pages/my-favorites/my-favorites.js
Page({
  data: {
    favoriteImages: []
  },
  onLoad() {
    this.loadFavorites();
  },
  // 加载收藏列表
  loadFavorites() {
    wx.getMyFavorites({
      success: (res) => {
        console.log('获取收藏成功', res);
        // 假设收藏列表在 res.data.items 中
        this.setData({
          favoriteImages: res.data.items.filter(item => item.type === 'image').map(item => item.url)
        });
      },
      fail: (err) => {
        console.error('获取收藏失败', err);
        wx.showToast({
          title: '获取收藏失败',
          icon: 'none'
        });
      }
    });
  },
  // 保存图片到本地
  saveImageToAlbum(e) {
    const imageUrl = e.currentTarget.dataset.url;
    wx.downloadFile({
      url: imageUrl,
      success: (res) => {
        const tempFilePath = res.tempFilePath;
        wx.saveImageToPhotosAlbum({
          filePath: tempFilePath,
          success: () => {
            wx.showToast({
              title: '保存成功',
            });
          },
          fail: (err) => {
            if (err.errMsg.includes('auth deny')) {
              wx.showModal({
                title: '授权提示',
                content: '需要您授权保存图片到相册',
                success: (res) => {
                  if (res.confirm) {
                    wx.openSetting();
                  }
                }
              });
            } else {
              console.error('保存失败', err);
              wx.showToast({
                title: '保存失败',
                icon: 'none'
              });
            }
          }
        });
      },
      fail: (err) => {
        console.error('下载失败', err);
        wx.showToast({
          title: '下载图片失败',
          icon: 'none'
        });
      }
    });
  }
});

用户手动截图（最简单、最无依赖）

这是最原始但最有效的方法,不需要任何代码或复杂的流程。

工作流程：

在小程序内展示小红书图片。
引导用户使用手机的截屏功能（通常是同时按电源键 + 音量减小键）。
图片会自动保存到手机相册。

优点：

零成本：不需要开发任何功能,不依赖任何外部API。
成功率100%：只要用户会截屏,就能成功。

缺点：

体验差：操作繁琐，且可能会截取到不想要的部分（如界面边框）。
图片质量损失：如果小程序对图片进行了缩放,截图的质量会下降。

适用场景：

临时性、一次性的需求。
对用户体验要求不高的场景。

长按保存（不推荐，但可能偶尔有效）

在某些情况下，如果图片在小程序内是以 <image> 标签正常显示的，用户可以尝试长按图片，系统可能会弹出“保存图片”的选项。

工作流程：

在小程序的 <image> 组件上设置 longPressEnabled="true"。
用户长按图片。

WXML:

<image src="{{imageUrl}}" long-press="onImageLongPress" mode="widthFix"></image>

JS:

onImageLongPress() {
  // 此方法只是监听长按事件，微信小程序原生并不提供通过JS直接触发保存的功能
  // 所以这里只能做提示
  wx.showModal({ '提示',
    content: '请尝试长按图片，在弹出的菜单中选择“保存图片”',
    showCancel: false
  });
}

为什么不推荐？

极大概率无效：小红书的图片URL有防盗链，长按后弹出的菜单里往往没有“保存图片”选项，或者点击后提示“无法保存”。
体验不一致：功能是否可用取决于图片URL和微信版本,非常不稳定。

总结与建议

方法	优点	缺点	推荐度
保存到我的收藏	稳定、体验好、官方支持	流程稍复杂，需要用户跳转两次	⭐⭐⭐⭐⭐ （强烈推荐）
用户手动截图	简单、无依赖、成功率高	体验差、可能截取不全、有质量损失	⭐⭐⭐ （作为备选方案）
长按保存	无需开发	极大概率无效，非常不稳定	⭐ （不推荐）