整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

小程序富文本解析利器mp-html

小程序富文本解析利器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


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小程序,百度小程序,支付宝小程序,头条小程序

、跳出新页面:

<basetarget=”_blank”>target="_self"不跳转

<form action="xxx.htm" target="_blank">form表单提交的跳转设置

2、点击按钮跳出别的页面添加

<a href="#" onclick="openZoosUrl();return false;">

onclick="return false"

3、display:block;块级元素,也就是说它可以设置一些宽高,独占一行,比如,div元素,p元素等display:inline-block,行级元素,也就说它可以使得同样设置成行级元素的元素一起在一行,然后可以设置宽高,这个适应于制作一个导航菜单,将每个菜单项设置成行级元素。它的宽和高默认是内容的宽和高,典型的元素是表单类的元素。dispaly:inline.行级元素,不可设置宽和高,默认宽高是内容的宽和高,典型的比如,span,

4、html鼠标小手:

cursor:pointer;

5、html背景图属性:

background-size:100%;,但是你的图片宽度,高度要设置成100% ,要注意的是.php的文件里面这个background-image:url();不好用,失效,你要使用网站的绝对路径background:url('/20151106/404/image/404.png') no-repeat 4px 5px;}background:url("11111.jpg");background-repeat:no-repeat;background-size:100%;width:100%;height:100%;

这个是给页面加背景的body{padding: 0px;margin: 0px;background-color:#494949;width:100%;height:100%;}.

还有在设置背景图片的时候可以使用背景background-image:url("");这个属性来设置背景,但是图片要用gif的格式

6、按输出方式来显示文本格式:<pre></pre>横线:<hr /><q></q>双引号标签下划线<ins></ins>

7、html---position/relative/absolute/fixed/三种布局定位方式的总结relative是按照自身来说,absolute是按照浏览器来说,但是要注意的是,如果他有父级元素的话,那么他就是依照父级元素来进行改变位置的。

8、无序列表去掉前面黑点li{list-style:none;}

9、隐藏元素 - display:none或visibility:hidden

display-这个元素,设置之后原本的元素不会占用当前的空间,不会影响布局,但是后者,隐藏之后还会占用空间

10、HTML隐藏多余

Div{overflow:hidden}

10、隐藏自适应:overflow:auto;

11、关于框架的问题

这个是接受你要显示页面

indx.php是框架显示的页面,最上面,也就是没按键显示

<iframe src="index.php" style="width:100%;height:100%;border:none " name="main"></iframe>

这个是你点击之后想在哪显示后面加:target=""

<a href='../admin/shopclass/add.php' target="main">添加分类</a>

12、关于背景的高的问题,也就是说你定义了一个div但是没有搞,是为了让你的图片在上面。那么就有这个属性了

overflow:hidden;

也就是你本身是属于父级元素的,但是你float就脱离了文本,变成浮动的,所有就不会在用父子元素的空间,所以就父级加上这个overflow:hidden;

13、锚点的设置

在你想跳转的页面的地方加上:<a name="miao">

然后在你想加链接的地方加上<a href="#miao">去找锚点</a>

14.点击换验证码图片

<img src="../public/common/yzm.php" alt="" style="cursor:pointer" onclick="this.src='../public/common/yzm.php?rand='+Math.random()">

15、圆角

border-radius:5px;

16、textarea的左侧文字在最左边

style="vertical-align:top"



17、html块状元素和内联元素的总结,块状元素可以设置margin,但是使用margin的时候要符合:1.块状元素,2.有宽高,其中内联元素不能设置margin和宽高的属性,只能设置padding

SS比较函数从2020年4月就开始支持了,我喜欢使用这些函数,但最喜欢的是 clamp(),它也是我最常用的一个。在这节课中,我们详细来看下这些比较函数。

Clamp(), Max(), 和 Min() 函数

clamp() 函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。

流体的尺寸和定位

在下面这个例子中,有一个手机样式,同时有两张图片放置在上面,如下所示:

当容器的宽度变小时,我们要缩小图片的尺寸,这样才不会变形。一般使用百分比单位来解决,如 width: 20%,但是这种方式没有给我们太多的控制。

我们希望能够有一个流体尺寸,要求有最小值和最大值,这就是 clamp 出场的地方。

.section-image {
  width: clamp(70px, 80px + 15%, 180px);
}

事例地址:https://codepen.io/shadeed/pen/qBYPdOq?editors=1100

装饰性元素

有时候,我们需要在页面边角加一些修饰元素,该修饰元素需要具有响应式,比如 PC 端是这样的(黑点部分):

然后在移动端是长这样的:

为了做到这,我们可以使用媒体查询:

.decorative--1 {
  left: 0;
}

.decorative--2 {
  right: 0;
}

@media (max-width: 600px) {
  .decorative--1 {
    left: -8rem;
  }

  .decorative--2 {
    right: -8rem;
  }

虽然这样做可以,但我们可以 clamp()函数,这样更简洁:

  .decorative--1 {
    left: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
  }

  .decorative--2 {
    right: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
  }

事例地址:https://codepen.io/shadeed/pen/LYmzVZW?editors=1100

流体高度

有时候,我们页面的主区的高度需要根据视口大小而变化。这种场景,我们倾向于通过媒体查询或使用视口单位来改变这种情况。

.hero {
  min-height: 250px;
}

@media (min-width: 800px) {
  .hero {
    min-height: 500px;
  }
}

我们也可以混合使用固定值和视口单位:

.hero {
  min-height: calc(350px + 20vh);
}

@media (min-width: 2000px) {
  .hero {
    min-height: 600px;
  }
}

但需要注意在较大的视口上高度不能太过高,所以我们需要设置一个最大高度,使用CSS clamp(),我们可以只用一个CSS声明来设置最小、首选和最大高度。

.hero {
  min-height: clamp(250px, 50vmax, 500px);
}

当调整屏幕大小时,我们会看到,高度会根据视口宽度逐渐改变。在上面的例子中,50vmax表示着视口最大尺寸的 50%

事例地址:https://codepen.io/shadeed/pen/LYmzVZW?editors=1100

Loading Bar

进度条一般是从左到右一个加载过程,在 CSS 中,我们可以定位在左边:

.loading-thumb {
  left: 0%;
}

为了将进度条定位到最右边,我们可以使用 left: 100%,但这会带来一个问题。进度条会跑到容器外:

.loading-thumb {
  left: 100%;
}

这是正常的情况,100% 是从进度条的末端开始的,而进度条本身也有自己的宽度,所以实际宽度会大于容器的宽度。

我们可以使用 calc() 来减去的进度条宽度,这样就可以了,但这并不是100%有效:

.loading-thumb {
  /* 40px represents the thumb width. */
  left: calc(100% - 40px);
}

我们来看下,如何利用CSS变量和比较函数来更好地实现:

.loading-thumb {
  --loading: 0%;
  --loading-thumb-width: 40px;
  position: absolute;
  top: 4px;
  left: clamp(
    0%,
    var(--loading),
    var(--loading) - var(--loading-thumb-width)
  );
  width: var(--loading-thumb-width);
  height: 16px;
}

上面的步骤如下:

  1. 首先,我们设定一个最小值为 0%
  2. 首选值是 --loading CSS变量的当前值
  3. 最大值代表当前的加载量减去进度条件的宽度

这里的CSS clamp()为我们提供了这个组件的三种不同的状态信息,这个方案很 nice:

不仅如此,我们还可以以相同的方式来处理不同UI

.loading-progress {
  width: clamp(10px, var(--loading), var(--loading) - 10px);
}

最小值等于圆圈宽度的一半,首选值是当前的加载百分比,最大值是当前百分比与圆圈一半的减去结果。


事例地址:https://codepen.io/shadeed/pen/rNvGVOa?editors=0100

动态分割器

考虑下图,我们在两个区域之间有一个行分隔符。

在移动端上,这个分隔符应该变成水平的,如下图:

我的解决方案是使用一个边框和flex。思路是,边框作为伪元素,以填补垂直和水平状态的可用空间:

.section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section:before {
  content: "";
  border: 1px solid #d3d3d3;
  align-self: stretch;
}

@media (min-width: 700px) {
  .section {
    align-items: center;
    flex-direction: row;
  }
}

我们也可以使用 clamp 而不需要媒体查询的解决方案:

.section {
  --breakpoint: 400px;
  display: flex;
  flex-wrap: wrap;
}

.section:before {
  content: "";
  border: 2px solid lightgrey;
  width: clamp(0px, (var(--breakpoint) - 100%) * 999, 100%);
}

来剖析一下上面的CSS:

  • 0px:最小值,用于垂直分隔符。它的值是 0,因为我们使用的是一个CSS边框
  • (var(--breakpoint) - 100%) * 999 是一个个切换器,根据视口宽度在 0px100% 之间切换。

动态 border Radius

一年前,发现了一个巧妙的CSS技巧。使用CSS max()函数,根据视口宽度,将卡片的border-radius0px 切换到 8px

.card {
  border-radius: max(
    0px,
    min(8px, calc((100vw - 4px - 100%) * 9999))
  );
}

来剖析一下上面的CSS:

  • 我们有一个 max() 函数,在 0pxmin()的计算值之间进行比较,并选择较大的值。
  • min() 函数在 8pxcalc((100vw - 4px - 100%) * 9999 的计算值之间进行比较,这会得到一个非常大的正数或负数。
  • 9999 是一个很大的数字,这样 min 的值都是 8px

间距

有时,我们可能需要根据视口宽度来改变一个组件或一个网格的间距。有了CS函数就不一样了,我们只需要设置一次。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: min(2vmax, 32px);
}

来源:https://isdeed.com/article/use-cases-css-comparison-functions/