微信小程序—富文本内容渲染

小程序开发过程中，需要渲染富文本内容，文字和图片混编的那种；

如果没有图片的情况下，直接用rich-text标签就可以完成，如下所示：

nodes属性里直接放上需要渲染的字段就可以了。

<view class="pl20 pr20 fs14">
  <rich-text nodes="{{goodsDetail.GoodsDetail}}"></rich-text>
</view>

注意！这时候会出现一个问题，就是图片的大小不好控制，有的图片宽度比较大，渲染出来之后，就会超出屏幕范围。这时候就要做一个图片宽度的限制，例如：max-width：100%这种。

上面的问题，接口返回的时候就需要进行处理，把富文本里的图片加上一个可用的类,这里随便起名叫“diy-img”

res.Data.GoodsDetail.replace(/\<img/gi, '<img class="diy-img" ')

然后在wxss中设置

.diy-img {
    max-width: 100%;
}

这样展示基本上就正常了。