微信小程序 rich-text的使用方法
更新時(shí)間：2017年08月04日 16:29:32 投稿：lqh
這篇文章主要介紹了 微信小程序 rich-text的使用方法的相關(guān)資料,這里提供屬性及方法并實(shí)現(xiàn)實(shí)例，幫助大家學(xué)習(xí)理解，需要的朋友可以參考下
微信小程序 rich-text的使用方法
rich-text
- 屬性：nodes 類型：Array / String 結(jié)點(diǎn)列表 / HTML String
- 全局支持class和style屬性，不支持id屬性。
- 結(jié)點(diǎn)類型：type = node ， name 標(biāo)簽名 String 是 支持部分受信任的HTML結(jié)點(diǎn)， attrs 屬性 Object 否 支持部分受信任的屬性，遵循Pascal命名法 ， children 子結(jié)點(diǎn)列表 Array 否 結(jié)構(gòu)和nodes一致
- 結(jié)點(diǎn)類型：type = text ，text 文本 String 是 支持entities
- nodes 不推薦使用 String 類型，性能會(huì)有所下降
- rich-text 組件內(nèi)屏蔽所有結(jié)點(diǎn)的事件。
- attrs 屬性不支持 id ，支持 class 。
- name 屬性大小寫不敏感。
- 如果使用了不受信任的HTML結(jié)點(diǎn)，該結(jié)點(diǎn)及其所有子結(jié)點(diǎn)將會(huì)被移除。
- img 標(biāo)簽僅支持網(wǎng)絡(luò)圖片。
<rich-text nodes="{{nodes}}" />
<rich-text nodes="{{nodes1}}" />
<rich-text nodes="{{nodes2}}" />
this.setData({
nodes: "<h1 style='color:red;'>html標(biāo)題</h1>",
nodes1: [{
name: "h1",
attrs: {
style: "color:red",
class: "red"
},
children: [{
type: "text",
text: '結(jié)點(diǎn)列表標(biāo)題'
}]
}],
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: '多層結(jié)點(diǎn) 無序列表'
}],
}, {
name: "li",
attrs: {
style: "color:red",
class: "red"
},
children: [{
type: "text",
text: '多層結(jié)點(diǎn) 無序列表1'
}],
}]
}]
})
以上就是微信小程序 rich-text的介紹，如有疑問請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
webpack4 配置 ssr 環(huán)境遇到“document is not defined”
這篇文章主要介紹了webpack4 配置 ssr 環(huán)境遇到“document is not defined”，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
js GridView 實(shí)現(xiàn)自動(dòng)計(jì)算操作代碼
js操作GridView,實(shí)現(xiàn)自動(dòng)計(jì)算的實(shí)現(xiàn)代碼，下面的代碼運(yùn)行即可2009-03-03
這篇文章主要為大家詳細(xì)介紹了小程序自定義彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
移動(dòng)端網(wǎng)頁開發(fā)調(diào)試神器Eruda的介紹與使用技巧
在日常的移動(dòng)端開發(fā)時(shí)，一般都是試用chrome瀏覽器的移動(dòng)端模式進(jìn)行開發(fā)和調(diào)試，只有在chrome調(diào)試完成，而最近發(fā)現(xiàn)了一個(gè)新的調(diào)試方法，所以這篇文章主要給大家介紹了關(guān)于移動(dòng)端網(wǎng)頁開發(fā)調(diào)試神器Eruda的基本資料，以及其使用的一些技巧，需要的朋友可以參考下。2017-10-10
這篇文章主要為大家詳細(xì)介紹了基于原生js淡入淡出函數(shù)封裝，可兼容IE，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
onclick與listeners的執(zhí)行先后問題詳細(xì)解剖
javascript中onclick與listeners的執(zhí)行先后問題一直都是大家所疑惑的地方，接下來將為大家解決此疑惑，感興趣的朋友可以了解下哦2013-01-01
JavaScript實(shí)現(xiàn)簡單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
table insertRow、deleteRow定義和用法總結(jié)
這篇文章主要對(duì)table insertRow、deleteRow定義和用法做下總結(jié),需要的朋友可以參考下2014-05-05
這篇文章主要介紹了JS delegate與live，有需要的朋友可以參考一下2013-12-12
因?yàn)镾et中存放的數(shù)據(jù)都是不會(huì)重復(fù)的數(shù)據(jù),我們?cè)诰帉慗S代碼的時(shí)候,因此我們可以利用Set來幫助我們更便捷地完成許多的事,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Set基本使用方法的相關(guān)資料,需要的朋友可以參考下2022-11-11