一、微信小程序需求,有一段富文本字符串需要解析并展示在页面上;
结构如下 :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