后端返回的数据在小程序上没有成标签形式展现怎么办

323 阅读2分钟

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去修改样式可能会出错,要用类名,比较稳。】