小程序如何实现rich-text对富文本支持-创新互联
这篇文章给大家分享的是有关小程序如何实现rich-text对富文本支持的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联建站主要从事成都网站设计、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务故城,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220小程序富文本解析
目前小程序使用比较多的富文本方案一个是小程序自带的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对富文本支持”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
本文标题:小程序如何实现rich-text对富文本支持-创新互联
文章地址:http://pwwzsj.com/article/pdggh.html