[微信小程序] rich-text富文本

2018-2-5 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

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一致
	
  • 1
  • 2
  • 3
<!-- rich-text.wxml --> <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text> <!--{{nodes}}其中的变量名与data中名字相同--> <!--支持默认事件tap、touchstart、touchmove、touchcancel、touchend和longtap-->
	
  • 1
  • 2
  • 3
  • 4
// rich-text.js Page({
  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') }
})
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

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

<!-- rich-text.wxml --> <rich-text nodes="{{nodes}}"></rich-text> <rich-text nodes="{{nodes1}}"></rich-text>
	
  • 1
  • 2
  • 3
// rich-text.js Page({
  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标签,哈哈哈哈' }]
      }]
    }]
  },
})
	
  • 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

文本节点

text 文本 String 是      支持entities
	
  • 1
<!-- rich-text.wxml --> <rich-text nodes="{{nodes}}"></rich-text>
	
  • 1
  • 2
// rich-text.js Page({ data: { nodes: "我是文本节点,意外不?"
  }, })
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

注意:

  • 全局支持class和style属性,不支持id属性
  • nodes 不推荐使用 String 类型,性能会有所下降
  • rich-text 组件内屏蔽所有节点的事件。
  • name 属性大小写不敏感
  • 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除,受信任的html节点请看官方文档
  • img 标签仅支持网络图片
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: [微信小程序] rich-text富文本


Powered by emlog 京ICP备12006971号-1 sitemap