Análisis de texto enriquecido para applets
En la actualidad, los applets usan más soluciones de texto enriquecido: uno es el componente de texto enriquecido que viene con el applet y el otro es wxPrase.
El principio de wxPrase es analizar todas las etiquetas HTML originales en pequeños componentes del programa, de modo que tanto el control de eventos como la escalabilidad sean mejores, pero no es muy bueno para la representación en línea y la representación múltiple.
El componente de texto enriquecido que viene con WeChat compensa las deficiencias de la representación en línea wxPrase y el rendimiento de representación múltiple, pero para algunas etiquetas personalizadas, el soporte no es alto y bloqueará todos los eventos del elemento. Aunque admite el análisis directo de cadenas html, El rendimiento no es tan bueno como la unión directa de cadenas json.
La demostración de texto enriquecido dada en el sitio web oficial:
<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 es un formato json que puede convertir cadenas html en componentes de texto enriquecido que se pueden analizar, y puede personalizar etiquetas de extensión, y admite la modificación de estilos HTML internos ricos en estilo HTML (incluidas las etiquetas img).
Cómo utilizar:
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
})
}
})
Código fuente ver analizador de texto enriquecido
Diagrama de efectos y estructura de datos:
Este artículo se reproduce en: Soporte de texto enriquecido de applet Ape 2048 para texto enriquecido