小程序富文本插件,详见 文档
- 支持匹配
style中的样式 - 支持
svg - 支持锚点跳转
- 支持设置占位图
- 支持长按复制内容
- 支持给多媒体标签设置多个源
- 支持自动给链接填充主域名
- 支持几乎所有的
html标签 - 支持丰富的事件和效果
- 轻量化、效率高、容错性强
- 支持多平台(微信、QQ、百度、支付宝、头条、uni-app 等)
...
更多功能可见:功能介绍
| 名称 | 大小 | 使用 |
|---|---|---|
| parser | 39.9KB | 微信小程序插件包 |
| parser.min | 25.2KB | 微信小程序插件包压缩版(功能相同) |
| parser.qq | 39.5KB | QQ 小程序插件包 |
| parser.bd | 37.9KB | 百度小程序插件包 |
| parser.my | 38.3KB | 支付宝小程序插件包 |
| parser.tt | 38.7KB | 头条小程序插件包 |
| parser.uni | 57.8KB | uni-app 插件包(可以编译到所有平台) |
-
复制
parser文件夹至components目录 -
在需要使用页面的
json文件中添加{ "usingComponents": { "parser":"/components/parser/parser" } } -
在需要使用页面的
wxml文件中添加<parser html="{{html}}" />
-
在需要使用页面的
js文件中添加data: { html:"<div>Hello World!</div>" }
demo/wx文件夹下的是微信小程序富文本插件示例程序的源码,可供参考
-
复制
parser.uni包到components目录下(更名为jyf-parser) -
在需要使用页面的
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 | 要显示的 html 字符串 | |
| 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 | 解析完成时触发 | 返回解析结果,可以对该结果进行自定义修改,将在渲染时生效 |
| 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.15
-
2020.6.11
-
2020.5.28
Uuni-app包适配360小程序(由于360小程序在浏览器中运行,和H5处理方式相同)F修复了属性名后有空格会无法识别的问题 详细F修复了img没有设置src会报错的问题F修复了uni-app包部分情况下errorImg失效的问题F修复了uni-app包编译到NVUE时若html中含有换行符可能无法显示的问题F修复了uni-app包编译到App时前几秒点击视频无法播放的问题
-
2020.5.24
-
2020.5.21
U支持embed标签(type中含video或后缀名为.mp4、.3gp、.m3u8的将被转为视频;type中含audio或后缀名为.m4a、.wav、.mp3、.aac的将被转为音频;其余不支持)U音视频如果既没有设置autoplay也没有设置controls将自动设置controls,避免无法播放F修复了锚点无法跳转到li和a标签的问题 详细F修复了部分情况下svg标签style中的vertical-align无法生效的问题F修复了未闭合的标签如果是rich-text不支持的标签可能无法显示的问题 详细F修复了error事件中通过 setSrc 重设图片地址后无法预览的问题F修复了微信包个别情况下可能出现null is not an object错误的问题 详细F修复了百度包部分情况下预览时无法左右滑动查看所有图片的问题F修复了uni-app包编译到百度小程序安卓真机可能无法显示的问题 详细F修复了uni-app包编译到NVUE时通过v-if切换可能无法显示的问题 详细F修复了uni-app包编译到app时iframe无法全屏的问题
更多可见:更新日志