今天小编给大家分享一下微信小程序内容组件rich-text怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
rich-text
基础库 1.4.0 开始支持，低版本需做兼容处理
富文本。
|
属性 |
类型 |
默认值 |
说明 |
最低版本 |
|---|
|
nodes |
Array / String |
[] |
节点列表 / HTML String |
1.4.0 |
支持默认事件，包括：tap、touchstart、touchmove、touchcancel、touchend和longtap
nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降
nodes
现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点
元素节点：type = node
|
属性 |
说明 |
类型 |
必填 |
备注 |
|---|
|
name |
标签名 |
String |
是 |
支持部分受信任的HTML节点 |
|
attrs |
属性 |
Object |
否 |
支持部分受信任的属性，遵循Pascal命名法 |
|
children |
子节点列表 |
Array |
否 |
结构和nodes一致 |
文本节点：type = text
|
属性 |
说明 |
类型 |
必填 |
备注 |
|---|
|
text |
文本 |
String |
是 |
支持entities |
受信任的HTML节点及属性
全局支持class和style属性，不支持id属性。
|
节点 |
属性 |
|---|
|
a |
|
|
abbr |
|
|
b |
|
|
blockquote |
|
|
br |
|
|
code |
|
|
col |
span，width |
|
colgroup |
span，width |
|
dd |
|
|
del |
|
|
div |
|
|
dl |
|
|
dt |
|
|
em |
|
|
fieldset |
|
|
h2 |
|
|
h3 |
|
|
h4 |
|
|
h5 |
|
|
h6 |
|
|
h7 |
|
|
hr |
|
|
i |
|
|
img |
alt，src，height，width |
|
ins |
|
|
label |
|
|
legend |
|
|
li |
|
|
ol |
start，type |
|
p |
|
|
q |
|
|
span |
|
|
strong |
|
|
sub |
|
|
sup |
|
|
table |
width |
|
tbody |
|
|
td |
colspan，height，rowspan，width |
|
tfoot |
|
|
th |
colspan，height，rowspan，width |
|
thead |
|
|
tr |
|
|
ul |
|
示例：
<!-- rich-text.wxml --><rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>// rich-text.js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
},
tap() {
console.log('tap')
}
})
Bug & Tip
tip: nodes 不推荐使用 String 类型，性能会有所下降。
tip:rich-text组件内屏蔽所有节点的事件。
tip: attrs 属性不支持 id ，支持 class 。
tip: name 属性大小写不敏感。
tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
tip: img 标签仅支持网络图片。
以上就是“微信小程序内容组件rich-text怎么使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注天达云行业资讯频道。