整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
慕小程序是資訊、媒體類小程序,因?yàn)閷Ω晃谋緝?nèi)容和媒體內(nèi)容的顯示有較高的需求。對于富文本解析，微慕小程序以前采用的開源的wxParse組件，不過wxParse組件存在很多的問題且已經(jīng)停止維護(hù)支持，隨著微慕小程序功能不斷的增加和優(yōu)化，wxParse組件已經(jīng)無法適應(yīng)，同時(shí)對wxParse二次開發(fā)優(yōu)化的難度比較大，基于此微慕團(tuán)隊(duì)考慮尋找更合適的解析組件，經(jīng)過朋友的推薦和我們的考察，最終選擇開源組件：mp-html(https://jin-yufeng.gitee.io/mp-html)，這個(gè)組件堪稱小程序富文本解析利器。微慕團(tuán)隊(duì)對mp-html組件二次開發(fā)后可以與微慕小程序完美兼容，微慕小程序?qū)I(yè)版v3.8.0加入了該組件。mp-html組件給富文本的內(nèi)容提供了不少出色的功能。
小程序大多數(shù)都是基于html標(biāo)簽來渲染和顯示內(nèi)容的，mp-html組件支持以下列表標(biāo)簽和屬性，同時(shí)支持id、style、class、align、height、width 屬性。幾乎可以完美兼容html的標(biāo)簽內(nèi)容，并保持web內(nèi)容和小程序內(nèi)容在顯示上兼容性，頁面渲染的性能很強(qiáng)。
標(biāo)簽 | 屬性 |
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標(biāo)簽支持的穩(wěn)定性很好：
1.標(biāo)簽名中可以含有 : 等特殊字符（如 o:p）
2.標(biāo)簽名和屬性名大小寫不敏感
3.屬性值可以不加引號、加單引號、加雙引號，也可以卻缺省（默認(rèn) true）
4.屬性之間可以沒有空格（通過引號劃分）、有空格（可以多個(gè)）、有換行符
5.支持正常格式、CDATA 等多種形式的注釋
同時(shí)，對于一些錯(cuò)誤情況，程序也能夠自動(dòng)處理：
1.標(biāo)簽首尾不匹配
2.屬性值中冒號不匹配
3.標(biāo)簽未閉合
樣式（css）是富文本中最重要的內(nèi)容之一，組件提供多種樣式設(shè)置的方法，可以進(jìn)行靈活的自定義設(shè)置，讓小程序端的文本顯示更豐富。
1.行內(nèi)樣式
這是最常用的樣式設(shè)置方法，直接將需要的樣式放在對應(yīng)標(biāo)簽的 style 屬性中即可，這種方式僅作用于單個(gè)標(biāo)簽，優(yōu)先級最高
2.tag-style
這是本組件獨(dú)有的一種樣式設(shè)置方式，可以給某一種標(biāo)簽名設(shè)置默認(rèn)的樣式，可以通過 tag-style 屬性設(shè)置，具體用法見對應(yīng)說明
3.外部樣式
如果希望將某些樣式固定的用于渲染，可以添加到 tools/config.js 的 externStyle 字段中，該方法僅支持 class 選擇器（2.1.0 版本起支持標(biāo)簽名選擇器），優(yōu)先級最低。
需要調(diào)整優(yōu)先級時(shí)，可以通過設(shè)置 !important 實(shí)現(xiàn)。
另外，通過引入 style 插件，還可以實(shí)現(xiàn)匹配 style 標(biāo)簽中樣式的功能。
在富文本內(nèi)容里圖片顯示非常重要，mp-html在圖片顯示上充分考慮小程序的特點(diǎn)，主要提供一下功能：
1。占位圖
支持設(shè)置圖片未加載完成時(shí)的占位圖 loading-img 和加載出錯(cuò)時(shí)的占位圖 error-img
2.懶加載
內(nèi)容較長、圖片較多時(shí)，開啟懶加載有助于改善性能，需要時(shí)可通過 lazy-load 屬性開啟
3.自動(dòng)預(yù)覽
圖片被點(diǎn)擊時(shí)，將自動(dòng)放大預(yù)覽，如不需要，可通過 preview-img 屬性關(guān)閉。還可以在 imgtap 事件中進(jìn)行自定義處理
自動(dòng)預(yù)覽通過特定的處理，可以實(shí)現(xiàn)左右滑動(dòng)查看所有圖片、預(yù)覽重復(fù)鏈接不錯(cuò)位等效果
4.預(yù)覽高清圖
同一張圖片，可以給顯示時(shí)和預(yù)覽時(shí)設(shè)置不同的鏈接地址以達(dá)到最佳效果
設(shè)置方式 1：給 img 標(biāo)簽增加一個(gè) original-src 即可
設(shè)置方式 2：通過 imgList 的 api 進(jìn)行設(shè)置
5.長按彈出菜單
微信和百度平臺支持圖片長按時(shí)彈出菜單，可以進(jìn)行保存、分享等操作，如不需要，可通過 show-img-menu 屬性關(guān)閉
6.裝飾圖片處理
有時(shí)對于一些小的裝飾性圖片，可能不希望產(chǎn)生上述效果，此時(shí)可以給 img 標(biāo)簽設(shè)置 ignore 屬性，將屏蔽預(yù)覽、彈出菜單等操作，提升體驗(yàn)。
在鏈接內(nèi)的、src 為 data url 且沒有設(shè)置 original-src 的圖片，默認(rèn)為不可預(yù)覽的小圖片。
7.支持原大小顯示
本組件通過合理轉(zhuǎn)換，基本實(shí)現(xiàn)了和 html 中 img 的相同效果：沒有設(shè)置寬度時(shí)按原大小顯示；設(shè)置了寬度時(shí)按比例縮放；同時(shí)設(shè)置寬高時(shí)按設(shè)置的值顯示。不必去考慮小程序中的 mode 等問。。
8.支持 svg
雖然小程序中不支持 svg 系列標(biāo)簽，本組件通過在解析過程中轉(zhuǎn)為 data url 圖片的方式實(shí)現(xiàn)了 svg 的顯示。
小程序中沒有 table 標(biāo)簽，使得顯示表格一直是一個(gè)難題，mp-html解決了這個(gè)問題，并支持獨(dú)立橫向滾動(dòng)，支持含有合并單元格的表格，常用表格屬性(border, cellspacing, cellpadding, align).
組件主要通過以下三種方式顯示表格
顯示方式 | 適用情況 | 說明 |
rich-text 標(biāo)簽 | 表格內(nèi)部沒有鏈接、圖片等特殊標(biāo)簽 | 效果最佳，幾乎不需要進(jìn)行轉(zhuǎn)換 |
table 布局 | 表格內(nèi)有特殊標(biāo)簽但沒有使用合并單元格 | 需要進(jìn)行一定轉(zhuǎn)換，將 table, tr, td 等標(biāo)簽轉(zhuǎn)為對應(yīng)的布局 |
grid 布局 | 表格內(nèi)有特殊標(biāo)簽且使用了合并單元格 | 需要進(jìn)行復(fù)雜的轉(zhuǎn)換將合并單元格用 grid 布局表現(xiàn)出來 |
對于列表支持也非常友好，完全兼容html里的列表。
1.支持多層嵌套
支持嵌套多層列表，對于無序列表，不同的層級會(huì)顯示不同的黑點(diǎn)格式。
2.支持多種有序列表格式
通過設(shè)置 ol 標(biāo)簽的 type 屬性，可以顯示數(shù)字、字母、羅馬數(shù)字等多種形式的標(biāo)號。
3.支持不顯示標(biāo)號
支持通過設(shè)置 list-style:none 的方式不顯示 li 標(biāo)簽開頭的標(biāo)號。
對于音頻和視頻支持自動(dòng)暫停、多源加載、自動(dòng)添加控件。
1.自動(dòng)暫停
在存在多個(gè)視頻的情況下，同時(shí)播放可能會(huì)影響體驗(yàn)，本組件支持在播放一個(gè)視頻的時(shí)候自動(dòng)暫停其他所有視頻，如不需要，可通過 pause-video 屬性關(guān)閉
音頻在引入 audio 插件后也可以實(shí)現(xiàn)此效果
2.多源加載
不同平臺支持播放的格式不同，只設(shè)置一個(gè) src 可能會(huì)出現(xiàn)兼容性問題導(dǎo)致無法播放，因此本組件支持像 html 中一樣給 video 和 audio 設(shè)置多個(gè) source，將按照順序進(jìn)行加載，直到可以播放，最大程度上避免無法播放
3.自動(dòng)添加控件
對于既沒有設(shè)置 controls 也沒有設(shè)置 autoplay 的標(biāo)簽將自動(dòng)把 controls 屬性設(shè)置為 true，避免無法播放，影響體驗(yàn)。
支持小程序包括:微信小程序,qq小程序，百度小程序，支付寶小程序，頭條小程序
、跳出新頁面：
<basetarget=”_blank”>target="_self"不跳轉(zhuǎn)
<form action="xxx.htm" target="_blank">form表單提交的跳轉(zhuǎn)設(shè)置
2、點(diǎn)擊按鈕跳出別的頁面添加
<a href="#" onclick="openZoosUrl();return false;">
onclick="return false"
3、display:block;塊級元素，也就是說它可以設(shè)置一些寬高，獨(dú)占一行，比如，div元素，p元素等display:inline-block,行級元素，也就說它可以使得同樣設(shè)置成行級元素的元素一起在一行，然后可以設(shè)置寬高，這個(gè)適應(yīng)于制作一個(gè)導(dǎo)航菜單，將每個(gè)菜單項(xiàng)設(shè)置成行級元素。它的寬和高默認(rèn)是內(nèi)容的寬和高,典型的元素是表單類的元素。dispaly:inline.行級元素，不可設(shè)置寬和高，默認(rèn)寬高是內(nèi)容的寬和高，典型的比如，span,
4、html鼠標(biāo)小手：
cursor:pointer;
5、html背景圖屬性：
background-size:100%;，但是你的圖片寬度，高度要設(shè)置成100% ，要注意的是.php的文件里面這個(gè)background-image:url();不好用，失效，你要使用網(wǎng)站的絕對路徑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%;
這個(gè)是給頁面加背景的body{padding: 0px;margin: 0px;background-color:#494949;width:100%;height:100%;}.
還有在設(shè)置背景圖片的時(shí)候可以使用背景background-image:url("");這個(gè)屬性來設(shè)置背景，但是圖片要用gif的格式
6、按輸出方式來顯示文本格式:<pre></pre>橫線:<hr /><q></q>雙引號標(biāo)簽下劃線<ins></ins>
7、html---position/relative/absolute/fixed/三種布局定位方式的總結(jié)relative是按照自身來說，absolute是按照瀏覽器來說，但是要注意的是，如果他有父級元素的話，那么他就是依照父級元素來進(jìn)行改變位置的。
8、無序列表去掉前面黑點(diǎn)li{list-style:none;}
9、隱藏元素 - display:none或visibility:hidden
display-這個(gè)元素，設(shè)置之后原本的元素不會(huì)占用當(dāng)前的空間，不會(huì)影響布局，但是后者，隱藏之后還會(huì)占用空間
10、HTML隱藏多余
Div{overflow:hidden}
10、隱藏自適應(yīng)：overflow:auto;
11、關(guān)于框架的問題
這個(gè)是接受你要顯示頁面
indx.php是框架顯示的頁面，最上面，也就是沒按鍵顯示
<iframe src="index.php" style="width:100%;height:100%;border:none " name="main"></iframe>
這個(gè)是你點(diǎn)擊之后想在哪顯示后面加：target=""
<a href='../admin/shopclass/add.php' target="main">添加分類</a>
12、關(guān)于背景的高的問題，也就是說你定義了一個(gè)div但是沒有搞，是為了讓你的圖片在上面。那么就有這個(gè)屬性了
overflow:hidden;
也就是你本身是屬于父級元素的，但是你float就脫離了文本，變成浮動(dòng)的，所有就不會(huì)在用父子元素的空間，所以就父級加上這個(gè)overflow:hidden;
13、錨點(diǎn)的設(shè)置
在你想跳轉(zhuǎn)的頁面的地方加上：<a name="miao">
然后在你想加鏈接的地方加上<a href="#miao">去找錨點(diǎn)</a>
14.點(diǎn)擊換驗(yàn)證碼圖片
<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的左側(cè)文字在最左邊
style="vertical-align:top"
17、html塊狀元素和內(nèi)聯(lián)元素的總結(jié)，塊狀元素可以設(shè)置margin，但是使用margin的時(shí)候要符合：1.塊狀元素，2.有寬高，其中內(nèi)聯(lián)元素不能設(shè)置margin和寬高的屬性，只能設(shè)置padding
SS比較函數(shù)從2020年4月就開始支持了，我喜歡使用這些函數(shù)，但最喜歡的是 clamp()，它也是我最常用的一個(gè)。在這節(jié)課中，我們詳細(xì)來看下這些比較函數(shù)。
clamp() 函數(shù)的作用是把一個(gè)值限制在一個(gè)上限和下限之間，當(dāng)這個(gè)值超過最小值和最大值的范圍時(shí)，在最小值和最大值之間選擇一個(gè)值使用。它接收三個(gè)參數(shù)：最小值、首選值、最大值。
在下面這個(gè)例子中，有一個(gè)手機(jī)樣式，同時(shí)有兩張圖片放置在上面，如下所示:
當(dāng)容器的寬度變小時(shí)，我們要縮小圖片的尺寸，這樣才不會(huì)變形。一般使用百分比單位來解決，如 width: 20%，但是這種方式?jīng)]有給我們太多的控制。
我們希望能夠有一個(gè)流體尺寸，要求有最小值和最大值，這就是 clamp 出場的地方。
.section-image {
width: clamp(70px, 80px + 15%, 180px);
}
事例地址：https://codepen.io/shadeed/pen/qBYPdOq?editors=1100
有時(shí)候，我們需要在頁面邊角加一些修飾元素，該修飾元素需要具有響應(yīng)式，比如 PC 端是這樣的（黑點(diǎn)部分）：
然后在移動(dòng)端是長這樣的：
為了做到這，我們可以使用媒體查詢：
.decorative--1 {
left: 0;
}
.decorative--2 {
right: 0;
}
@media (max-width: 600px) {
.decorative--1 {
left: -8rem;
}
.decorative--2 {
right: -8rem;
}
雖然這樣做可以，但我們可以 clamp()函數(shù)，這樣更簡潔：
.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
有時(shí)候，我們頁面的主區(qū)的高度需要根據(jù)視口大小而變化。這種場景，我們傾向于通過媒體查詢或使用視口單位來改變這種情況。
.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;
}
}
但需要注意在較大的視口上高度不能太過高，所以我們需要設(shè)置一個(gè)最大高度,使用CSS clamp()，我們可以只用一個(gè)CSS聲明來設(shè)置最小、首選和最大高度。
.hero {
min-height: clamp(250px, 50vmax, 500px);
}
當(dāng)調(diào)整屏幕大小時(shí)，我們會(huì)看到，高度會(huì)根據(jù)視口寬度逐漸改變。在上面的例子中，50vmax表示著視口最大尺寸的 50%。
事例地址：https://codepen.io/shadeed/pen/LYmzVZW?editors=1100
進(jìn)度條一般是從左到右一個(gè)加載過程，在 CSS 中，我們可以定位在左邊：
.loading-thumb {
left: 0%;
}
為了將進(jìn)度條定位到最右邊，我們可以使用 left: 100%，但這會(huì)帶來一個(gè)問題。進(jìn)度條會(huì)跑到容器外：
.loading-thumb {
left: 100%;
}
這是正常的情況，100% 是從進(jìn)度條的末端開始的，而進(jìn)度條本身也有自己的寬度，所以實(shí)際寬度會(huì)大于容器的寬度。
我們可以使用 calc() 來減去的進(jìn)度條寬度，這樣就可以了，但這并不是100%有效：
.loading-thumb {
/* 40px represents the thumb width. */
left: calc(100% - 40px);
}
我們來看下，如何利用CSS變量和比較函數(shù)來更好地實(shí)現(xiàn)：
.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()為我們提供了這個(gè)組件的三種不同的狀態(tài)信息，這個(gè)方案很 nice:
不僅如此，我們還可以以相同的方式來處理不同UI
.loading-progress {
width: clamp(10px, var(--loading), var(--loading) - 10px);
}
最小值等于圓圈寬度的一半，首選值是當(dāng)前的加載百分比，最大值是當(dāng)前百分比與圓圈一半的減去結(jié)果。
事例地址：https://codepen.io/shadeed/pen/rNvGVOa?editors=0100
考慮下圖，我們在兩個(gè)區(qū)域之間有一個(gè)行分隔符。
在移動(dòng)端上，這個(gè)分隔符應(yīng)該變成水平的，如下圖：
我的解決方案是使用一個(gè)邊框和flex。思路是，邊框作為偽元素，以填補(bǔ)垂直和水平狀態(tài)的可用空間：
.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:
一年前，發(fā)現(xiàn)了一個(gè)巧妙的CSS技巧。使用CSS max()函數(shù)，根據(jù)視口寬度，將卡片的border-radius 從 0px 切換到 8px。
.card {
border-radius: max(
0px,
min(8px, calc((100vw - 4px - 100%) * 9999))
);
}
來剖析一下上面的CSS:
有時(shí)，我們可能需要根據(jù)視口寬度來改變一個(gè)組件或一個(gè)網(wǎng)格的間距。有了CS函數(shù)就不一樣了,我們只需要設(shè)置一次。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: min(2vmax, 32px);
}
來源：https://isdeed.com/article/use-cases-css-comparison-functions/
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
