Metrics
0
Watch 10 Star 91 Fork 10

Darkce / ParserJavaScriptMIT

Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
微信小程序富文本插件,支持表格、图片、视频等多种类型,无层数限制,稳定性强且轻量化, 兼容uni-app, taro,等框架 spread retract

Clone or download
Loading...
README.md

Parser

微信小程序富文本插件(本文档动态更新,建议加星收藏)

案例展示

  • 古典名著苑微信小程序

    古典名著苑小程序

  • 支持解析<style>标签中的全局样式

  • 支持自定义默认的标签样式

  • 支持自动设置标题
    html中存在title标签,将自动把title标签的内容设置到页面的标题上,并在回调bindparse中返回,可以用于转发

  • 支持添加加载提示
    可以在Parser标签内添加加载提示或动画,将在未加载完成或内容为空时显示,加载完成后自动隐藏

  • 支持动画显示效果
    通过设置show-with-animation属性可以实现内容加载完成后渐显的动画效果

  • 支持多资源加载
    可以在videoaudio中设置多个source标签,组件将按顺序进行加载,若前面的链接无法播放,将自动切换下一个链接进行加载和播放,直到最后一个链接;可用于解决平台差异,最大程度避免无法播放

  • 支持长按复制内容
    通过设置selectable属性可以实现长按复制任意内容

  • 支持的标签种类丰富,包括视频表格

  • 图片支持大小自适应,点击图片可以预览(预览时通过左右滑动可以查看所有图片);对于一些装饰性的图片,可以对其设置ignore属性,设置后将无法预览

  • 点击a标签,若href为小程序内部页面路径,将直接跳转;若是网页链接,则可以自动复制链接(可通过autocopy属性控制),并在浏览器中打开;点击时将有下划线和半透明的效果,支持图片链接。链接被点击时会触发bindlinkpress事件,可以在该回调中进行下载附件等更多操作

  • 支持解析有序列表和无序列表(直接由rich-text进行显示)

  • 容错性强,稳定性高,不需要网络请求

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

详细可见:功能介绍

使用方法

  1. 下载Parser文件夹至小程序目录
    页面结构

  2. 在需要引用的页面的json文件中添加

    {
      "usingComponents": {
        "Parser":"/Parser/index"
      }
    }
  3. 在需要引用的页面的wxml文件中添加

    <Parser html="{{html}}" />
  4. 在需要引用的页面的js文件中添加

    onLoad:function(){
      this.setData({
        html:'your html'
      })
    }
  • 整个项目是示例小程序的源码(原生框架),可以直接体验

  • 在Taro中使用可参考:https://github.com/xPixv/Taro-ParserRichText

  • 在mpVue中使用可参考:https://github.com/jin-yufeng/Parser_mpVue

  • 组件属性:

    属性 类型 默认值 必填 说明
    html String/Object/Array 要显示的富文本数据,具体格式见下方说明
    tag-style Object 设置标签的默认样式
    autocopy Boolean true 是否允许链接受到点击时自动复制链接(仅限http开头的网络链接)
    autopause Boolean true 是否允许播放视频时自动暂停其他视频
    autosetTitle Boolean true 是否自动将title标签的内容设置到页面标题上
    img-mode String default 图片显示模式
    selectable Boolean false 是否允许长按复制内容
    show-with-animation Boolean false 是否使用渐显动画
    animation-duration Number 400 动画持续时间
    • html格式:
      1. string类型:一个html字符串,例如:<div>Hello World!</div>
      2. object类型:一个形如{nodes: [Array], imgList: [Array], videoNum: Number, title: "String"}的结构体,其中nodes数组的格式基本同rich-text,对于该节点下有imgvideoa标签的,需要将continue属性设置为true,否则将直接使用rich-text组件渲染,可能导致图片无法预览,链接无法点击等问题,imgList为其中所有图片地址的数组,videoNum是视频数量(不必要,用于autopause属性)title是页面的标题(不必要,传入将会设置到页面的标题上)回调函数bindparser的返回值就是这样的结构体
      3. array类型:格式要求同上(用此格式传入预览图片时,将不能通过左右滑动查看所有图片)
      4. 使用b, c方法可以节省解析的时间,提高性能
    • 关于img-mode
      默认default,在没有设置宽高时,按图片原大小显示;设置了宽或高时,按比例进行缩放;同时设置了宽高时,按设置的宽高进行缩放。在同时设置了宽高的情况下,宽度可能因为max-width:100%的限制而缩短导致图片变形,此时可将模式设置为widthFix,即保持宽度不变,高度自动变化(会导致设置的高度无效)
    • 关于tag-style
      可以设置标签的默认样式,如{ body:"margin:5px" };仅传入的htmlString类型时有效(在解析过程中设置)
  • 回调函数

    名称 功能 说明
    bindparser 在解析完成时调用(仅当传入的html为字符串时会调用) 返回一个object,其中nodes为解析后的节点数组,imgList为图片列表,title是页面标题,该object可以在下次调用直接作为html属性的值,节省解析的时间
    bindready 渲染完成时调用 返回整个组件的NodesRef结构体,包含宽度、高度、位置等信息(每次html修改后都会触发)
    binderror 出错时返回 解析错误或加载多媒体资源出错时调用,返回一个object,其中message为错误原因,若由于加载多媒体资源出错还会具有target属性,包含该标签的具体信息
    bindlinkpress 在链接受到点击时调用 返回该链接的href值,开发者可以在该回调中进行进一步操作,如下载文档和打开等

更多信息可见:使用方法

后端解析

  本插件提供了一个配套的后端node.js支持包,可以提供更加强大的功能,如匹配多层的style,代码高亮,直接打开网址,解析markdown等,其返回值可以直接作为本组件的html属性的值;且在后端提前完成解析后可以节省解析时间,提高性能。
注意:该包需要node.js v7.6.0以上运行环境,无法直接在小程序前端使用,建议部署在服务器或云函数上
安装方法:

npm install parser-wxapp

使用方法:

const parser=require('parser-wxapp');
var html="<div>Hello World!</div>";
parser(html).then(function(res){
  console.log(res);
})

详细文档参考: npm链接

二次开发

如需要进行二次开发,请参考《二次开发指南》

原理简介

  该插件对rich-text组件进行了二次封装,对于节点下有img, video, a标签的,使用自定义组件递归的方式显示,否则直接通过rich-text组件显示,这样既解决了WxParse中过多的标签数(rich-text可以节省大量的标签),层数容易不够(自定义组件递归可以显示无限层级),无法解析表格,一些组件显示格式不正确(rich-text可以解析出更好的效果)等缺点;也弥补了rich-text图片无法预览,无法显示视频,无法复制链接,部分标签不支持(在解析过程中进行替换)等缺点,另外该解析脚本还减小了包的大小,提高了解析效率,通过包装成一个自定义组件,简单易用且功能强大。
更多可见:《小程序富文本能力的深入研究与应用》

许可

您可以随意的使用和分享本插件

更新日志

  • 2019.8.22:
    1. U 支持了font标签的size属性
  • 2019.8.21:
    1. F 修复了部分情况下实体编码内容无法显示的问题
  • 2019.8.17:
    1. A 添加了在mpVue中使用的demo
    2. F 修复了形如class="a b"(多个)时样式匹配失效的问题
  • 2019.8.10:
    1. U 优化了a标签的点击态效果
    2. F 修复了部分情况下span标签样式出错的问题
  • 2019.8.2:
    1. F 修复了部分情况下display:flex显示出错的问题

更多可见:更新日志

Comments ( 3 )

You need to Sign in for post a comment

JavaScript
1
https://gitee.com/Darkce/Parser.git
git@gitee.com:Darkce/Parser.git
Darkce
Parser
Parser
master

Help Search