小程序富文本解析利器mp-html
微慕小程序是资讯、媒体类小程序,因为对富文本内容和媒体内容的显示有较高的需求。对于富文本解析,微慕小程序以前采用的开源的wxParse组件,不过wxParse组件存在很多的问题且已经停止维护支持,随着微慕小程序功能不断的增加和优化,wxParse组件已经无法适应,同时对wxParse二次开发优化的难度比较大,基于此微慕团队考虑寻找更合适的解析组件,经过朋友的推荐和我们的考察,最终选择开源组件:mp-html(https://jin-yufeng.gitee.io/mp-html),这个组件堪称小程序富文本解析利器。微慕团队对mp-html组件二次开发后可以与微慕小程序完美兼容,微慕小程序专业版v3.8.0加入了该组件。mp-html组件给富文本的内容提供了不少出色的功能。
全面支持html标签
小程序大多数都是基于html标签来渲染和显示内容的,mp-html组件支持以下列表标签和属性,同时支持id、style、class、align、height、width 属性。几乎可以完美兼容html的标签内容,并保持web内容和小程序内容在显示上兼容性,页面渲染的性能很强。
标签 | 属性 |
---|---|
a | href |
abbr | |
address | |
article | |
aside | |
audio | author, controls, loop, name, poster, src |
b | |
base | href |
big | |
blockquote | |
body | |
br | |
caption | |
center | |
cite | |
code | |
col | span |
colgroup | span |
dd | |
del | |
div | |
dl | |
dt | |
em | |
embed | autostart, loop, src, type |
fieldset | |
font | color, face, size |
footer | |
h1 | |
h2 | |
h3 | |
h4 | |
h5 | |
h6 | |
head | |
header | |
hr | |
html | |
i | |
img | ignore, original-src, src |
ins | |
label | |
legend | |
li | |
mark | |
nav | |
ol | start, type |
p | |
pre | |
q | |
rt | |
ruby | |
s | |
section | |
small | |
source | src |
span | |
strike | |
strong | |
style | |
sub | |
sup | |
table | border, cellpadding, cellspacing |
tbody | |
td | colspan, rowspan |
tfoot | |
th | colspan, rowspan |
thead | |
tr | |
tt | |
u | |
ul | |
video | autoplay, controls, loop, muted, poster, src |
组件对html标签支持的稳定性很好:
1.标签名中可以含有 : 等特殊字符(如 o:p)
2.标签名和属性名大小写不敏感
3.属性值可以不加引号、加单引号、加双引号,也可以却缺省(默认 true)
4.属性之间可以没有空格(通过引号划分)、有空格(可以多个)、有换行符
5.支持正常格式、CDATA 等多种形式的注释
同时,对于一些错误情况,程序也能够自动处理:
1.标签首尾不匹配
2.属性值中冒号不匹配
3.标签未闭合
自定义样式配置
样式(css)是富文本中最重要的内容之一,组件提供多种样式设置的方法,可以进行灵活的自定义设置,让小程序端的文本显示更丰富。
1.行内样式
这是最常用的样式设置方法,直接将需要的样式放在对应标签的 style 属性中即可,这种方式仅作用于单个标签,优先级最高
2.tag-style
这是本组件独有的一种样式设置方式,可以给某一种标签名设置默认的样式,可以通过 tag-style 属性设置,具体用法见对应说明
3.外部样式
如果希望将某些样式固定的用于渲染,可以添加到 tools/config.js 的 externStyle 字段中,该方法仅支持 class 选择器(2.1.0 版本起支持标签名选择器),优先级最低。
需要调整优先级时,可以通过设置 !important 实现。
另外,通过引入 style 插件,还可以实现匹配 style 标签中样式的功能。
图片加载
在富文本内容里图片显示非常重要,mp-html在图片显示上充分考虑小程序的特点,主要提供一下功能:
1。占位图
支持设置图片未加载完成时的占位图 loading-img 和加载出错时的占位图 error-img
2.懒加载
内容较长、图片较多时,开启懒加载有助于改善性能,需要时可通过 lazy-load 属性开启
3.自动预览
图片被点击时,将自动放大预览,如不需要,可通过 preview-img 属性关闭。还可以在 imgtap 事件中进行自定义处理
自动预览通过特定的处理,可以实现左右滑动查看所有图片、预览重复链接不错位等效果
4.预览高清图
同一张图片,可以给显示时和预览时设置不同的链接地址以达到最佳效果
设置方式 1:给 img 标签增加一个 original-src 即可
设置方式 2:通过 imgList 的 api 进行设置
5.长按弹出菜单
微信和百度平台支持图片长按时弹出菜单,可以进行保存、分享等操作,如不需要,可通过 show-img-menu 属性关闭
6.装饰图片处理
有时对于一些小的装饰性图片,可能不希望产生上述效果,此时可以给 img 标签设置 ignore 属性,将屏蔽预览、弹出菜单等操作,提升体验。
在链接内的、src 为 data url 且没有设置 original-src 的图片,默认为不可预览的小图片。
7.支持原大小显示
本组件通过合理转换,基本实现了和 html 中 img 的相同效果:没有设置宽度时按原大小显示;设置了宽度时按比例缩放;同时设置宽高时按设置的值显示。不必去考虑小程序中的 mode 等问。。
8.支持 svg
虽然小程序中不支持 svg 系列标签,本组件通过在解析过程中转为 data url 图片的方式实现了 svg 的显示。
表格和列表
小程序中没有 table 标签,使得显示表格一直是一个难题,mp-html解决了这个问题,并支持独立横向滚动,支持含有合并单元格的表格,常用表格属性(border, cellspacing, cellpadding, align).
组件主要通过以下三种方式显示表格
显示方式 | 适用情况 | 说明 |
---|---|---|
rich-text 标签 | 表格内部没有链接、图片等特殊标签 | 效果最佳,几乎不需要进行转换 |
table 布局 | 表格内有特殊标签但没有使用合并单元格 | 需要进行一定转换,将 table, tr, td 等标签转为对应的布局 |
grid 布局 | 表格内有特殊标签且使用了合并单元格 | 需要进行复杂的转换将合并单元格用 grid 布局表现出来 |
对于列表支持也非常友好,完全兼容html里的列表。
1.支持多层嵌套
支持嵌套多层列表,对于无序列表,不同的层级会显示不同的黑点格式。
2.支持多种有序列表格式
通过设置 ol 标签的 type 属性,可以显示数字、字母、罗马数字等多种形式的标号。
3.支持不显示标号
支持通过设置 list-style:none 的方式不显示 li 标签开头的标号。
支持音频和视频
对于音频和视频支持自动暂停、多源加载、自动添加控件。
1.自动暂停
在存在多个视频的情况下,同时播放可能会影响体验,本组件支持在播放一个视频的时候自动暂停其他所有视频,如不需要,可通过 pause-video 属性关闭
音频在引入 audio 插件后也可以实现此效果
2.多源加载
不同平台支持播放的格式不同,只设置一个 src 可能会出现兼容性问题导致无法播放,因此本组件支持像 html 中一样给 video 和 audio 设置多个 source,将按照顺序进行加载,直到可以播放,最大程度上避免无法播放
3.自动添加控件
对于既没有设置 controls 也没有设置 autoplay 的标签将自动把 controls 属性设置为 true,避免无法播放,影响体验。
支持多个平台的小程序
支持小程序包括:微信小程序,qq小程序,百度小程序,支付宝小程序,头条小程序
小程序富文本解析利器mp-html相关推荐
- 微信小程序富文本解析
微信小程序富文本解析 *人狠话不多,直接代码搞起* html代码(后台返回的html代码) <p>这是一段文字</p><p><strong>这是加粗的字 ...
- 微信小程序富文本解析点击图片放大_微信小程序解析富文本过程详解
前言 最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法 ...
- 小程序富文本解析wxParse 安卓手机部分不支持的一种情形
背景: 建议,对富文本的解析,还是使用官方提供的 <rich-text> 比较好,可参考文章:微信小程序 rich-text 富文本的解析显示 在小程序开发过程中,必然会涉及到富文本的解析 ...
- taro 缺点_Taro小程序富文本解析4种方法
最近遇到一个富文本解析的问题,尝试了很多办法,终于成功了!最后本人选择Parser. 1.Taro组件rich-text 优点:使用极其方便,引用一下就行了. 缺点:不支持视频,放弃! 2.wxPar ...
- 微信小程序富文本解析 rich-text 、wxParse、mp-html
rich-text 微信自带标签 很多局限性 还有后台的富文本 font 标签 size 不生效.字体大小无法设置 wxParse 微信很早的那期 副本插件 封装.拥有7.7k stars已停止维护了 ...
- [转]wxParse-微信小程序富文本解析组件
本文转自:https://github.com/icindy/wxParse 基本使用方法 Copy文件夹wxParse - wxParse/-wxParse.js(必须存在)-html2json.j ...
- layui获取select 文本_小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下 在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
- 微信小程序富文本编辑器获取内容
1.新建wxParse文件夹 里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
- 微信小程序 富文本组件使用
能够使用微信小程序提供的富文本组件及引入的第三方富文本组件 掌握使用微信小程序的表单组件 掌握使用微信小程序的form表单及如何提交数据 掌握使用微信小程序的导航及跳转组件 一.基础内容组件 1.1 ...
最新文章
- hdu 3006(状态压缩)
- 3COM小型办公室有线局域网方案
- xy坐标正负方向_道路施工图纸上x坐标和y坐标分别代表什么方向,哪个代表南北方向,哪个代表东西方向?...
- JSP、EL和JSTL-学习笔记02【MVC】
- redis源码剖析(十一)—— Redis字符串相关函数实现
- SpringCloud企业实战专栏
- sqlserver 微信 读取_Sql Server使用链接服务器远程取数据_sqlserver
- linux系统月初月末,Linux last显示系统开机以来获是从每月初登入者的讯息命令详解...
- 东莞村财登录显示服务器断开,“东莞村财”APP运行一年多,还有很多村民股东未注册...
- 【刷水】之USACO2008资格赛(Bzoj1599-1603)
- ora03135连接失去联系 进程id 0_Daemon 进程的创建
- SQLAlchemy的使用---M2M增删改查
- Ubuntu 16.04安装Caffe的记录及FCN官方代码的配置
- 年底购物狂欢,移动支付安全不容忽视
- python安装osgeo库_python第三方库安装
- Microsoft 环回适配器安装
- linux下github上传文件,linux下将本地文件上传到github中?
- 对比了论坛,博客和微博
- 数模混合监控,视频如何联动报警、消防、门禁?
- 区块链技术在物联网中应用的思路探讨