代码拉取完成，页面将自动刷新
微信小程序富文本插件（本文档动态更新，建议加星收藏）
古典名著苑微信小程序
<style>标签中的全局样式html中存在title标签，将自动把title标签的内容设置到页面的标题上，并在回调bindparse中返回，可以用于转发Parser标签内添加加载提示或动画，将在未加载完成或内容为空时显示，加载完成后自动隐藏show-with-animation属性可以实现内容加载完成后渐显的动画效果video和audio中设置多个source标签，组件将按顺序进行加载，若前面的链接无法播放，将自动切换下一个链接进行加载和播放，直到最后一个链接；可用于解决平台差异，最大程度避免无法播放selectable属性可以实现长按复制任意内容视频、表格等ignore属性，设置后将无法预览a标签，若href为小程序内部页面路径，将直接跳转；若是网页链接，则可以自动复制链接（可通过autocopy属性控制），并在浏览器中打开；点击时将有下划线和半透明的效果，支持图片链接。链接被点击时会触发bindlinkpress事件，可以在该回调中进行下载附件等更多操作rich-text进行显示）34.8KB
详细可见：功能介绍
下载Parser文件夹至小程序目录
在需要引用的页面的json文件中添加
{
"usingComponents": {
"Parser":"/Parser/index"
}
}
在需要引用的页面的wxml文件中添加
<Parser html="{{html}}" />
在需要引用的页面的js文件中添加
onLoad:function(){
this.setData({
html:'your html'
})
}
组件属性：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| 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 | 否 | 动画持续时间 |
string类型：一个html字符串，例如：<div>Hello World!</div>
object类型：一个形如{nodes: [Array], imgList: [Array], videoNum: Number, title: "String"}的结构体，其中nodes数组的格式基本同rich-text，对于该节点下有img，video，a标签的，需要将continue属性设置为true，否则将直接使用rich-text组件渲染，可能导致图片无法预览，链接无法点击等问题，imgList为其中所有图片地址的数组，videoNum是视频数量（不必要，用于autopause属性）title是页面的标题（不必要，传入将会设置到页面的标题上）回调函数bindparser的返回值就是这样的结构体array类型：格式要求同上（用此格式传入预览图片时，将不能通过左右滑动查看所有图片）default，在没有设置宽高时，按图片原大小显示；设置了宽或高时，按比例进行缩放；同时设置了宽高时，按设置的宽高进行缩放。在同时设置了宽高的情况下，宽度可能因为max-width:100%的限制而缩短导致图片变形，此时可将模式设置为widthFix，即保持宽度不变，高度自动变化（会导致设置的高度无效）{ body:"margin:5px" }；仅传入的html为String类型时有效（在解析过程中设置）回调函数
| 名称 | 功能 | 说明 |
|---|---|---|
| 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图片无法预览，无法显示视频，无法复制链接，部分标签不支持（在解析过程中进行替换）等缺点，另外该解析脚本还减小了包的大小，提高了解析效率，通过包装成一个自定义组件，简单易用且功能强大。
您可以随意的使用和分享本插件
U 支持了font标签的size属性F 修复了部分情况下实体编码内容无法显示的问题A 添加了在mpVue中使用的demo
F 修复了形如class="a b"（多个）时样式匹配失效的问题U 优化了a标签的点击态效果F 修复了部分情况下span标签样式出错的问题F 修复了部分情况下display:flex显示出错的问题更多可见：更新日志
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。