接口返回的富文本数据怎么在小程序渲染

小程序渲染富文本返回的数据时使用rich-text的方法与修改里面的样式

1. 富文本返回的数据无法直接在小程序上面渲染出来,这时候就用到rich-text标签了

使用方法:在nodes里直接放入接口返回的数据

<view class="content">
  <rich-text class="center" nodes="{{bannerinfo.wx_content}}"></rich-text>
</view>

2. rich-text渲染后怎么修改里面标签的样式,比如图片自适应

如果你直接修改img的样式发现会不起作用,但如果给每个img都设置一个类名再设置样式就OK了

//图片大小限制
  data.wx_content= data.wx_content.replace(/\<img/gi,'<img class="imgs"')

先对数据进行处理,加上类名后设置样式:

.content{
  padding: 15px 19px;width: 100%;box-sizing: border-box;overflow: auto;
}
.content .imgs{
  width: 100%;
}

tips:rich-text富文本组件图片如何长按识别？

rich-text组件中含有二维码时，能长按富文本中的二维码图片识别或者保存吗:
不行的，rich-text没有 DOM 节点，使用 wxparse