当前位置: 首页 >>服务端开发 >>Asp.Net >>常用API >>微信小程序 rich-text的使用方法

微信小程序 rich-text的使用方法

时间:2018/8/27 14:46:33 【admin】

微信小程序 rich-text的使用方法…

rich-text

  • 属性:nodes 类型:Array / String 结点列表 / HTML String

  • 全局支持class和style属性,不支持id属性。

  • 结点类型:type = node , name 标签名 String 是 支持部分受信任的HTML结点,  attrs 属性 Object 否 支持部分受信任的属性,遵循Pascal命名法 ,  children 子结点列表 Array 否 结构和nodes一致

  • 结点类型:type = text  ,text 文本 String 是 支持entities

  • nodes 不推荐使用 String 类型,性能会有所下降

  • rich-text 组件内屏蔽所有结点的事件。

  • attrs 属性不支持 id ,支持 class 。

  • name 属性大小写不敏感。

  • 如果使用了不受信任的HTML结点,该结点及其所有子结点将会被移除。

  • img 标签仅支持网络图片。

?

1
2
3
<rich-text nodes="{{nodes}}" />
<rich-text nodes="{{nodes1}}" />
<rich-text nodes="{{nodes2}}" />

1.png

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
this.setData({
  nodes: "<h1 style='color:red;'>html标题</h1>",
  nodes1: [{
   name: "h1",
   attrs: {
    style: "color:red",
    class: "red"
   },
   children: [{
    type: "text",
    text: '结点列表标题'
   }]
  }],
  nodes2: [{
   name: "ul",
   attrs: {
    style: "padding:20px;border:1px solid blue;",
    class: "red"
   },
   children: [
    {
     name: "li",
     attrs: {
      style: "color:red",
      class: "red"
     },
     children: [{
      type: "text",
      text: '多层结点 无序列表'
     }],
    }, {
     name: "li",
     attrs: {
      style: "color:red",
      class: "red"
     },
     children: [{
      type: "text",
      text: '多层结点 无序列表1'
     }],
    }]
  }]
})

以上就是微信小程序 rich-text的介绍,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!



rich-text是一个新增的微信小程序插件,从基础库1.4.0开始,低版本需要做兼容处理

nodes属性可为Array和String类型,但推荐使用Array.由于String类型最终也会转为Array类型

nodes分为支持两种节点,分别为元素节点(type=node ,默认为元素节点)文本节点(type=text)

元素节点

name        标签名     String   是  支持部分受信任的HTML节点
attrs       属性       Object   否 支持部分受信任的属性,遵循Pascal命名法
children    子节点列表  Array    否   结构和nodes一致123
<!-- rich-text.wxml --><rich-text nodes="{{nodes}}" bindtap="tap"></rich-text><!--{{nodes}}其中的变量名与data中名字相同--><!--支持默认事件tap、touchstart、touchmove、touchcancel、touchend和longtap-->1234
// rich-text.jsPage({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'width : 100px; height : 100px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },  tap() {
    console.log('tap')
  }
})12345678910111213141516171819

如果页面中存在多个富文本,富文本中存在多个孩子,请看下例:

<!-- rich-text.wxml --><rich-text nodes="{{nodes}}"></rich-text><rich-text nodes="{{nodes1}}"></rich-text>123
// rich-text.jsPage({
  data: {
    nodes: [{
      name: 'div',
      attrs: {        class: 'div_class',
        style: 'width : 100px; height : 100px; color: red;'
      },
      children: [{        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }],
    nodes1: [{
      name: 'p',
      attrs: {        class: 'p_class',
        style: 'text-align : center; color: green;'
      },
      children: [{        type: 'text',
        text: '我是p标签!!!'
      },{
        name: "span",
        attrs: {
          style: "color:red",          class: "span_class"
        },
        children: [{          type: "text",
          text: '我是span标签,哈哈哈哈'
        }]
      }]
    }]
  },
})12345678910111213141516171819202122232425262728293031323334353637

文本节点

text    文本      String       是      支持entities1
<!-- rich-text.wxml --><rich-text nodes="{{nodes}}"></rich-text>12
// rich-text.jsPage({  data: {    nodes: "我是文本节点,意外不?"
  },})123456

注意:

  • 全局支持class和style属性,不支持id属性

  • nodes 不推荐使用 String 类型,性能会有所下降

  • rich-text 组件内屏蔽所有节点的事件。

  • name 属性大小写不敏感

  • 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除,受信任的html节点请看官方文档

  • img 标签仅支持网络图片

受信任的HTML节点及属性

全局支持class和style属性,不支持id属性

节点属性
a
abbr
b
blockquote
br
code
colspan,width
colgroupspan,width
dd
del
div
dl
dt
em
fieldset
h1
h2
h3
h4
h5
h6
hr
i
imgalt,src,height,width
ins
label
legend
li
olstart,type
p
q
span
strong
sub
sup
tablewidth
tbody
tdcolspan,height,rowspan,width
tfoot
thcolspan,height,rowspan,width
thead
tr
ul


CopyRight:2007-2018 编程语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮