基于 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;
  }
}
// 图片点击事件
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链接列表
    })
  }
}
/**
 * 图片视觉宽高计算函数区
 **/
function wxParseImgLoad(e) {
  var that = this;
  var tagFrom = e.target.dataset.from;
  var idx = e.target.dataset.idx;
  if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
    calMoreImageInfo(e, idx, that, tagFrom)
  }
}
// 假循环获取计算图片视觉最佳宽高
function calMoreImageInfo(e, idx, that, bindName) {
  var temData = that.data[bindName];
  if (!temData || temData.images.length == 0) {
    return;
  }
  var temImages = temData.images;
  //因为无法获取view宽度 需要自定义padding进行计算，稍后处理
  var recal = wxAutoImageCal(e.detail.width, e.detail.height,that,bindName);
  // temImages[idx].width = recal.imageWidth;
  // temImages[idx].height = recal.imageheight;
  // temData.images = temImages;
  // var bindData = {};
  // bindData[bindName] = temData;
  // that.setData(bindData);
  var index = temImages[idx].index
  var key = `${bindName}`
  for (var i of index.split('.')) key+=`.nodes[${i}]`
  var keyW = key + '.width'
  var keyH = key + '.height'
  that.setData({
    [keyW]: recal.imageWidth,
    [keyH]: recal.imageheight,
  })
}
// 计算视觉优先的图片宽高
function wxAutoImageCal(originalWidth, originalHeight,that,bindName) {
  //获取图片的原始长宽
  var windowWidth = 0, windowHeight = 0;
  var autoWidth = 0, autoHeight = 0;
  var results = {};
  var padding = that.data[bindName].view.imagePadding;
  windowWidth = realWindowWidth-2*padding;
  windowHeight = realWindowHeight;
  //判断按照那种方式进行缩放
  // console.log("windowWidth" + windowWidth);
  if (originalWidth > windowWidth) {//在图片width大于手机屏幕width时候
    autoWidth = windowWidth;
    // console.log("autoWidth" + autoWidth);
    autoHeight = (autoWidth * originalHeight) / originalWidth;
    // console.log("autoHeight" + autoHeight);
    results.imageWidth = autoWidth;
    results.imageheight = autoHeight;
  } else {//否则展示原来的数据
    results.imageWidth = originalWidth;
    results.imageheight = originalHeight;
  }
  return results;
}
function wxParseTemArray(temArrayName,bindNameReg,total,that){
  var array = [];
  var temData = that.data;
  var obj = null;
  for(var i = 0; i < total; i++){
    var simArr = temData[bindNameReg+i].nodes;
    array.push(simArr);
  }
  temArrayName = temArrayName || 'wxParseTemArray';
  obj = JSON.parse('{"'+ temArrayName +'":""}');
  obj[temArrayName] = array;
  that.setData(obj);
}
/**
 * 配置emojis
 *
 */
function emojisInit(reg='',baseSrc="/wxParse/emojis/",emojis){
   HtmlToJson.emojisInit(reg,baseSrc,emojis);
}
module.exports = {
  wxParse: wxParse,
  wxParseTemArray:wxParseTemArray,
  emojisInit:emojisInit
}