收藏
评论

Parser-基于wxParse的二次开发

在社区文章里看到老哥分享的。尝试使用了下。

Parser

微信小程序富文本插件

功能介绍

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

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

    解析style

  • 支持的标签种类丰富,包括视频表格
    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>
    

    示例:
    解析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": [] 
}
  1. img标签的style中添加max-width:100%;,实现宽度自适应
  2. section标签用div取代
  3. font标签用label取代,并将face, color属性解析到style
  4. a标签的style中添加text-decoration: underline;color:#0000ff;
  5. 对于该节点下含有a, imgpreviewtrue时), video标签的,continue的值会被设置为true(用于前端显示)
  6. 解析完成将返回一个形如{ 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图片无法预览,无法显示视频,无法复制链接,部分标签不支持(在解析过程中进行替换)等缺点,另外该解析脚本还减小了包的大小,提高了解析效率,通过包装成一个自定义组件,简单易用且功能强大。

最后一次编辑于  2019-11-21
收藏

5 个评论

  • K兔
    K兔
    01-07

    亲,这个图片中间有空白条怎么处理了?

    01-07
    赞同
    回复 3
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      01-07
      parser解析的html吗?
      01-07
      回复
    • K兔
      K兔
      01-07回复仙森ღ₅₂₀¹³¹⁴
      似的,嗯嗯  可以了,默认给的图片是display:inline-block,改成display:block就可以了   非常感谢楼主的分享!
      01-07
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      01-07回复K兔
      👌
      01-07
      回复
  • 夏日炎炎
    夏日炎炎
    2019-12-16

    支持加载js吗?

    2019-12-16
    赞同
    回复 3
  • 大豆博文
    大豆博文
    2019-05-28

    您好,我用的这个,模拟器测试没问题,但是真机和预览没有显示,我打开调试,看到节点并未被渲染成功,只到了<scroll-view  x-scroll="true"  y-scroll="true"><scroll>就没了;模拟器是可以看到全部的;

    2019-05-28
    赞同
    回复 3
  • 与不停雨
    与不停雨
    2019-04-17

    我是后端没有配置啥,直接按照你的在小程序里都配置了,结果啥也没显示,但是我有打印数据,是有值的 啊,请问能指教一下吗?

    2019-04-17
    赞同
    回复 23
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      2019-04-18

      打印的啥值 能截个图么

      2019-04-18
      回复
    • 与不停雨
      与不停雨
      2019-04-18回复仙森ღ₅₂₀¹³¹⁴


      你好,麻烦你了,不急哈,你有时间的话回复我下就行

      2019-04-18
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      2019-04-18回复与不停雨

      这是你们的协议吧。可以写个代码片段给我么?  写死返回的数据。

      2019-04-18
      回复
    • 与不停雨
      与不停雨
      2019-04-18回复仙森ღ₅₂₀¹³¹⁴

      我是直接拿的你的内容,没有什么协议的,就是普通的后台百度editor编辑内容,保存到数据库,前台是直接拿的数据库的数据

      2019-04-18
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      2019-04-18回复与不停雨

      可以看下我的小程序 《青团社兼职实习 》  首页上拉到下面图片的地方 点击进去 里面基本都是 wxParse解析的html文件。

      2019-04-18
      回复
    查看更多(18)
  • 与不停雨
    与不停雨
    2019-04-17

    你好,想问下,这个对于富文本的内容是还得后台处理一下吗,然后您这个组件才能使用?

    2019-04-17
    赞同
    回复
登录 后发表内容