微信原生小程序中富文本组件(rich-text)如何实现图片预览(wx.previewImage)？

Posted 2021-09-01 起风了

有需求后端返回的一个静态页面是一个富文本，使用原生组件rich-text之后，即可渲染到页面，当渲染到页面之后，含有img图片如何实现点击预览？

思路：使用正则把图片的url进行剖离出来，push进一个数组中，点击富文本组件，运行wx.previewImage方法。

wxml：

<rich-text nodes="{{富文本}}" catchtap="richTextClick"></rich-text>

点击事件：

// 富文本点击事件
  richTextClick() {
    // 富文本
    const richContent = this.data.content;
    // 判断含有图片
    if (richContent.indexOf("src") >= 0) {
      const imgs = [];
      richContent.replace(/]*src=[\'"]([^\'"]+)[^>]*>/gi, function (match, capture) {
        imgs.push(capture);
      })
      
      wx.previewImage({
        current: imgs[0], // 当前显示图片的http链接
        urls: imgs
      })
    }
  },

不足&Tip：
1、点击事件是加在富文本组件rich-text上的，渲染到页面也是一样，并不会把富文本中的dom渲染在页面中；
2、在预览图片时，无法知道用户点击的当前是哪个图片。所以，含有多张图片时，预览始终会从第一张图片开始，可左右滑动。

相关文档：
rich-text
wx.previewImage

希望大佬有更好的解决方案，私信或者评论我，万分感谢！