微信小程序- - - - - rich-text 富文本问题

1. 小程序如何渲染HTML - - - rich-text

关于这一功能，vue有v-html，react有dangerouslySetInnerHTML，但是小程序端该如何实现该功能呢？

作为互联网大头的腾讯出品的微信小程序，肯定会对该功能有支持，那就是rich-text
官方地址: rich-text

2. rich-text的使用

<rich-text nodes="{{vHtml}}"></rich-text>

data:{
	vHtml:'<div><h1>我是标题</h1><p>我是内容</p></div>'
}

效果如图：

3. 遇到的问题

data:{
	vHtml: '<div><h1>我是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标题</h1><p>&nbsp;我是内容</p></div>'
}

效果图:

可发现如下问题：

• 在中间的空格是可以正常渲染的，但是连续多个空格只会展示为1个空格
• 以空格开头的内容，开头空格不会渲染

4. 解决方案

4.1 使用文档提供的api

在官方文档里可以看到这么一个属性：

根据API设置属性即可。代码如下：

<rich-text nodes="{{vHtml}}" space='nbsp'></rich-text>

4.2 自行替换字符串

思路：

• 先使用正则将 表示的空格转换为可识别的字符
• 将转换后的html字符串再用rich-text解析

例如:

data:{
	str: '<div><h1>我是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标题</h1><p>&nbsp;我是内容</p></div>',
	vHtml: str.replace(/&nbsp;/g, '\xa0') || '',
	vHtml2: str.replace(/ /g, '\xa0') || ''
}

效果图：

如此就会正常显示空格字符了！