小顺序richtext对富文本支撑计划

小顺序富文本剖析

现在小顺序运用比较多的富文本计划一个是小顺序自带的rich-text组件，一个是wxPrase。

wxPrase道理是把原有的html标签悉数剖析成小顺序的组件，如许不管事宜可控以及扩大性都是比较好的，然则关于行内衬着和多重衬着方面表现不是很好。

微信自带的rich-text组件恰好补足了wxPrase行内衬着和多重衬着方面表现方面的瑕玷，然则关于一些自定义的标签支撑度不高而且会屏障元素一切事宜，虽然支撑直接剖析html字符串，然则机能没有直接绑定json串好。

官网给的rich-text演示demo:

Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
},
tap() {
console.log('tap')
}
})


rich-text-parser是一个能将html字符串转成rich-text组件能够剖析的json花样，而且能够自定义扩大标签，而且支撑修正rich-text组件内部html款式（包含img标签）。

运用方法：

npm i rich-text-parser -S --production

import parser from 'rich-text-parser'
Page({
data: {
html: `

文殊林舍、山房由丽江铂尔曼度假旅店余明金先生设想，是丽江古城的网红民宿，2017年被评为全国100家“最美民宿”，以及2017年最值得睡的“365张床”。

两家店均位于古城北门坡半山处，背倚青山，可俯瞰古城全景。

文殊·林舍2间房、文殊·山房6间房，共8间房。有可看丽江古城全景的景观房，有落满阳光的大床房，有花圃院景的复式房...

房间根据五星级规范配套，科勒卫浴、鹅绒被、品牌乳胶床垫、高端洗漱用品等，供应免费洗衣机、烘干机、自助厨房等配套效劳。

每一个房间间隔适中，为一切入住房客营建更私密温馨的空间体验感！另房主能够供应一对一的管家效劳，接收一切房客吃喝玩乐征询以及打折的种种方便运动！

门店信息：

·wifi已掩盖、24小时热水、吹风机、一次性用品

·电热毯、壁炉、一对一管家效劳等

商家联系电话：

·地点：云南省丽江市古城区北门坡玄天巷26号

·电话：15099128722

`,
html2: []
},
onLoad () {
const {html} = this.data
// 定义须要剖析的特别标签，value不填默许是div
parser.definedCustomTag({figure: 'div', figcaption: ''})
const nodes = parser.getRichTextJson(html)
console.log(nodes)
this.setData({
html2: nodes.children
})
}
})

源码拜见rich-text-parser

效果图以及数据结构：