百度小程序之富文本解析问题
- 共 3,216 次检阅

小程序自带的富文本解析:

rich-text

  1. 屏蔽所有事件,导致图片无法预览,链接无法点击
  2. 支持的标签少,很多常用标签不支持(如 section、audio、video 等)
  3. 支持的实体编码少,且使用了不可识别的实体时会被显示为 undefined
  4. 容错性差,遇到标签不匹配等问题时将无法显示

wxParse

  1. 只支持有限的层级,超过就无法显示(且大量循环的模板占用了较大的空间)
  2. 对于复杂的样式(如表格等)支持性差
  3. 一些格式不正确时会被原样显示而不解析
  4. 个人拙见:配置起来也比较小麻烦

mp-html

本组件有效的解决了以上问题

  1. 支持图片点击预览(左右滑动可以查看所有图片);支持链接点击(若链接是小程序内部页面,则自动跳转;若是网页链接,则复制到剪贴板;并可在回调中进行进一步操作)
  2. 支持丰富的标签,在 rich-text 的基础上,增加支持 video、audio、source、section、s、u、font、pre、center 等多种标签,基本覆盖了所有常用标签
  3. 增加支持了       — · ‘  “ … © 等多个常用的实体编码,且不支持的编码会被直接去除,而不是显示成 undefined
  4. 容错性强,类似于以下情况都可以正常解析和显示
    <!--冒号不匹配-->
    <div style="font-family:"宋体";text-align:center;">Hello</div>
    <!--标签首尾不匹配-->
    <div> World</label>
    <!--异形标签-->
    <o:p></o:p>
    <!--缺少尾标签-->
    <div>!​
  5. 支持无限层级

另外还实现了更多丰富的功能

  1. 支持解析 style 标签中的全局样式
  2. 支持多资源加载:在 video 和 audio 标签中可以使用多个 source 标签来设置多个源,插件将按顺序进行加载,若前一个链接无法播放,将自动切换到下一个链接
  3. 支持自动设置标题:若有 title 标签可以自动将 title 标签的内容设置到页面标题上
  4. 支持添加加载提示:在标签中可以放入加载提示,加载完成后将自动隐藏,还可以设置动画渐显效果
  5. 支持播放一个视频时自动暂停其他所有视频
  6. 轻量化

https://github.com/jin-yufeng/mp-html

分享到:

这篇文章还没有评论

发表评论