rich-text 内预览当前图片

需求

今年研发青年兴聊小程序交付给客户后，客户反馈详情页面的图片不能点击预览，要求实现这个功能，并且点击哪张图片就预览哪张图片，其余的图片可以滑动切换。

思路

根据以往的项目经验， 首先想到了rich-text 组件无法点击，那就需要换一种思路，网页的灵活性很高，而且可以进行图片预览，还有小程序自带原生 web-view 组件。是否可以将详情页的编码改为网页，进而实现需求呢？

实现

为了完成思路，将小程序原生语言开发的详情页面放弃，使用uniapp重新写了一遍详情页，然后打包输出网页（网页接收QueryString参数：详情ID，访问口令）。

• 将详情内容article绑定到v-html

<view v-html="article"></view>

• 使用正则匹配提取图片放入图片数组

// 提取的图片数组
let imgMatches = res.data.noticeContent.match(/\/prod-api.*?(jpg|png|gif|jpeg)/g);


imgMatches && imgMatches.forEach((item) => {
    // 补全图片的URI
   item = uni.$request.fileURI(item);

   // 将图片的完整链接放入预览图片数组
   // 这里的previewImg 是在 data() 返回中定义的
   this.previewImg.push(item);
});

• 点击预览当前图片

let num = 0;
const replacer = (match, p1, offset, string) => {
    let _num = num++;
    
    // data-idx 仅起到标识索引的作用
    return `<img style="max-width: 100%;" data-idx="${_num}" onclick="window._NUM = ${_num}; window._previewHandler()"`;
};


// 第一个replace 用于补全图片的URI
// 第二个replace 用于标识当前点击的第几张
res.data.noticeContent = res.data.noticeContent.replace(/(\/prod-api)/gi, uni.$request.fileURI('$1')).replace(/\<img/gi, replacer);

this.art = res.data;

• 定义预览函数

mounted() {
    window._previewHandler = () => {
        uni.previewImage({
            urls: this.previewImg,
            current: window._NUM
        });
    };
}

最终 img 元素会被改造为这个样子

以上是一种“曲线救国”的方式实现小程序内预览当前图片的办法，重点在于理解 replace，其可以将值替换为函数。