Skip to content

Introduction.md

Latest commit

 

History

History
143 lines (131 loc) · 5.96 KB

Introduction.md

File metadata and controls

143 lines (131 loc) · 5.96 KB

功能介绍

  • 支持解析<style>标签中的全局样式
    可以按以下模式解析

    模式 举例 匹配
    按class名匹配 .demo <element class="demo">
    按id名匹配 #demo <element id="demo">
    按标签名匹配 body <body>...</body>
    单层多个class .demo1.demo2 <element class="demo1 demo2">
    多个并列 .demo1,.demo2 <element class="demo1">或<element class="demo2">

    含有@或*的，伪类以及多层的样式将被直接忽略
    示例：

    <Parser html="{{html}}" />
    data:{
  html:'<style>.demo1{font-style:italic;}#demo2{font-weight:bold;}p{text-align:center;}</style>'+
  '<p><span class="demo1">Hello </span><span id="demo2">World!</span></p>'
}

    解析style

  • 支持自定义默认的标签样式
    可以在tag-style属性中设置标签的默认样式
    示例：

    <parser html="<code>test</code>" tag-style="{{tagStyle}}" />
    data:{
  tagStyle:{
    code: "font-style:italic;color:#005cc5"
  }
}

    解析自定义样式

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

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

    <parser html="{{html}}">加载中...</parser>

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

    <parser html="{{html}}" show-with-animation animation-duration="500" />

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

    <video controls>
  <source src="demo1.mov" />
  <source src="demo2.webm" />
</video>

  • 支持长按复制内容
    通过设置selectable属性可以实现长按复制任意内容
    tips: 百度小程序的rich-text本身支持selectable属性（需要百度APP 11.10以上）；但微信小程序不支持；本插件均可实现支持复制（且没有版本要求）

  • 支持各类实体
    支持 &nbsp; &ensp; &emsp; &lt; &gt; &quot; &mdash; &hellip; &copy;等多个常用实体

  • 智能压缩
    支持自动通过以下方式对解析结果进行压缩，可以有效提升性能：

    • 将一些只有一个子节点的标签进行合并，以实现减小深度的效果，根据内容不同，可以减少15%~60%的深度
    • 在非pre标签且没有white-space:pre属性时自动去除没用的空白符
       

  • 支持丰富的标签
    在rich-text组件的基础上增加支持以下标签:

    标签 属性
    video src, controls, loop, autoplay, muted, height, width
    audio src, controls, loop, autoplay, poster, name, author
    source src
    style
    body
    html
    ad unit-id / appid, apid, type

    以下标签在微信小程序基础库2.7.1以上已经支持；其他小程序不支持；本插件可以实现均支持这些标签，且没有基础库要求：

    标签 属性
    address
    article
    aside
    big
    center
    cite
    font size, face, color
    footer
    header
    mark
    nav
    pre
    s
    section
    small
    u

    以下标签仅微信小程序基础库2.7.1以上可用：

    标签 属性
    bdi
    bdo dir
    caption
    rp 高版本不显示，可用于兼容
    rt
    ruby

    另外，对于不在支持列表中的标签，除个别会直接移除外，都会被转换为一个行内标签，因此可以使用一些语义化标签

  • 图片显示效果
    支持自动按原大小显示，点击图片可以预览（预览时通过左右滑动可以查看所有图片），支持懒加载；对于一些装饰性的图片，可以对其设置ignore属性，设置后将无法预览

    解析图片

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

  • 视频效果

    1. 当一个加载超过3个视频时，将仅加载前3个视频，其余用图片代替，被点击时再加载，避免因同时加载过多视频而导致页面卡死
    2. 当一个视频播放时，可自动暂停其他所有视频的播放（可通过autopause属性控制）
       

  • 支持解析有序列表和无序列表
    解析列表

  • 性能指标
    支持无限层级，解析速度快，包大小仅约39.7KB（min版本28.3KB），容错性强，稳定性高，不需要网络请求
    以下情况都可以正常解析：

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