Vue中渲染后台返回的标签时,可以使用v-html。而小程序中需要使用 rich-text。
【注意:直接看图片和标蓝色的文字即可,其他文字都是凑字数。】
小程序官网地址:
developers.weixin.qq.com/miniprogram…
其中就提到了:
nodes 现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点
元素节点:type = node*
属性说明类型必填备注name标签名string是支持部分受信任的 HTML 节点attrs属性object否支持部分受信任的属性,遵循 Pascal 命名法children子节点列表array否结构和 nodes 一致
文本节点:type = text*
属性说明类型必填备注text文本string是支持entities
rich-text
受信任的HTML节点及属性 全局支持class和style属性,不支持id属性。
Bug & Tip
-
tip: nodes 不推荐使用 String 类型,性能会有所下降。
-
tip: rich-text 组件内屏蔽所有节点的事件。
-
tip: attrs 属性不支持 id ,支持 class 。
-
tip: name 属性大小写不敏感。
-
tip: 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。
-
tip: img 标签仅支持网络图片。
tip: 如果在自定义组件中使用 rich-text 组件,那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。
如果想要修改其中某个样式(如img的样式),vue可以使用deep深度修改样式,而小程序中比较麻烦,需要使用正则,给img标签增加一个类名,再去写css修改:
到此,完美解决!【这里用style去修改样式可能会出错,要用类名,比较稳。】