解决 WordPress 版微信小程序中文章图片过大的问题

在开发 WordPress 版微信小程序的过程中发现文章图片如果宽度大于屏幕的宽度，图片是以原尺寸显示的，就会充满屏幕，而不不是缩放显示。在 wxParse 的解析中明明有图片尺寸的自动解析，但并没有起作用。经过一段时间的摸索，总算是找到原因了，在这里记录一下。

先看一下原来不正常的显示：

再看看 wxParse 中自动解析图片尺寸的部分代码：

/**
 * 图片视觉宽高计算函数区 
 **/
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); 
  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;*/
    autoHeight = ( autoWidth / originalWidth) * originalHeight;
    /* console.log("autoHeight" + autoHeight);*/
    results.imageWidth = autoWidth;
    results.imageheight = autoHeight;
  } else {/*否则展示原来的数据*/
    results.imageWidth = originalWidth;
    results.imageheight = originalHeight;
  }
  return results;
}

可以看到当图片宽度大于屏幕的宽度时，会将图片的宽度设置为屏幕宽度，然后自动设置长度。然而，这段代码好像并没有起作用。为了找到原因，我又看了看解析出来的图片元素：

明显的能看到在“img”标签上一层还有一个“wp-caption”类的东东。直觉告诉我就是这个东东在搞怪，可是这个东西是从哪来的呢？我又看了小程序获得的文章内容响应，发现了这个：

<figure id=\"attachment_1030\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.sunriseydy.top\/wp-content\/uploads\/2018\/05\/preview-1-1.jpg\"><img class=\"size-full wp-image-1030\" src=\"https:\/\/cdn.sunriseydy.top\/wp-content\/uploads\/2018\/05\/preview-1-1.jpg\" alt=\"\u7535\u8111\u7248\u9884\u89c8\u56fe\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/blog.sunriseydy.top\/wp-content\/uploads\/2018\/05\/preview-1-1.jpg 1920w, https:\/\/blog.sunriseydy.top\/wp-content\/uploads\/2018\/05\/preview-1-1-768x432.jpg 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><figcaption class=\"wp-caption-text\">\u7535\u8111\u7248\u9884\u89c8\u56fe<\/figcaption><\/figure>

可以看到正是这个“figure”标签中设置了“width”，每个“img”标签都在这个“figure”标签下，那把它删掉呗。怎么删呢？还是用上次的“replace”大法吧。在获取到文章内容的响应后，把这个“figure”标签替换为“”。修改 detail.js 中的代码，如下：

res = response;
WxParse.wxParse('article', 'html', response.data.content.rendered.replace(/<figure[^>]*class=\"wp-caption[^>]*>/g, "").replace(/<\/figure>/g, ""), self, 5);

我们来看看修改后的图片显示：

哈哈，缩放显示成功！

手机打开扫一扫即可访问本页面

感谢您的支持，SunriseYDY 会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

日出一点一 | 在探索的路上永不止步