微信小程序点击 rich-text 组件之后预览富文本中的图片

在小程序开发时，常常会碰见一种需求，就是当用户点击 rich-text 中渲染的富文本时，需要预览图片，这里提供一个思路，就是通过正则匹配 HTML 中的图片链接，然后存到一个数组中，再将数组放入 wx.previewImage 中进行显示。

  // 点击卡片之后会预览图片
  onTapImg(e: WechatMiniprogram.BaseEvent) {
    // 将图片里的 src 提取出来，变成一个数组。
    const imgTags = e.currentTarget.dataset.key.match(/<img.*?>/g);
    const urls: string[] = [];
    if (imgTags) {
      imgTags.forEach((tag: string) => {
        const url = tag.match(/src="(.*?)"/);
        if (url) {
          urls.push(url[1]);
        }
      });
    }

    wx.previewImage({
      urls: urls,
    });
  },