微信小程序rich-text富文本用法實例分析
更新時間：2019年05月20日 09:52:33 作者：我叫陳小皮。
這篇文章主要介紹了微信小程序rich-text富文本用法,結(jié)合實例形式分析了微信小程序rich-text富文本插件的功能、用法及相關(guān)操作注意事項,需要的朋友可以參考下
本文實例講述了微信小程序rich-text富文本用法。分享給大家供大家參考，具體如下：
rich-text是一個新增的微信小程序插件,從基礎(chǔ)庫1.4.0開始,低版本需要做兼容處理
nodes屬性可為Array和String類型,但推薦使用Array.由于String類型最終也會轉(zhuǎn)為Array類型
nodes分為支持兩種節(jié)點,分別為元素節(jié)點(type=node ,默認為元素節(jié)點)和文本節(jié)點(type=text)
元素節(jié)點
| name | 標簽名 | String | 是 | 支持部分受信任的HTML節(jié)點 |
| attrs | 屬性 | Object | 否 | 支持部分受信任的屬性，遵循Pascal命名法 |
| children | 子節(jié)點列表 | Array | 否 | 結(jié)構(gòu)和nodes一致 |
<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
<!--{{nodes}}其中的變量名與data中名字相同-->
<!--支持默認事件tap、touchstart、touchmove、touchcancel、touchend和longtap-->
// rich-text.js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'width : 100px; height : 100px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
},
tap() {
console.log('tap')
}
})
如果頁面中存在多個富文本,富文本中存在多個孩子,請看下例:
<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}"></rich-text>
<rich-text nodes="{{nodes1}}"></rich-text>
// rich-text.js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'width : 100px; height : 100px; color: red;'
},
children: [{
type: 'text',
text: 'Hello 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標簽,哈哈哈哈'
}]
}]
}]
},
})
文本節(jié)點
| text | 文本 | String | 是 | 支持entities |
<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}"></rich-text>
// rich-text.js
Page({
data: {
nodes: "我是文本節(jié)點,意外不?"
},
})
注意:
- 全局支持class和style屬性，不支持id屬性。
- nodes 不推薦使用 String 類型，性能會有所下降
- rich-text 組件內(nèi)屏蔽所有節(jié)點的事件。
- name 屬性大小寫不敏感
- 如果使用了不受信任的HTML節(jié)點，該節(jié)點及其所有子節(jié)點將會被移除,受信任的html節(jié)點請看官方文檔
- img 標簽僅支持網(wǎng)絡(luò)圖片
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
這篇文章主要為大家詳細介紹了JavaScript事件處理程序的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
js實現(xiàn)網(wǎng)站最上邊可關(guān)閉的浮動廣告條代碼
這篇文章主要介紹了js實現(xiàn)網(wǎng)站最上邊可關(guān)閉的浮動廣告條代碼,涉及javascript基于鼠標事件操作頁面元素樣式的實現(xiàn)技巧,需要的朋友可以參考下2015-09-09
需要隱藏input file然后獲取它的值，但連jquery都無法獲取它的值，下面與大家分享下使用js的具體獲取方法，感興趣的朋友可以參考下哈2013-05-05
這篇文章主要介紹了深入淺出webpack之externals的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)下拉列表效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家詳細介紹了js+css實現(xiàn)紅包雨效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了Javascript作用域和作用域鏈原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了微信小程序wepy框架學習和使用心得詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
JS控制CSS樣式,首先得確定一點,CSS與HTML頁面的鏈接方式,因為CSS有3種與HTML頁面結(jié)合的方式,不同的方式也會產(chǎn)生不同的結(jié)果.2009-08-08
javascript使用正則實現(xiàn)去掉字符串前面的所有0
這篇文章主要介紹了javascript使用正則實現(xiàn)去掉字符串前面的所有0,需要的朋友可以參考下2018-07-07