微信小程序官方组件展示之基础内容rich-text源码

以下将展示微信小程序之基础内容rich-text源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。

功能描述：

富文本。

属性说明：

nodes

现支持两种节点，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML 节点

元素节点：type = node

文本节点：type = text

受信任的 HTML 节点及属性

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

Bug& Tip

1.tip: nodes 不推荐使用 String 类型，性能会有所下降。

2.tip: rich-text 组件内屏蔽所有节点的事件。

3.tip: attrs 属性不支持 id ，支持 class 。

4.tip: name 属性大小写不敏感。

5.tip: 如果使用了不受信任的 HTML 节点，该节点及其所有子节点将会被移除。

6.tip: img 标签仅支持网络图片。

7.tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

示例代码：

JAVASCRIPT：

const htmlSnip =

`

 

Title

 

    Life is like a box of

     chocolates.

 

`

const nodeSnip =

`Page({

  data: {

    nodes: [{

      name: 'div',

      attrs: {

        class: 'div_class',

        style: 'line-height: 60px; color: red;'

      },

      children: [{

        type: 'text',

        text: 'You never know what you're gonna get.'

      }]

    }]

  }

})

`

Page({

  onShareAppMessage() {

    return {

      title: 'rich-text',

      path: 'page/component/pages/rich-text/rich-text'

    }

  },

  data: {

    htmlSnip,

    nodeSnip,

    renderedByHtml: false,

    renderedByNode: false,

    nodes: [{

      name: 'div',

      attrs: {

        class: 'div_class',

        style: 'line-height: 60px; color: #1AAD19;'

      },

      children: [{

        type: 'text',

        text: 'You never know what you\'re gonna get.'

      }]

    }]

  },

  renderHtml() {

    this.setData({

      renderedByHtml: true

    })

  },

  renderNode() {

    this.setData({

      renderedByNode: true

    })

  },

  enterCode(e) {

    console.log(e.detail.value)

    this.setData({

      htmlSnip: e.detail.value

    })

  }

})

WXML：

 

   

      通过HTML String渲染

     

        {{htmlSnip}}

        渲染HTML

       

         

       

     

   

   

      通过节点渲染

     

        {{nodeSnip}}

        渲染Node

       

         

       

     

   

 

版权声明：本站所有内容均由互联网收集整理、上传，如涉及版权问题，请联系我们第一时间处理。

原文链接地址：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html