Parser

微信小程序富文本插件

功能介绍

• 支持解析<style>标签中的全局样式（.和#两种方式）
  示例：

  <style>
  .demo1{
   text-align:center;
  }
  #demo2{
   color:blue;
  }
  </style>
  <div class="demo1">
   <label>Hello </label>
   <label id="demo2">World!</label>
  </div>
  

  

• 支持的标签种类丰富，包括视频、表格等
  在rich-text组件的基础上增加支持以下标签:

  标签	属性
  video	src, controls, height, width
  font	face, color
  style
  section
  html
  body

  示例：
  
  

• 图片支持大小自适应，点击图片可以预览（预览时通过左右滑动可以查看所有图片）

  <img width="50px" src="img1.png" />
  <br />
  <img src="img2.jpg" />
  

• 长按a标签可以复制链接（小程序不能直接打开外链，可以复制链接并通过浏览器打开）

  <a href="https://github.com">长按复制链接</a>
  

  示例：
  

• 容错性强，稳定性高，不需要网络请求
  以下情况都可以正常解析：

  <!--冒号不匹配-->
  <div style="font-family:"宋体";text-align:center;">Hello</div>
  <!--标签首尾不匹配-->
  <div> World</label>
  <!--缺少尾标签-->
  <div>!
  

• 功能强大，支持无限层级，解析速度快，包大小仅约40KB

使用方法

代码片段

1. 下载Parser文件夹至小程序目录
   
2. 在需要引用的页面的json文件中添加

   {
     "usingComponents": {
       "Parser":"../Parser/index"
     }
   }
   

3. 在需要引用的页面的wxml文件中添加

   <Parser html="{{html}}" bindparser="parser" />
   

4. 在需要引用的页面的js文件中添加

   onLoad:function(){
     this.setData({
       html:'your html'
     })
   },
   parser:function(e){
     console.log(e);
   }
   

• 组件属性：

  属性	类型	默认值	必填	说明
  html	String/Object/Array		是	要显示的富文本数据，具体格式见下方说明
  space	String/Boolean	false	否	是否显示连续空格，合法输入值见下方说明
  selectable	Boolean	true	否	是否允许长按复制a标签连接
  preview	Boolean	true	否	是否允许预览图片

  • html格式：

    1. string类型：一个html字符串，例如：<div>Hello World!</div>
    2. object类型：一个形如{ nodes:[Array],imgList:[Array] }的结构体，其中nodes数组的格式同rich-text, imgList为其中所有图片地址的数组（回调函数bindparser的返回值就是这样的结构体）
    3. array类型：格式要求同rich-text（用此格式传入预览图片时，将不能通过左右滑动查看所有图片）
    4. 使用b, c方法可以节省解析的时间，提高性能

  • space格式（同rich-text）：

    值	说明
    ensp	中文字符空格一半大小
    emsp	中文字符空格大小
    nbsp	根据字体设置的空格大小

  • 关于preview
      该属性为true时，是通过模板的循环解析实现图片的预览，这可能导致在排版较为复杂（如左右排布）等时显示不出正确的效果，此时可以将该属性设置为{{false}}，插件会直接用rich-text组件渲染，能达到更好的排版效果。

  • 回调函数

    名称	功能	说明
    bindparser	在解析完成时调用（仅当传入的html为字符串时会调用）	返回一个object, 其中nodes为解析后的节点数组， imgList为图片列表，该object可以在下次调用直接作为html属性的值，节省解析的时间

后端解析

为提高页面性能，可以在服务器端提前解析好html，该插件同样可以在node.js中使用（只需要DomHandler.js, Parser.js, Tokenizer.js即可）
具有的功能：

1. 删除script, head, html, body, 注释等无用的标签
2. 将style标签中的样式解析到各标签的style中，例如：

const Parser=require('./Parser.js');
var html='<style>.demo{text-align:center}</style><div class="demo">Hello World!</div>';
Parser(html).then(function(e){
  console.log(e)
})

{ 
  "nodes": [{ 
    "name": "div", 
    "attrs": {
      "class": "demo",
      "style": "text-align:center"
    }, 
    "children": [{ 
      "text": "Hello World!", 
      "type": "text" 
    }] 
  }],
  "imgList": [] 
}

3. 在img标签的style中添加max-width:100%;，实现宽度自适应
4. 将section标签用div取代
5. 将font标签用label取代，并将face, color属性解析到style中
6. 将a标签的style中添加text-decoration: underline;color:#0000ff;
7. 对于该节点下含有a, img（preview为true时）, video标签的，continue的值会被设置为true（用于前端显示）
8. 解析完成将返回一个形如{ nodes:[Array], imgList:[Array] }结构体,其中nodes数组可以直接应用于rich-text组件，整个结构体可以直接作为Parser组件的参数

原理简介

  该插件结合了WxParse中模板循环的方式和rich-text组件，对于节点下有img, video, a标签的，使用模板循环的方式显示，否则直接通过rich-text组件显示，这样既解决了WxParse中过多的标签数（rich-text可以节省大量的标签），层数容易不够（对于大于20层的直接用rich-text解析，理论上可以显示无限层级），无法解析表格，一些组件显示格式不正确（rich-text可以解析出更好的效果）等缺点；也弥补了rich-text图片无法预览，无法显示视频，无法复制链接，部分标签不支持（在解析过程中进行替换）等缺点，另外该解析脚本还减小了包的大小，提高了解析效率，通过包装成一个自定义组件，简单易用且功能强大。