09 | rich-text组件：如何单击预览rich-text中的图片并保存？-微信小程序全栈开发实战(上)

当前位置:　首页>> 技术小册>> 微信小程序全栈开发实战(上)

09 | rich-text组件：如何单击预览rich-text中的图片并保存？

在微信小程序开发中，rich-text 组件是一个功能强大的工具，它允许开发者展示富文本内容，如HTML字符串。然而，rich-text 组件本身并不直接支持对内部元素（如图片）的交互操作，如点击预览或保存。为了实现这些高级功能，我们需要结合小程序的其他组件和API来实现。本章将详细讲解如何在微信小程序中通过rich-text组件展示图片，并实现图片的点击预览以及保存到相册的功能。

一、基础准备

在开始之前，请确保你的小程序已经正确设置了权限，特别是需要访问相册的权限。在app.json中声明所需权限，并在代码中处理用户的授权请求。

{
  "permission": {
    "scope.writePhotosAlbum": {
      "desc": "你的小程序需要使用相册权限，以便保存图片到相册"
    }
  }
}

二、rich-text组件的基础使用

首先，我们需要了解如何在rich-text组件中展示图片。rich-text组件接受一个名为nodes的属性，该属性可以是一个包含HTML节点的数组，或者是一个HTML字符串（但出于性能和安全考虑，推荐使用数组形式）。

<rich-text nodes="{{richTextNodes}}"></rich-text>

在页面的JS部分，我们可以这样定义richTextNodes：

Page({
  data: {
    richTextNodes: [{
      name: 'img',
      attrs: {
        src: 'https://example.com/path/to/image.jpg',
        data-src: 'https://example.com/path/to/image.jpg', // 自定义属性，用于后续操作
        style: 'width: 100%; height: auto;'
      },
      children: []
    }]
  }
})

注意，这里我们给img标签添加了一个自定义属性data-src，它存储了图片的URL，用于后续的操作中识别和处理图片。

三、实现图片点击预览

为了实现图片的点击预览，我们可以利用小程序的<image>组件的bindtap事件结合wx.previewImage API。但rich-text组件内部的内容不支持直接绑定事件，因此我们需要采用一种间接的方法。

一种常见的做法是在rich-text外层包裹一个view或block（注意，block不渲染成任何DOM元素，仅用于控制布局），并在这个外层元素上监听触摸事件，通过计算点击位置来确定是否点击了图片，并获取到图片的URL。然而，这种方法实现起来较为复杂且不够准确。

更简单且推荐的方式是，利用自定义组件来封装rich-text，并在自定义组件内部处理图片的点击事件。但考虑到篇幅和直接性，这里我们采用一种折中的方法：在页面上另外添加一个不可见的<image>组件，用于预览，并通过页面级的点击事件逻辑来控制。

首先，在WXML中添加一个隐藏的<image>组件用于预览：

<image src="{{previewImageUrl}}" style="display: none;" bindload="handleImageLoad" mode="widthFix" />

然后，在页面的JS中监听rich-text区域的触摸事件，并尝试解析点击位置上的元素，判断是否为图片并获取其URL：

// 假设有一个方法来解析点击位置和元素，这里仅为示意
function getClickedImageSrc(e) {
  // 实际上，这里需要复杂的DOM解析或预先处理数据来识别点击的图片
  // 这里简化处理，直接返回预定义的图片URL
  return 'https://example.com/path/to/image.jpg';
}
Page({
  // ...
  handleTap: function(e) {
    const imageSrc = getClickedImageSrc(e); // 假设此方法能正确返回点击的图片URL
    if (imageSrc) {
      this.setData({
        previewImageUrl: imageSrc
      });
      // 使用wx.previewImage预览图片
      wx.previewImage({
        urls: [imageSrc]
      });
    }
  },
  // ...
})
// 注意：这里的getClickedImageSrc函数需要根据你的实际情况来实现，可能需要解析DOM或使用其他方法

注意：上述getClickedImageSrc函数是一个高度简化的示例，实际实现中，你可能需要解析rich-text的DOM结构（虽然小程序并不直接提供DOM API，但可以通过rich-text的nodes数据和点击位置来大致判断），或者使用其他方法（如给每张图片包裹一个可点击的容器）来精确获取点击的图片URL。

四、实现图片保存到相册

图片的保存可以通过小程序的wx.saveImageToPhotosAlbum API实现。当用户触发保存操作时（可以是点击一个专门的保存按钮，或者是图片预览时的某个操作），你可以调用这个API将图片保存到相册。

Page({
  // ...
  saveImage: function() {
    wx.getSetting({
      success: (res) => {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success: () => {
              // 用户已经同意授权，可以调用 saveImageToPhotosAlbum
              wx.saveImageToPhotosAlbum({
                filePath: this.data.previewImageUrl, // 假设这是你需要保存的图片路径
                success(res) {
                  wx.showToast({
                    title: '保存成功',
                    icon: 'success',
                    duration: 2000
                  });
                }
              });
            },
            fail: () => {
              wx.showToast({
                title: '授权失败，无法保存图片',
                icon: 'none',
                duration: 2000
              });
            }
          });
        } else {
          // 用户已经授权，直接调用
          wx.saveImageToPhotosAlbum({
            filePath: this.data.previewImageUrl,
            success(res) {
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000
              });
            }
          });
        }
      }
    });
  },
  // ...
})

五、总结

在微信小程序中，虽然rich-text组件直接不支持图片的点击预览和保存功能，但通过结合小程序的其他组件和API，我们可以实现这些需求。本章节通过解析rich-text组件的内容、监听触摸事件、使用wx.previewImage预览图片以及wx.saveImageToPhotosAlbum保存图片，详细展示了如何在微信小程序中实现图片的点击预览和保存功能。需要注意的是，由于小程序的运行环境和限制，一些DOM操作或复杂逻辑可能需要特别的处理方式。