泽林博客
致力于开发者的提升

基于 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
}
赞(1) 打赏
未经允许不得转载泽林博客 » 基于 wxParse 实现 单个数据传入转义并返回数据

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    666

    NiZerin3个月前 (01-16)回复
  2. #2

    加默认值,这是ES6才有的写法

    NiZerin2个月前 (02-17)回复

泽林博客-致力于互联网开发者的成长

技术群聊软文发表

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏