基于 wxParse 实现 单个数据传入转义并返回数据
最近在调试小程序时,使用到了 wxParse 这款插件,发现这个插件还是有很多不足之处,比如:
1丶被转义的数据只能渲染到模板,不能返回。
2丶代码块也被转义了
3丶无法批量转义
因为我在制作小程序时需要渲染首页文章列表,文章了列表中有个文章描述字段,这个字段里的数据有小部分的 html 标签。
一开始我想循环使用 wxParse 来进行转义并渲染模板,后来发现这样根本行不通,因为模板里的模板名无法使用循环来进行更改。
为了满足的小小需求,我对 wxParse 的源码进行了小小的改动。
首先我们来看下效果如何:
下图是代码部分:
通过 ajax 拿到后台返回的数据后,我对数据的 rendered 字段按下标用 wxParse 进行了循环转义处理,并接受了返回的数据,再替换了原来的
rendered 里的数据,然后在模板中遍历输出。这样就实现了我需要的功能。大家都知道 wxParse 的数据是直接生成在 template 里然后在模板中调用的,但我是怎么做到的呢?看我在调用 wxParse 的时候多加了一个参数 true。
这就是我对 wxParse 改动的效果,接下来我详细的讲解一下这个参数的作用。
首先来看代码:
红色部分是我改动的代码。
我在函数 wxParse 的参数里加了一个 isdesc 参数,默认值为 false。
再看下面的 if 部分,我判断值是否为 true ,如果为 true 则返回 transData.nodes[0].nodes[0].text 这个数据,这个是 wxParse 转义后文本数据,我是通过 console.log(transData); 来分析出来的。
我上面调用的时候最后一个参数为 true ,也就是说执行了这段代码,并将数据返回了,然后我又变量接收作了替换。
好了,教程就到这里了。修改后的代码我会贴在下面,你也可以到我的 github 查看。
GtiHub地址:https://github.com/CrazyNing98/WeChatMiniProgram-Blog
修改后的代码:
function wxParse(bindName = 'wxParseData', type='html', data='<div class="color:red;">数据不能为空</div>', target,imagePadding,isdesc = false) {
var that = target;
var transData = {};//存放转化后的数据
if (type == 'html') {
transData = HtmlToJson.html2json(data, bindName);
console.log(transData);
// console.log(JSON.stringify(transData, ' ', ' '));
} else if (type == 'md' || type == 'markdown') {
var converter = new showdown.Converter();
var html = converter.makeHtml(data);
transData = HtmlToJson.html2json(html, bindName);
// console.log(JSON.stringify(transData, ' ', ' '));
}
transData.view = {};
transData.view.imagePadding = 0;
if(typeof(imagePadding) != 'undefined'){
transData.view.imagePadding = imagePadding
}
var bindData = {};
bindData[bindName] = transData;
that.setData(bindData)
that.wxParseImgLoad = wxParseImgLoad;
that.wxParseImgTap = wxParseImgTap;
// console.log(isdeac);
if(isdesc){
return transData.nodes[0].nodes[0].text;
}
}
// 图片点击事件