解决 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);

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

修改后的图片显示
修改后的图片显示

哈哈,缩放显示成功!


赞 (4)   -->微信赞赏<--

微信扫描下方左侧二维码或搜索“sunriseydy”关注我的公众号,便捷地阅读博客内容,订阅博客更新
也可以扫描下方右侧的小程序码,进入我的微信小程序:“sunriseydy”,在手机上阅读文章

      

版权说明:

知识共享许可协议
作品 sunriseydy 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
文章内容如未说明均为原创,欢迎转载,但请注明原作者和出处。部分来自互联网的文章,如有侵权,请联系我,24小时内删除,谢谢
Email:i@mail.sunriseydy.top

评论一下呗亲

电子邮件地址不会被公开。 必填项已用*标注

添加表情