慕小程序是資訊、媒體類小程序,因為對富文本內容和媒體內容的顯示有較高的需求。對于富文本解析，微慕小程序以前采用的開源的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內容和小程序內容在顯示上兼容性，頁面渲染的性能很強。

組件對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).

組件主要通過以下三種方式顯示表格

對于列表支持也非常友好，完全兼容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小程序，百度小程序，支付寶小程序，頭條小程序

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 是一個個切換器，根據視口寬度在 0px或 100% 之間切換。

動態 border Radius

一年前，發現了一個巧妙的CSS技巧。使用CSS max()函數，根據視口寬度，將卡片的border-radius 從 0px 切換到 8px。

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

來剖析一下上面的CSS:

• 我們有一個 max() 函數，在 0px 和 min()的計算值之間進行比較，并選擇較大的值。
• min() 函數在 8px 和 calc((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/