慕小程序是资讯、媒体类小程序,因为对富文本内容和媒体内容的显示有较高的需求。对于富文本解析,微慕小程序以前采用的开源的wxParse组件,不过wxParse组件存在很多的问题且已经停止维护支持,随着微慕小程序功能不断的增加和优化,wxParse组件已经无法适应,同时对wxParse二次开发优化的难度比较大,基于此微慕团队考虑寻找更合适的解析组件,经过朋友的推荐和我们的考察,最终选择开源组件:mp-html(https://jin-yufeng.gitee.io/mp-html),这个组件堪称小程序富文本解析利器。微慕团队对mp-html组件二次开发后可以与微慕小程序完美兼容,微慕小程序专业版v3.8.0加入了该组件。mp-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() 函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。
在下面这个例子中,有一个手机样式,同时有两张图片放置在上面,如下所示:
当容器的宽度变小时,我们要缩小图片的尺寸,这样才不会变形。一般使用百分比单位来解决,如 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
进度条一般是从左到右一个加载过程,在 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;
}
上面的步骤如下:
这里的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:
一年前,发现了一个巧妙的CSS技巧。使用CSS max()函数,根据视口宽度,将卡片的border-radius 从 0px 切换到 8px。
.card {
border-radius: max(
0px,
min(8px, calc((100vw - 4px - 100%) * 9999))
);
}
来剖析一下上面的CSS:
有时,我们可能需要根据视口宽度来改变一个组件或一个网格的间距。有了CS函数就不一样了,我们只需要设置一次。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: min(2vmax, 32px);
}
来源:https://isdeed.com/article/use-cases-css-comparison-functions/
*请认真填写需求信息,我们会在24小时内与您取得联系。