微信小程序如何显示富文本，类似v-html，rich-text

一、微信小程序需求，有一段富文本字符串需要解析并展示在页面上；

结构如下 ：content

二、解决办法

一、用过vue 的都知道vue 有个 v-html 属性，可以准换html格式并且展示；
但是微信小程序提供的方法是一个新的标签【基础内容 /rich-text】（微信文档传送门） ；
使用方法很简单：

<view>
	<rich-text nodes="{{content}}"></rich-text>
</view>

二、属性只有两个

属性	类型	默认值	必填	说明	最低版本
nodes	array/string	[ ]	否	节点列表/HTML String	1.4.0
space	string		否	显示连续空格	2.4.1

三、官方的注意事项

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 生效。

三、对于 rich-text 属性 space 的感知：

space 有三个值，通过对比可以发现：
1、默认的 rich-text 是不会解析空格的；
2、加入其中任意一个值，都会将原有的空格内容解析出来；
3、为了不影响布局，尽量还是 space一个属性比较好；

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

• 以下是测试三个值的区别：

• 0 不加space

• 1 加入 emsp
  
• 2 加入 ensp
  
• 3 加入nbsp