小程序如何实现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间房。有可看丽江古城全景的景观房，有落满阳光的大床房，有花园院景的复式房...
  


  
房间按照五星级标准配套，科勒卫浴、鹅绒被、品牌乳胶床垫、高端洗漱用品等，提供免费洗衣机、烘干机、自助厨房等配套服务。
  


  
每个房间距离适中，为所有入住房客营造更私密舒适的空间体验感！另房东可以提供一对一的管家服务，接受所有房客吃喝玩乐咨询以及打折的各种便利活动！
  


  
    
      丽江文殊设计师网红民宿大床房