前言

「本文假定讀者已經(jīng)有初級(jí)的前端開發(fā)知識(shí)，包括HTML、CSS。」

百度在一年前推出了稱為 MIP(Mobile Instant Pages)的前端開發(fā)組件，主要目的是加速移動(dòng)端網(wǎng)頁(yè)的顯示。MIP技術(shù)來源于谷歌推出的AMP技術(shù)，但由于眾所周知的原因，百度決定自行開發(fā)一套和AMP類似的技術(shù)，宣稱和AMP規(guī)范完全一致。

MIP由MIP-HTML、MIP-JS、MIP-Cache組成。用人話說，

MIP-HTML 是MIP對(duì)HTML的規(guī)范，包括禁用以防止頁(yè)面repaint、a標(biāo)簽強(qiáng)制要求href屬性等，具體 https://www.mipengine.org/doc... ；

MIP-JS 要求所有JS代碼需要以「MIP組件」的形式引入到頁(yè)面中，禁止直接寫JS。并且，在MIP所有的JS代碼都是異步加載的，再加上禁用各種CSS的hack、靜態(tài)資源固定大小等規(guī)范來減少頁(yè)面重繪，以此提高JS的運(yùn)行速度；

MIP-Cache，簡(jiǎn)單說就是百度免費(fèi)提供的CDN，所有MIP頁(yè)的代碼都放在百度的CDN上，而且對(duì)于網(wǎng)頁(yè)中的靜態(tài)資源，比如圖片，都可以放在百度的CDN上，但由于百度對(duì)使用MIP-Cache技術(shù)的靜態(tài)資源的收錄時(shí)間不確定，所以我建議只對(duì)長(zhǎng)期不變的靜態(tài)資源用緩存。

概覽

應(yīng)用MIP技術(shù)，按照百度的建議是直接開發(fā)一套MIP頁(yè)面，而不建議「改造」現(xiàn)有移動(dòng)端H5頁(yè)。

然而改造一下現(xiàn)有的頁(yè)面，成本顯然低得多。將一個(gè)頁(yè)面「MIP化」大概分為2步：

對(duì)于HTML代碼，按照MIP-HTML的規(guī)范進(jìn)行修改，去除或替換禁用的標(biāo)簽；

對(duì)于JS代碼，由于大部分JS是一些顯示邏輯(比如圖片輪播)，不涉及具體的業(yè)務(wù)，所以，開發(fā)者要在MIP組件列表(https://www.mipengine.org/doc... )中尋找合適的MIP組件直接替換掉頁(yè)面中原有的JS代碼；

注：如果頁(yè)面中的JS涉及必要的業(yè)務(wù)邏輯，則必須自行開發(fā) MIP自定義組件，并提交百度審核，通過后才能用。

愿意的話，還可以按照MIP-Cache的格式要求來緩存靜態(tài)資源。

以目前MIP技術(shù)的發(fā)展來看，MIP只適合于改造單個(gè)頁(yè)面，還無法應(yīng)用于整個(gè)站點(diǎn)，因?yàn)楣俜組IP組件都比較簡(jiǎn)單，只適用于類似新聞、論壇帖子頁(yè)之類的結(jié)構(gòu)簡(jiǎn)單、特效簡(jiǎn)單的網(wǎng)頁(yè)，對(duì)于存在復(fù)雜的交互邏輯，或是基于React之類框架的SPA頁(yè)面，不適合應(yīng)用MIP技術(shù)，如果一定要用MIP的話，那需要去掉這些復(fù)雜的邏輯，只保留簡(jiǎn)單的展示，相當(dāng)于重新開發(fā)一個(gè)頁(yè)面了。

不過呢，百度已經(jīng)在開發(fā)MIP 2.0了，MIP 2.0的亮點(diǎn)即「整站MIP化」，包括提供更多強(qiáng)大的MIP組件、更容易編寫JS代碼、默認(rèn)用Vue開發(fā)自定義組件以及更快的運(yùn)行速度等。

MIP頁(yè)面開發(fā)入門

先來看看如何開發(fā)一個(gè)MIP頁(yè)面。

開發(fā)MIP頁(yè)，最重要的就是如何使用MIP組件。

為了方便開發(fā)，首先，請(qǐng)按照 MIP-CLI 的文檔安裝好(https://github.com/mipengine/... )，進(jìn)入工作區(qū)文件夾，并新增一個(gè)頁(yè)面，命令是

mip add XXX.html

使用如下命令可以驗(yàn)證頁(yè)面是否符合MIP的要求：

mip validate XXX.html

如果需要運(yùn)行這個(gè)頁(yè)面，那么可以用這個(gè)命令

mip server

按 Ctrl+C 可以退出。提示一下，在瀏覽器中調(diào)試MIP頁(yè)時(shí)，可以用開發(fā)者工具修改頁(yè)面分辨率，換成手機(jī)的分辨率。

使用 MIP-CLI 新建的頁(yè)面是這樣的：

/* 自定義樣式 */

其中、 是必須添加的標(biāo)簽，前者用于告知Spider當(dāng)前是個(gè)MIP頁(yè)；后者告知百度當(dāng)前MIP頁(yè)對(duì)應(yīng)的移動(dòng)端H5頁(yè)的地址(對(duì)應(yīng)的，在H5頁(yè)上需要 指明對(duì)應(yīng)的MIP頁(yè)地址)，當(dāng)然，如果沒有對(duì)應(yīng)的H5頁(yè)，那么可以指向PC頁(yè)或自己。

引入的一個(gè)CSS文件和JS文件是MIP技術(shù)的基本庫(kù)文件，里面包含了MIP的核心代碼和幾個(gè)內(nèi)置組件。

基本規(guī)范

對(duì)于所有標(biāo)簽，替換為，注意不是自閉合標(biāo)簽，需要添加關(guān)閉標(biāo)簽。

layout="responsive"

width="350"

height="263"

src="https://www.mipengine.org/static/img/sample_01.jpg">

這是一個(gè)最簡(jiǎn)單的MIP組件，看上去和普通的HTML標(biāo)簽一樣，非常簡(jiǎn)單，但有幾點(diǎn)需要注意：

1)MIP的組件大多支持多種布局，這里使用的是「responsive」，即響應(yīng)式布局，適合視頻、圖片等固定比例但真實(shí)大小不確定的資源；

2)「responsive」布局需要提供 width 和 height，但不需要提供單位，因?yàn)檫@里的寬和高僅用于確定比例，MIP會(huì)自動(dòng)給定真實(shí)大小。

還有 a標(biāo)簽強(qiáng)制要求href屬性等其他要求，具體看 MIP-HTML 規(guī)范，https://www.mipengine.org/doc...。

組件布局

MIP組件支持以下幾種布局(https://www.mipengine.org/doc... )，具體要看各個(gè)組件的文檔。可以通過修改MIP組件標(biāo)簽中的layout屬性修改布局方式。

這里需要注意的是，大多數(shù)組件都有默認(rèn)的布局方式。

添加樣式

MIP沒有對(duì)CSS做特別的限制(但是會(huì)自動(dòng)去掉一些性能極差的選擇器)，也允許使用外鏈的方式引入CSS文件(雖然并不建議這么做，因?yàn)檫@樣引入的CSS文件通常非常大)。對(duì)于內(nèi)聯(lián)的CSS，需要使用 包裹。

試用更復(fù)雜的組件

MIP組件的使用方法類似于Bootstrap的JS組件的使用方法，找到文檔，復(fù)制，粘貼，done……所以這里只提一個(gè)要點(diǎn)：MIP官方提供的組件分為內(nèi)置組件、個(gè)性化組件和廣告組件，其中內(nèi)置組件只需要一開始自動(dòng)引入的 mip.js 就能運(yùn)行，而其他類型的組件均需要引入特定的腳本才能用。

因?yàn)榉浅：?jiǎn)單，所以這里我就以一個(gè)很簡(jiǎn)單的個(gè)性化組件——mip-gototop為例，展示一下MIP組件的使用方法。

復(fù)制粘貼 gototop 組件的示例代碼；

在 mip.js 后添加 gototop 組件需要的JS文件。

隨便寫一些代碼把整個(gè)頁(yè)面撐的長(zhǎng)一些，以便看出回頂部組件的效果。

最后看起來是這樣的：

接著可以使用上文中提到的 MIP-CLI 工具，mip server 命令運(yùn)行MIP服務(wù)器，從這個(gè)本地的服務(wù)器訪問剛寫完的MIP頁(yè)，就可以看到效果了。

以上就是絕大多數(shù)MIP組件的使用方法。

已有H5頁(yè)改造成MIP頁(yè)

使用百度的官方MIP開發(fā)一個(gè)MIP并不難，那現(xiàn)有頁(yè)面改造成MIP頁(yè)就更簡(jiǎn)單了，就三步：

使用 MIP-CLI 驗(yàn)證現(xiàn)有頁(yè)面(mip validate XXX.html)，找出所有錯(cuò)誤；

修復(fù)代碼規(guī)范類的錯(cuò)誤，比如a標(biāo)簽缺了href屬性、存在標(biāo)簽等；

把用JS實(shí)現(xiàn)的特效換成MIP組件，主要包括回到頂部、圖片輪播、廣告等。

我在網(wǎng)上找到了這一套用AmazeUI寫的H5頁(yè)，簡(jiǎn)單說一下改造的過程。侵刪。

先使用驗(yàn)證工具驗(yàn)證這個(gè)頁(yè)面，提示有這些錯(cuò)誤：

可以發(fā)現(xiàn)大多數(shù)錯(cuò)誤都可以很快解決。

然后可以發(fā)現(xiàn)，頁(yè)面中有三塊JS實(shí)現(xiàn)的效果需要替換為MIP組件。分別是：

頂部的輪播圖片效果，需要替換為 mip-carousel；

回到頂部按鈕，需要替換為 mip-gototop；

超鏈接，mip頁(yè)之間跳轉(zhuǎn)需要用

至此也就完成了這個(gè)頁(yè)面的MIP化改造。

總結(jié)

本文簡(jiǎn)單介紹了MIP技術(shù)、MIP頁(yè)的開發(fā)過程、現(xiàn)有H5的MIP化改造等基本問題，后續(xù)的文章將更深入的討論MIP技術(shù)，包括MIP自定義組件的開發(fā)、MIP 2.0等話題。

總結(jié)

以上是生活随笔為你收集整理的mip-html自动跳转页面,百度MIP技术快速入门（上）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。