[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字符更加穩定**