基于 wxParse 实现 单个数据传入转义并返回数据

最近在调试小程序时,使用到了 wxParse 这款插件,发现这个插件还是有很多不足之处,比如:

1丶被转义的数据只能渲染到模板,不能返回。

2丶代码块也被转义了

3丶无法批量转义

因为我在制作小程序时需要渲染首页文章列表,文章了列表中有个文章描述字段,这个字段里的数据有小部分的 html 标签。

一开始我想循环使用 wxParse 来进行转义并渲染模板,后来发现这样根本行不通,因为模板里的模板名无法使用循环来进行更改。

为了满足的小小需求,我对 wxParse 的源码进行了小小的改动。

首先我们来看下效果如何:

基于 wxParse 实现 单个数据传入转义并返回数据

下图是代码部分:

基于 wxParse 实现 单个数据传入转义并返回数据

通过 ajax 拿到后台返回的数据后,我对数据的 rendered 字段按下标用 wxParse 进行了循环转义处理,并接受了返回的数据,再替换了原来的 
rendered 里的数据,然后在模板中遍历输出。这样就实现了我需要的功能。大家都知道 wxParse 的数据是直接生成在 template 里然后在模板中调用的,但我是怎么做到的呢?看我在调用 wxParse 的时候多加了一个参数 true。

这就是我对 wxParse 改动的效果,接下来我详细的讲解一下这个参数的作用。

首先来看代码:

基于 wxParse 实现 单个数据传入转义并返回数据

红色部分是我改动的代码。

我在函数 wxParse 的参数里加了一个 isdesc 参数,默认值为 false。

再看下面的 if 部分,我判断值是否为 true ,如果为 true 则返回 transData.nodes[0].nodes[0].text 这个数据,这个是 wxParse 转义后文本数据,我是通过 console.log(transData); 来分析出来的。

基于 wxParse 实现 单个数据传入转义并返回数据

我上面调用的时候最后一个参数为 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;
  }
}
// 图片点击事件

 源码地址:https://github.com/CrazyNing98/WeChatMiniProgram-Blog