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

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

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

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

#### 一、基础准备

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

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

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

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

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

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

```javascript
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>`组件用于预览：

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

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

```javascript
// 假设有一个方法来解析点击位置和元素，这里仅为示意
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将图片保存到相册。

```javascript
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操作或复杂逻辑可能需要特别的处理方式。

该分类下的相关小册推荐：

微信小程序与云开发(上)

微信小程序全栈开发实战(下)

微信小程序底层框架实现原理

微信小程序与云开发(下)

微信小程序与云开发(中)

微信小程序全栈开发实战(中)