小顺序富文本剖析
现在小顺序运用比较多的富文本计划一个是小顺序自带的rich-text组件,一个是wxPrase。
wxPrase道理是把原有的html标签悉数剖析成小顺序的组件,如许不管事宜可控以及扩大性都是比较好的,然则关于行内衬着和多重衬着方面表现不是很好。
微信自带的rich-text组件恰好补足了wxPrase行内衬着和多重衬着方面表现方面的瑕玷,然则关于一些自定义的标签支撑度不高而且会屏障元素一切事宜,虽然支撑直接剖析html字符串,然则机能没有直接绑定json串好。
官网给的rich-text演示demo:
<rich-text nodes="{{nodes}}"></rich-text>
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
<rich-text nodes="{{html2}}"></rich-text>
import parser from 'rich-text-parser'
Page({
data: {
html: `<p>文殊林舍、山房由丽江铂尔曼度假旅店余明金先生设想,是<b>丽江古城的网红民宿</b>,2017年被评为<b>全国100家“最美民宿”</b>,以及2017年<b>最值得睡的“365张床”</b>。</p>
<p><br></p>
<p>两家店均位于古城北门坡半山处,背倚青山,<b>可俯瞰古城全景。</b></p>
<p><br></p>
<p>文殊·林舍2间房、文殊·山房6间房,共8间房。有可看丽江古城全景的景观房,有落满阳光的大床房,有花圃院景的复式房...</p>
<p><br></p>
<p>房间<b>根据五星级规范配套</b>,科勒卫浴、鹅绒被、品牌乳胶床垫、高端洗漱用品等,供应免费洗衣机、烘干机、自助厨房等配套效劳。</p>
<p><br></p>
<p>每一个房间间隔适中,为一切入住房客营建更私密温馨的空间体验感!另房主能够供应一对一的管家效劳,接收一切房客吃喝玩乐征询以及打折的种种方便运动!</p>
<p><br></p>
<div class="kai-images">
<figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1glier2lsdge1q9irbs1a5u4e.jpg" rate="1.50">
<figcaption contenteditable="true" class="" data-placeholder="请输入图片说明"><h6>丽江文殊设想师网红民宿大床房</h6></figcaption>
</figure>
</div>
<div class="kai-images">
<figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1glp4b1sml12641ma3b96pnv4j.jpg" rate="1.50">
<figcaption contenteditable="true" class="" data-placeholder="请输入图片说明"><h6>丽江文殊设想师网红民宿大床房</h6></figcaption>
</figure>
</div>
<div class="kai-images">
<figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1glu4p1q2s1hpm4qu127dhj4o.jpg" rate="1.50">
<figcaption contenteditable="true" class="" data-placeholder="请输入图片说明"><h6>丽江文殊设想师网红双床房</h6></figcaption>
</figure>
</div>
<div class="kai-images">
<figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gmav71q0b182r1nd7184ufns4t.jpg" rate="1.50">
<figcaption contenteditable="true" class="" data-placeholder="请输入图片说明"><h6>丽江文殊设想师网红大床房(可观古城全景)</h6>
</figcaption>
</figure>
</div>
<div class="kai-images">
<figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gmg28udvhec1s4r1cvl1m2s52.jpg" rate="1.50">
<figcaption contenteditable="true" class="" data-placeholder="请输入图片说明"><h6>丽江文殊设想师网红大床房(可观古城全景)</h6>
</figcaption>
</figure>
</div>
<div class="kai-images">
<figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gmkvj1egf1254le7157quqj57.jpg" rate="1.50">
<figcaption contenteditable="true" class="" data-placeholder="请输入图片说明"><h6>丽江文殊设想师网红复式星空屋(可观古城全景)</h6>
</figcaption>
</figure>
</div>
<div class="kai-images">
<figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gmuhq161sf621hu81l7slc85c.jpg" rate="1.50">
<figcaption contenteditable="true" class="" data-placeholder="请输入图片说明"><h6>丽江文殊设想师网红民宿别墅东院</h6></figcaption>
</figure>
</div>
<div class="kai-images">
<figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gngk76441747omu1on619085h.jpg" rate="1.50">
<figcaption contenteditable="true" class="" data-placeholder="请输入图片说明"><h6>餐厅</h6></figcaption>
</figure>
</div>
<div class="kai-images">
<figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gnlm21gi916okcnf12mp1fh05m.jpg" rate="0.67">
<figcaption contenteditable="true" class="" data-placeholder="请输入图片说明"><h6>大众地区</h6></figcaption>
</figure>
</div>
<div class="kai-images">
<figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1go50bftu15c41rbgdoj1e4p5r.jpg" rate="1.50">
<figcaption contenteditable="true" class="" data-placeholder="请输入图片说明"><h6>大众地区</h6></figcaption>
</figure>
</div>
<div class="kai-images">
<figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gonmohor1duu1grv5gd8fu60.jpg" rate="1.50">
<figcaption contenteditable="true" class="" data-placeholder="请输入图片说明">大众地区-天台</figcaption>
</figure>
</div>
<div class="kai-images">
<figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1goslosu2qnn4tn1bdjus965.jpg" rate="1.50">
<figcaption contenteditable="true" class="" data-placeholder="请输入图片说明"><h6>丽江文殊设想师网红民宿汤池别墅西院</h6></figcaption>
</figure>
</div>
<div class="kai-images">
<figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gphvmfrgk2momcgko21g6a.jpg" rate="1.50">
<figcaption contenteditable="true" class="" data-placeholder="请输入图片说明"><h6>丽江文殊设想师网红民宿别墅东院</h6></figcaption>
</figure>
</div>
<p><br></p>
<p><b>门店信息:</b></p>
<p>·wifi已掩盖、24小时热水、吹风机、一次性用品</p>
<p>·电热毯、壁炉、一对一管家效劳等</p>
<p><br></p>
<p><b>商家联系电话:</b></p>
<p>·地点:云南省丽江市古城区北门坡玄天巷26号</p>
<p>·电话:15099128722</p>`,
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
效果图以及数据结构: