关于小程序:小程序富文本解析利器mphtml

微慕小程序是资讯、媒体类小程序,因为对富文本内容和媒体内容的显示有较高的需要。对于富文本解析,微慕小程序以前采纳的开源的wxParse组件,不过wxParse组件存在很多的问题且曾经进行保护反对,随着微慕小程序性能一直的减少和优化,wxParse组件曾经无奈适应,同时对wxParse二次开发优化的难度比拟大,基于此微慕团队思考寻找更适合的解析组件,通过敌人的举荐和咱们的考查,最终抉择开源组件:mp-html(https://jin-yufeng.gitee.io/m…,这个组件堪称小程序富文本解析利器。微慕团队对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
h2
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小程序,百度小程序,支付宝小程序,头条小程序

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据