在上一篇微信小程序开发(十二)富文本插件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);
1
2
3
这是在把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.data.bindData = bindData; // 增加这一行代码
2.在wxParseImgTap方法里面如下修改:
wx.previewImage({
current: nowImgUrl, // 当前显示图片的http链接
// urls: that.data[tagFrom].imageUrls // 需要预览的图片http链接列表
urls: that.data.bindData[tagFrom].imageUrls // 注释掉上面的 换着一行
})
效果图
总结
其实问题的核心还是误用了setData方法导致的。仔细看了一下,在wxParse.js文件里面作者4次使用了setData方法和4次使用了取值that.data。最后,有问题不要怕,细心看报错,带着问题一点一点的调试。