[TOC] # rich-text >1.可以渲染字符串模版 > >2.可以渲染节点 ***** ## 1.渲染HTMl字符 >1.在js文件外部定义一个 HTML字符串模板 ``` /**定义一个字符串模板*/ const content= `<div class="div-class"> <h1>Title</h1> <p class="p"> Life is&nbsp;<i>like</i>&nbsp;a box of <b>&nbsp;chocolates</b>. </p> <img class="img" src="https://www.baidu.com/img/bd_logo1.png?where=super"/> <a href="https://www.baidu.com">A Link</a> </div> ` ``` >2.在数据中绑定 ·`data: { content: content}` >3.在wxml中使用定义好的HTML模板字符 `<rich-text nodes="{{content}}"></rich-text>` ## 2.渲染节点 **type = node** | 属性 | 说明 | 类型 | 必填 | 备注 | | --- | --- | --- | --- | --- | | name | 标签名 | String | 是 | 支持部分受信任的HTML节点 | | attrs | 属性 | Object | 否 | 支持部分受信任的属性，遵循Pascal命名法 | | children | 子节点列表 | Array | 否 | 结构和nodes一致 | ***** <br> >1.在js文件中定义个节点数据 ``` data:{ nodes: [{ name: 'div',//支持部分受信任的 HTML 节点 attrs: { class: 'div-class', style: 'line-height: 60px; color: #1AAD19;' },//支持部分受信任的属性，遵循 Pascal 命名法 children: [ { type: 'text', text: 'You never know what you\'re gonna get.' } ]//子节点列表 }] } ``` >2.在页面渲染节点信息 `<rich-text nodes="{{nodes}}"></rich-text>` ***** **渲染节点比渲染HTML字符更加稳定**