微信小程序的rich-text组件解析带有html标签的内容，以及修改内嵌的图片样式

sxs7970

于 2021-04-26 14:37:23 发布

阅读量1.5k

点赞数

分类专栏：前端微信小程序文章标签： rich-text组件解析标签 rich-text改变图片样式微信小程序

本文链接：https://blog.youkuaiyun.com/sxs7970/article/details/116154814

版权

前端同时被 2 个专栏收录

132 篇文章

订阅专栏

微信小程序

25 篇文章

订阅专栏

本文介绍了如何在微信小程序中使用rich-text组件解析并自定义HTML标签的样式，通过实例演示了如何处理内嵌图片和添加CSS类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序的rich-text 组件可以解析带有html标签的内容，像vue的v-html一样，具体细节还是以小程序官网为准

用法

<!-- wxml-->
   <view>
      <rich-text nodes="{{htmlDes}}"></rich-text>
    </view>

//js
 var htmlDes= '带有html标签的数据';
 //这里要处理内嵌的图片样式，要添加class，进行修改
 htmlDes=htmlDes.replace(/\<img/gi, '<img class="rich-imgs" ');
 this.setData({
   	htmlDes
 })

.rich-imgs{
	/**你的样式*/
}