轻寒blog日志分类修改u-parse插件

本文由清尘发表于2020-06-16 14:46最后修改于2020-07-02属于移动前端分类

小程序后端采用wordpress REST API,日志分类样式类似于新浪微博排版。 小程序端富文本解析使用 u-parse插件

点击小图查看大图(u-parse默认点击打开的图片为缩略图上的src链接)

修改components目录下的u-parse/u-parse.vue

主要修改返回node时的src数组为大图,可以查找带有console.log(results)的位置进行修改

......
      const results = HtmlToJson(parseData, customHandler, imageProp, this);
	  var imgArr = results.imageUrls;
		  imgArr = imgArr.map(function(item){
			  var check_img = /-150x150/.test(item),
				  imgsrc = item;
			  if(check_img){
				  imgsrc = item.replace(/-150x150/g,"");
			  }
			  return imgsrc
		  })
	  
      this.imageUrls = imgArr;
      console.log(results)
      return results.nodes;
    },
  },
......

点击查看预览图也要修改为大图的url

    preview(src, $event) {
      if (!this.imageUrls.length) return;
	  var check_img = /-150x150/.test(src);
		if(check_img){
			src = src.replace(/-150x150/g,"");
		}	  
	  
      wx.previewImage({
        current: src,
        urls: this.imageUrls,
      });
      this.$emit('preview', src, $event);
    },

150X150小图展示一排三列

因为自己的日志分类小图采用150X150大小,u-parse默认采用图片本身的尺寸,需要一排三列展示时,修改了150X150图片尺寸显示

修改u-parse/components/wxParseImg.vue 增加了150X150尺寸的图片判断

......
      // 判断按照那种方式进行缩放
      if (originalWidth > windowWidth) {
        // 在图片width大于手机屏幕width时候
        results.imageWidth = windowWidth;
        results.imageheight = windowWidth * (originalHeight / originalWidth);
      }else if(originalWidth == 150 && originalHeight == 150){
        results.imageWidth = originalWidth - 30;
        results.imageheight = originalHeight - 30;
      } else {
        // 否则展示原来的数据
        results.imageWidth = originalWidth;
        results.imageheight = originalHeight;
      }
......