微信小程序接收富文本编辑器图片大小解决方法

一、先上案列：

1.图片没有尺寸影响整体布局

二、改完之后：

三、上代码展示

1.wxml

<!--pages/articleInfo/articleInfo.wxml-->
<view class="articleInfo padding15">
  <rich-text nodes="{
    
    {articleInfoArray}}"></rich-text>
</view>

2.js

  //请求协议接口
    wx.request({
    
    
      url: 请求接口,
      data: {
    
    
        id:that.data.id
      },
      method: "GET",
      header: {
    
    
        'content-type': 'application/json'
      },
      success: function (res) {
    
    
        console.log(res.data.list)
        wx.hideLoading();
        if(res.data.data=="success"){
    
    
        
          var jsonDa = JSON.stringify(res.data.list.content).replace(/<img/gi, "<img class='richImg'");
          //遍历得到的数据，给img添加CSS和style
          var newResData = JSON.parse(jsonDa);
          console.log(newResData); //得到的数据含有img标签的都有richImg
          
          that.setData({
    
    
            articleInfoArray:newResData
          })
          wx.setNavigationBarTitle({
    
    
            title: res.data.list.title
          })
        }
        
      }
    })

3.wxcss

rich-text .richImg{
    
    
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  height: auto!important;
  width: auto!important;
}

总结：因为通过解析编译，图片有class名字为richImg，我们通过获取从而改变其样式结构，从而达到图片大小进行排版布局