常⽤组件-基本内容rich-text富⽂本标签
1、rich-text 富⽂本标签可以将字符串解析成对应标签，类似vue中  v-html 功能
2、富⽂本标签的基本属性
属性类型默认值必填说明最低版本
nodes array/string[]否节点列表/HTML String
space string否显⽰连续空格
3、space显⽰连续空格属性的合法值
值说明最低版本
ensp中⽂字符空格⼀半⼤⼩
emsp中⽂字符空格⼤⼩
nbsp根据字体设置的空格⼤⼩
4、nodes节点列表属性的合法值
现⽀持两种节点，通过type来区分，分别是元素节点和⽂本节点，默认是元素节点，在富⽂本区域⾥显⽰的HTML节点元素节点：type = node*
属性说明类型必填备注
name标签名string是⽀持部分受信任的 HTML 节点
attrs属性object否⽀持部分受信任的属性，遵循 Pascal 命名法
children⼦节点列表array否结构和 nodes ⼀致
⽂本节点：type = text*
属性说明类型必填备注
text⽂本string是⽀持entities
5、受信任的HTML节点及属性
全局⽀持class和style属性，不⽀持id属性。
节点属性
a
abbr
address
article
aside
b
bdi
bdo dir
big
blockquote
br
caption
center
cite
code
col span，width
colgroup span，width
dd
del
div
dl
dt
em
fieldset
font
footer
h1
h2
h3
h4
h5
h6
header
hr
i
img alt，src，height，width
ins
label
legend
li
mark
nav
ol start，type
p
pre
q
rt
ruby
节点属性
s
section
small
span
strong
sub
sup
table width
tbody
td colspan，height，rowspan，width
tfoot
th colspan，height，rowspan，width
thead
tr colspan，height，rowspan，width
tt
u
ul
6、代码如下：
1）、JAVASCRIPT代码
// pages/demo11/demo11.js
Page({
/**
* 页⾯的初始数据
*/
data: {
// 1 标签字符串最常⽤的
//html: '<div class="tpl-wrapper" data-tpl-id="m_h_v31icon_1" ><div view-n
ame="DFrameLayout" ><div view-n // 2 对象数组
html: [
{
//1、div标签name属性来指定
name: "div",
//2、标签上有哪些属性
attrs:{
//标签上的属性 class style
class: "my_div",
style: "color:red"
},
//3、⼦节点，children要接收的数据类型和nodes第⼆种渲染⽅式的数据类型⼀致
children:[
{
name:"p",
attrs:{},
//放⽂本
children:[
{
type:"text",
text:"Hello World"
}
]
}
]
}
]
}
})
2）、WXML代码
<!--
rich-text 富⽂本标签
1、nodes属性来实现
1）、接收标签字符串
2）、接收对象的数组
position标签属性
-->
<rich-text nodes="{{html}}"></rich-text>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。