sw923041602 / parser

小程序富文本插件（html 渲染），支持微信、QQ、百度、支付宝、头条、uni-app

Parser

小程序富文本插件，详见 文档

功能简介

• 支持匹配 style 中的样式
• 支持 svg
• 支持锚点跳转
• 支持设置占位图
• 支持长按复制内容
• 支持给多媒体标签设置多个源
• 支持自动给链接填充主域名
• 支持几乎所有的 html 标签
• 支持丰富的事件和效果
• 轻量化、效率高、容错性强
• 支持多平台（微信、QQ、百度、支付宝、头条、uni-app 等）
  ...

更多功能可见：功能介绍

使用方法

插件包说明

名称	大小	使用
parser	41.4KB	微信小程序插件包
parser.min	26.1KB	微信小程序插件包压缩版（功能相同）
parser.qq	41.0KB	QQ 小程序插件包
parser.bd	39.4KB	百度小程序插件包
parser.my	39.7KB	支付宝小程序插件包
parser.tt	40.2KB	头条小程序插件包
parser.uni	59.6KB	uni-app 插件包（可以编译到所有平台）

在原生框架中使用

1. 复制 parser 文件夹至 components 目录

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

   {
     "usingComponents": {
       "parser":"/components/parser/parser"
     }
   }

3. 在需要使用页面的 wxml 文件中添加

   <parser html="{{html}}" />

4. 在需要使用页面的 js 文件中添加

   data: {
     html:"<div>Hello World!</div>"
   }

• demo/wx 文件夹下的是微信小程序 富文本插件 示例程序的源码，可供参考

在 uni-app 中使用

1. 复制 parser.uni 包到 components 目录下（更名为 jyf-parser）

2. 在需要使用页面的 vue 文件中添加

   <template>
     <view>
       <jyf-parser :html="html"></jyf-parser>
     </view>
   </template>
   <script>
   import parser from "@/components/jyf-parser/jyf-parser"; // HBuilderX 2.5.5 及以上可以不需要引入
   export default {
     // HBuilderX 2.5.5 及以上可以不需要引入
     components: {
       "jyf-parser": parser
     },
     data() {
       return {
         html: '<div>Hello World!</div>'
       }
     }
   }
   </script>

• 可以直接通过 插件市场 引入
• demo/uni-app 文件夹下是一个示例程序，可供参考

其他框架中使用可见：在其他框架中使用

组件属性

属性	类型	默认值	说明
html	String/Array		要显示的富文本数据，格式同 rich-text
autopause	Boolean	true	是否允许播放视频时自动暂停其他视频
autoscroll	Boolean	false	是否自动给 table 加一个滚动层（使表格可以单独滚动）
autosetTitle	Boolean	true	是否自动将 title 标签的内容设置到页面标题
compress	Number	0	压缩等级，可以选择是否移除 id 和 class
domain	String		主域名，设置后将给链接自动拼接主域名或协议名
lazy-load	Boolean	false	是否开启图片懒加载
loading-img	String		图片加载完成前的占位图，详见 占位图
selectable	Boolean	false	是否允许长按复制内容
show-with-animation	Boolean	false	是否使用渐显动画
tag-style	Object		设置标签的默认样式
use-anchor	Boolean	false	是否使用页面内锚点
use-cache	Boolean	false	是否使用缓存，设置后多次打开不用重复解析

详细可见：组件属性

事件

名称	功能	说明
bindparse	解析完成时触发	返回解析结果（一个 nodes 数组，仅传入的 html 类型为 String 时会触发），可以对该结果进行自定义修改，将在渲染时生效
bindload	dom 加载完成时触发	所有节点被添加到节点树中时触发，无返回值，可以调用 api
bindready	渲染完成时触发	返回 boundingClientRect 的查询结果（包含宽高、位置等信息），所有图片（除懒加载）加载完成时才会触发，图片较大时可能 延时较长
binderror	出错时触发	返回一个 object，其中 source 是错误来源，errMsg 为错误信息，target 包含出错标签的具体信息
bindimgtap	图片被点击时触发	返回一个 object，其中 src 是图片链接，ignore 是一个函数，在回调函数中调用将不进行预览
bindlinkpress	链接被点击时触发	返回一个 object，其中 href 是链接地址，ignore 是一个函数，在回调中调用将不自动跳转/复制

详细可见：事件

使用外部样式

如果需要使用一些固定的样式，可以通过 wxss / css 文件引入
在 parser/trees/trees.wxss(css) 中通过 @import 引入自定义的样式文件即可

/*
* parser/trees/trees.wxss(css)
* 在这里引入您的自定义样式
*/
@import "external.wxss(css)";

更多信息可见：使用方法

扩展包

patches 文件夹中准备了一些扩展包，可根据需要选用，可以实现更加丰富的功能
具体信息见：扩展包

案例体验

富文本插件	程序员技术之旅	APP 比比	全品作业小助手

多么生活	恋爱宝典 xcx	古典文学名著阅读	典典博客

以上排名不分先后，更多可见：链接（欢迎添加）

相关项目：
EastWorld/wechat-app-mall
zhangdaren/miniprogram-to-uniapp

许可与支持

• 许可
  您可以随意的使用和分享本插件 MIT License
  不可用于任何违法用途
  在用于生产环境前务必经过充分测试，由插件 bug 带来的损失概不负责（可以自行修改源码）

• 支持
  

更新日志

• 2020.6.11

  1. A 增加支付宝小程序原生包 详细
  2. U uni-app 包适配华为快应用
  3. U uni-app 包编译到 App 时实现了 lazy-load 属性（图片懒加载）
  4. F 修复了 ios 端图片长按可能导致页面失去响应的问题 详细
  5. F 修复了 uni-app 包多次设置 html 内容时可能出现一些不正确情况的问题
  6. D 移除了 trustAttrs 的配置项，改为自动移除 data- 开头的属性

• 2020.5.28

  1. U uni-app 包适配 360 小程序（由于 360 小程序在浏览器中运行，和 H5 处理方式相同）
  2. F 修复了属性名后有空格会无法识别的问题 详细
  3. F 修复了 img 没有设置 src 会报错的问题
  4. F 修复了 uni-app 包部分情况下 errorImg 失效的问题
  5. F 修复了 uni-app 包编译到 NVUE 时若 html 中含有换行符可能无法显示的问题
  6. F 修复了 uni-app 包编译到 App 时前几秒点击视频无法播放的问题

• 2020.5.24

  1. A 增加 loading-img 属性，可以设置图片加载完成前的占位图 详细
  2. A 增加 errorImg 的配置项，可以设置图片出错时的占位图 详细
  3. F 修复了 uni-app 包使用 audio 扩展包 后编译到百度小程序出错的问题
  4. D error 事件中不再返回 context 对象

• 2020.5.21

  1. U 支持 embed 标签（type 中含 video 或后缀名为 .mp4、.3gp、.m3u8 的将被转为视频；type 中含 audio 或后缀名为 .m4a、.wav、.mp3、.aac 的将被转为音频；其余不支持）
  2. U 音视频如果既没有设置 autoplay 也没有设置 controls 将自动设置 controls，避免无法播放
  3. F 修复了锚点无法跳转到 li 和 a 标签的问题 详细
  4. F 修复了部分情况下 svg 标签 style 中的 vertical-align 无法生效的问题
  5. F 修复了未闭合的标签如果是 rich-text 不支持的标签可能无法显示的问题 详细
  6. F 修复了 error 事件中通过 setSrc 重设图片地址后无法预览的问题
  7. F 修复了微信包个别情况下可能出现 null is not an object 错误的问题 详细
  8. F 修复了百度包部分情况下预览时无法左右滑动查看所有图片的问题
  9. F 修复了 uni-app 包编译到百度小程序安卓真机可能无法显示的问题 详细
  10. F 修复了 uni-app 包编译到 NVUE 时通过 v-if 切换可能无法显示的问题 详细
  11. F 修复了 uni-app 包编译到 app 时 iframe 无法全屏的问题

• 2020.5.13

  1. A 添加了 autoscroll 属性，可以给所有表格添加一个滚动层 详细
  2. U a 标签可以跳转到 tabbar 页面
  3. U 通过 stylelint 规范 css 写法
  4. U 为避免在一些框架中使用出现文件不存在的错误，扩展包不再默认引入（原来是在 try 中 require）
  5. U uni-app 包编译到百度小程序中实现了 autopause 属性
  6. U uni-app 包添加了组件文档注释，输入时可以有提示
  7. D 移除了 gesture-zoom 属性
  8. D 移除了 preLoad 的 api

更多可见：更新日志