资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

小程序怎么实现rich-text对富文本支持

这篇文章主要讲解了“小程序怎么实现rich-text对富文本支持”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“小程序怎么实现rich-text对富文本支持”吧!

公司主营业务:做网站、成都网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出阜新免费做网站回馈大家。

小程序富文本解析

目前小程序使用比较多的富文本方案一个是小程序自带的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对富文本支持”的内容了,经过本文的学习后,相信大家对小程序怎么实现rich-text对富文本支持这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


文章名称:小程序怎么实现rich-text对富文本支持
本文网址:http://www.cdkjz.cn/article/jgdpcd.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220