微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复

在上一篇微信小程序开发(十二)富文本插件wxParse的使用中，我已经使用了wxParse插件。下午有时间就仔细的把玩了一下，发现了一个bug。

问题描述

仔细看报错，我们会发现是

wxParse.js

文件里面的

wxParseImgTap

方法里面有Bug。没有

imageUrls

这个属性。

分析问题

后来把wxParse插件的源码都看了一次，也修复了这个bug。其实修复这个bug不需要看看那么多，只需要看

wxParse.js

文件里面的部分代码即可。

既然问题是找不到

imageUrls

这个属性，那么我们就让他找到。

看打印信息

打开调试看打印信息：

在

wxParse.js

文件的wxParse方法中有一个打印：

console.log(JSON.stringify(transData, ' ', ' '));

。直接先看打印的结果：

数据很长，我们就这么看：

console.log(transData);

这里我们看见了

imageUrls

这个属性。

继续往下看

我们发现这样的三行代码：

var bindData = {};
bindData[bindName] = transData;
that.setData(bindData);

这是在把transData的数据赋值给bindData了。那么我们就可以肯定bindData这个对象里面是有我们需要的imageUrls了。剩下的就是取到这个imageUrls属性了。

但是在上面的代码中有这么一行：

that.setData(bindData);

。我们知道这个setData方法是微信小程序的，但是作者在

wxParse.js

文件里面并没有定义这个方法。继续往下看：

// 图片点击事件
function wxParseImgTap(e) {
var that = this;
var nowImgUrl = e.target.dataset.src;
var tagFrom = e.target.dataset.from;
if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
wx.previewImage({
current: nowImgUrl, // 当前显示图片的http链接
urls: that.data[tagFrom].imageUrls // 需要预览的图片http链接列表
})
}
}

这里作者这么取得值：

urls: that.data[tagFrom].imageUrls // 需要预览的图片http链接列表

，这里又有问题，that.data[key]是微信小程序取值的方式。这里又错了。

解决问题

其实在上面的问题描述中我们已经知道了是什么问题，也定位了问题。但是要解决问题，通常我们不能盯着一个点看。我们要带着问题去解决问题。

既然是找不到imageUrls，我们就让他找到。

1.在

wxParse.js

文件里面的wxParse方法如下修改：

var bindData = {};
bindData[bindName] = transData;
that.setData(bindData); // 这一行代码 其实是无效的
that.bindData = bindData; // 增加这一行代码

2.在wxParseImgTap方法里面如下修改：

wx.previewImage({
current: nowImgUrl, // 当前显示图片的http链接
// urls: that.data[tagFrom].imageUrls // 需要预览的图片http链接列表
urls: that.bindData[tagFrom].imageUrls  // 注释掉上面的 换着一行
})

效果图

总结

其实问题的核心还是误用了setData方法导致的。仔细看了一下，在

wxParse.js

文件里面作者4次使用了

setData

方法和4次使用了取值

that.data

。最后，有问题不要怕，细心看报错，带着问题一点一点的调试。