详解小程序rich-text对富文本支持方案

小程序富文本解析

目前小程序使用比较多的富文本方案一个是小程序自带的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

效果图以及数据结构:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序 如何引入外部字体库iconfont的图标

    如何引入外部字体库iconfont的图标,具体如下 直接使用阿里巴巴的网络路径 选择iconfont图标 官网:阿里巴巴矢量字体库 步骤:阿里巴巴字体库使用方法 全局引入app.wxss @font-face { font-family: 'iconfont'; /* project id 518032 */ src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot'); src: url('//at.alicdn.com/t/fo

  • 微信小程序rich-text富文本用法实例分析

    本文实例讲述了微信小程序rich-text富文本用法.分享给大家供大家参考,具体如下: rich-text是一个新增的微信小程序插件,从基础库1.4.0开始,低版本需要做兼容处理 nodes属性可为Array和String类型,但推荐使用Array.由于String类型最终也会转为Array类型 nodes分为支持两种节点,分别为元素节点(type=node ,默认为元素节点)和文本节点(type=text) 元素节点 name 标签名 String 是 支持部分受信任的HTML节点 attrs

  • 在webstorm开发微信小程序之使用阿里自定义字体图标的方法

    1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. 3.在需要使用到图标的页面导入该wxss文件.例如: 这样在该wxml页面就可以使用图标了 总结 以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • 详解mpvue小程序中怎么引入iconfont字体图标

    前言 iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢? iconfont阿里巴巴矢量图标库 将图标加入购物车 搜索关键词可以是中文也可以是英文 下载素材 点击网站右上角的购物车图标,此处我们选第三个 ps:添加到项目很有用,可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等,此处我们选择加入项目并下载代码 文件解压 一般网页中为了兼容性考虑,我们会留下css/ttf/svg/woff/eot

  • 微信小程序使用字体图标的方法

    项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为: 搜索"购物车"图标--->点击"添加入库"-->点击购物车进入购物车-->点击下载代码按钮. 点击下载代码,将得到名为download.zip的压缩包,解压

  • 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮修改字体颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="color:{{color}}">我是view标签</view> <view style="display:flex;"> <block wx:for="{{colorArray}}" wx:k

  • 微信小程序在text文本实现多种字体样式

    这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 微信小程序比较特别,它的wxml只允许用自己家的标签,像那些span.div什么的统统不可以用,那如何在text文本加入不同的样式呢,在html里面我们可以添加一个span,再给那些span添加不同的class或者style就可以了,但小程序不可以,在text里面只允许在加入text,不可以加view等东西,所以我们可以按照它提供的,再加一

  • 详解小程序横屏方案对比

    前言 随着小程序api开放的功能日渐增多,小程序可以做到的功能和展现形式也越来越多,其中横屏的展现形式就是其中的一种,而实现横屏的方案也有多种,但是每种方案都有一定的缺陷,恰巧最近也在横屏方案上踩了不少坑,接下来就来和大家分享一下小程序的不同横屏方案的优劣(踩坑心得) 组件自带横屏方法 小程序中的媒体组件一般都会提供全屏的方法,而且全屏方法中会提供一个direction的全屏参数,可以通过这全屏参数将小程序旋转90度横屏展示,这是小程序中最简单的横屏方法. 这个方法优点在于调用的组件全屏方法做的

  • 微信小程序实战项目之富文本编辑器实现

    目录 前言 1. 实现效果 2. 创建发布页面,实现基本布局 3. 实现编辑区操作栏的功能 3.1. 实现文本加粗.斜体.文本下划线.左对齐.居中对齐.右对齐 3.2. 实现撤销.恢复.插入图片.删除操作 4. 参考 总结 前言 这是我参加掘金启航计划的第三篇文章,这次总结的是实现一个简单的富文本编辑器,相信阅读文章后,观众老爷们,能够实现富文本编辑器,在微信小程序中发布自己的文章,希望观众老爷们多多支持! 1. 实现效果 实现的效果如下图: 实现的功能点如下: 文本加粗.斜体.下划线,对齐方式

  • 详解小程序rich-text对富文本支持方案

    小程序富文本解析 目前小程序使用比较多的富文本方案一个是小程序自带的rich-text组件,一个是wxPrase. wxPrase原理是把原有的html标签全部解析成小程序的组件,这样无论事件可控以及扩展性都是比较好的,但是对于行内渲染和多重渲染方面表现不是很好. 微信自带的rich-text组件刚好补足了wxPrase行内渲染和多重渲染方面表现方面的缺点,但是对于一些自定义的标签支持度不高并且会屏蔽元素所有事件,虽然支持直接解析html字符串,但是性能没有直接绑定json串好. 官网给的ric

  • 详解小程序毫秒级倒计时(适用于拼团秒杀功能)

    废话不多说直接上代码: 效果图: index.js Page({ /** * 页面的初始数据 */ data: { countdown:'' , endDate2: '2018-08-08 11:41:00' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; that.countTime() }, countTime() { var that = this; var date = new Date()

  • 详解小程序之简单登录注册表单验证

    这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容 一.首先我是在util.js中引入表单正则验证规则,给予login.js来引用 function regexConfig() { var reg = { userid: /^[A-Za-z0-9]+$/, //邮箱正则验证 phone: /^1(3|4|5|7|8)\d{9}$/, //手机号正则验证 cards: /^[\u4e00-\u9fa5]{2,

  • 详解小程序设置缓存并且不覆盖原有数据

    最近在写小程序的小项目,因为是刚上手小程序,这途中遇到了许多问题,所幸在自己的坚持不懈下基本都得到了解决,今天就记录一下怎么设置缓存数据并且不覆盖吧,如果有错误的地方麻烦大家指正,互相学习一下! 这是官方的关于缓存的说明,它会覆盖掉之前的内容.我还是直接上源码吧 这是writecomment.js文件 Page({ /** * 页面的初始数据 */ data: { }, submit: function (event) { var writecomment = event.detail.valu

  • 详解小程序用户登录状态检查与更新实例

    这篇文章主要解决以下问题:用户每次登录小程序(包括第一次使用)及点击小程序的每个页面的时候,我们如何判断他当前的登录状态是否过期?如果过期,如何重新获取用户信息并发送至开发者服务器更新用户信息,以及设置新的用户登录状态? 将这个部分单独作为一篇文章有两个原因: ① wx.getUserInfo(OBJECT) 接口调整,废弃了以前直接获取用户信息的方法: ② 上篇文章授权.登录.session_key.unionId只梳理了登录流程而没有贴实际的代码,所以这篇文章以代码实现为主. 1. 代码逻辑

  • 详解小程序开发经验:多页面数据同步

    导语:本文主要介绍在小程序中,多页面之间如何保持数据同步 在很多的产品中,都会存在跨页面间需要数据同步,如下示例: 为了更好的理解该场景,我们再详细描绘一下: 本场景包括4个页面:动态广场.个人中心.我的动态.动态详情 首先,进入动态广场页,请求加载数据,展示动态列表,其中,我们用绿色内阴影区分该条动态是"我的",其他未加内阴影的表示是"别人的": 然后,进入个人中心页,请求加载数据,展示获赞数量: 点击我的动态,进入我的动态页,请求加载数据,展示我的动态列表: 点

  • 详解小程序云开发数据库

    在云控制台操作云数据库,即创建数据库和插入数据等操作. 云开发数据库提供的数据类型:string.number.object.array.bool.GeoPoint(地理位置点).Date(时间).Null 其中的Date表示时间,精确到毫秒.小程序端用Javascript内置Date对象创建的时间是客户端时间,在需要用服务端时间的时候,用API中提供的serverDate对象来创建服务端当前的时间标记. GeoPoint:用于表示地理位置点,经纬度唯一标记一个点,可以把这个地理位置理解为平面直

  • 详解小程序退出页面时清除定时器

    由于小程序页面退出时,定时器和长连接等不会自动清除断开,所以需要我们在生命周期函数中手动清除 但是定时器定义在函数中,我们无法在函数外清除,所以为了解决这个问题,我们需要把定时器定义在data中 比如:Loadingtime是一个定时器,在data中定义Loadingtime:''. 然后在time方法中使用 在onUnload监听页面卸载生命周期函数中清除 如此在退出该页面时,就可以清除该定时器了 以上所述是小编给大家介绍的小程序退出页面时清除定时器详解整合,希望对大家有所帮助,如果大家有任何

随机推荐