微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复
来源:互联网 发布:建筑学用的软件 编辑:程序博客网 时间:2024/06/07 03:19
在上一篇微信小程序开发(十二)富文本插件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
。最后,有问题不要怕,细心看报错,带着问题一点一点的调试。
- 微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复
- 微信小程序开发(十二)富文本插件wxParse的使用
- 微信小程序开发--富文本插件wxParse的使用
- 微信小程序解析html富文本插件wxParse
- 微信小程序解析html富文本插件wxParse
- 微信小程序富文本组件wxParse
- 微信小程序富文本展示,wxParse使用
- 微信小程序 —— 微信小程序解析html富文本插件wxParse
- 小程序解析html富文本插件wxParse配制全面指南
- wxParse 0.3 微信小程序 HTML/Markdown 富文本解析, 支持多级及 Emoji
- Rails的富文本编辑器插件fckeditorp
- 简单的富文本编辑器插件
- 微信小程序采坑(1):富文本的一些问题
- 小程序富文本编辑器的问题
- 微信小程序输出html内容数据插件wxParse
- 微信小程序输出html内容数据插件wxParse
- javascript网页富文本编辑器:kindedit富文本编辑器插件的使用
- 一个多线程示例程序的BUG修复
- FTP 503 错误 530 User ftpzy*** cannot log in, home directory inaccessible.
- 参数值注入 、基于注解的组件扫描
- mysql也可以查询今天、昨天、7天、近30天、本月、上一月的数据
- 使用Deferred的诗歌下载客户端
- Check Import Date Email
- 微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复
- android用代理实现Rx方式获取startActivityForResult结果
- Handler用法
- 用apache服务器自带的ab测试
- 第二个小插曲,deferred
- shell脚本实现彩色进度条
- Python 学习入门简明教程
- Linux使用过程中遇到的问题
- 微服务架构学习总结