今天，给OneAdmin前端小程序做了适当的界面调整，让用户可以在详情页面中全屏预览图片。并且，在预览的过程中，用户还可以进行将图片保存到本地、将图片发送给朋友等操作。
富文本图片预览功能实景
该方法调用了微信小程序开放平台的API：
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
})
第一步：在富文本中，将图片文件资源提炼出来。
前提条件是先判断是否存在图片文件资源。
//将富文本赋值线imageNode。
var imageNode = res.data.data.content
// 是否存在图片文件资源判断。
if (imageNode.indexOf("src") >= 0) {
// 定义一个空数组。
var previewImage = [];
//将imageNode进t地替换，并使用push()添加一个或多个元素，并返回新的长度。
imageNode = imageNode.replace(/]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
previewImage.push(capture);
that.setData({
previewImage: previewImage
});
});
}
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
此时，图片文件资源渲染到了页面数据之中，将命名为previewImage。
值得注意的是，此时图片文件资源是一个数组，如果直接console.log将会显示出错误的数组信息，但不影响开发者对该数组的认知。
第二步：设置previewImage事件的方法。
//预览图片，放大预览
previewImage(e){
//定义src为一个空数组
var src = [];
//将previewImage中的图片资源数据进行遍历。
for (var i = 0; i < this.data.previewImage.length; i++) {
src[i] = this.data.previewImage[i];
}
//直接调e和用wx.previewImage
wx.previewImage({
current:src[0],//第一张图片。
urls: src
})
},
第三步：给整个富文本绑定一个名为previewImage的事件。
// 为富文本绑定previewImage事件
<rich-text class="rich-box" nodes="{{content}}" bindtap="previewImage"></rich-text>
此时，小程序的图片预览功能完成!