微信小程序开发(十三)富文本插件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。最后，有问题不要怕，细心看报错，带着问题一点一点的调试。