資訊專欄INFORMATION COLUMN
摘要：百度在一年前推出了稱為的前端開發組件，主要目的是加速移動端網頁的顯示。不過呢，百度已經在開發了，的亮點即整站化，包括提供更多強大的組件更容易編寫代碼默認用開發自定義組件以及更快的運行速度等。
前言
「本文假定讀者已經有初級的前端開發知識，包括HTML、CSS。」
百度在一年前推出了稱為 MIP（Mobile Instant Pages）的前端開發組件，主要目的是加速移動端網頁的顯示。MIP技術來源于谷歌推出的AMP技術，但由于眾所周知的原因，百度決定自行開發一套和AMP類似的技術，宣稱和AMP規范完全一致。
MIP由MIP-HTML、MIP-JS、MIP-Cache組成。用人話說，
MIP-HTML 是MIP對HTML的規范，包括禁用以防止頁面repaint、a標簽強制要求href屬性等，具體 https://www.mipengine.org/doc... ；
MIP-JS 要求所有JS代碼需要以「MIP組件」的形式引入到頁面中，禁止直接寫JS。并且，在MIP所有的JS代碼都是異步加載的，再加上禁用各種CSS的hack、靜態資源固定大小等規范來減少頁面重繪，以此提高JS的運行速度；
MIP-Cache，簡單說就是百度免費提供的CDN，所有MIP頁的代碼都放在百度的CDN上，而且對于網頁中的靜態資源，比如圖片，都可以放在百度的CDN上，但由于百度對使用MIP-Cache技術的靜態資源的收錄時間不確定，所以我建議只對長期不變的靜態資源用緩存。
概覽應用MIP技術，按照百度的建議是直接開發一套MIP頁面，而不建議「改造」現有移動端H5頁。
然而改造一下現有的頁面，成本顯然低得多。將一個頁面「MIP化」大概分為2步：
對于HTML代碼，按照MIP-HTML的規范進行修改，去除或替換禁用的標簽；
對于JS代碼，由于大部分JS是一些顯示邏輯（比如圖片輪播），不涉及具體的業務，所以，開發者要在MIP組件列表（https://www.mipengine.org/doc... ）中尋找合適的MIP組件直接替換掉頁面中原有的JS代碼；
注：如果頁面中的JS涉及必要的業務邏輯，則必須自行開發 MIP自定義組件，并提交百度審核，通過后才能用。
愿意的話，還可以按照MIP-Cache的格式要求來緩存靜態資源。
以目前MIP技術的發展來看，MIP只適合于改造單個頁面，還無法應用于整個站點，因為官方MIP組件都比較簡單，只適用于類似新聞、論壇帖子頁之類的結構簡單、特效簡單的網頁，對于存在復雜的交互邏輯，或是基于React之類框架的SPA頁面，不適合應用MIP技術，如果一定要用MIP的話，那需要去掉這些復雜的邏輯，只保留簡單的展示，相當于重新開發一個頁面了。
不過呢，百度已經在開發MIP 2.0了，MIP 2.0的亮點即「整站MIP化」，包括提供更多強大的MIP組件、更容易編寫JS代碼、默認用Vue開發自定義組件以及更快的運行速度等。
MIP頁面開發入門先來看看如何開發一個MIP頁面。
開發MIP頁，最重要的就是如何使用MIP組件。
為了方便開發，首先，請按照 MIP-CLI 的文檔安裝好（https://github.com/mipengine/... ），進入工作區文件夾，并新增一個頁面，命令是
mip add XXX.html
使用如下命令可以驗證頁面是否符合MIP的要求：
mip validate XXX.html
如果需要運行這個頁面，那么可以用這個命令
mip server
按 Ctrl+C 可以退出。提示一下，在瀏覽器中調試MIP頁時，可以用開發者工具修改頁面分辨率，換成手機的分辨率。
使用 MIP-CLI 新建的頁面是這樣的：
<!-- 標題 -->
其中、 是必須添加的標簽，前者用于告知Spider當前是個MIP頁；后者告知百度當前MIP頁對應的移動端H5頁的地址（對應的，在H5頁上需要 指明對應的MIP頁地址），當然，如果沒有對應的H5頁，那么可以指向PC頁或自己。
引入的一個CSS文件和JS文件是MIP技術的基本庫文件，里面包含了MIP的核心代碼和幾個內置組件。
基本規范對于所有標簽，替換為
https://www.mipengine.org/exa...
這是一個最簡單的MIP組件，看上去和普通的HTML標簽一樣，非常簡單，但有幾點需要注意：
1）MIP的組件大多支持多種布局，這里使用的是「responsive」，即響應式布局，適合視頻、圖片等固定比例但真實大小不確定的資源；
2）「responsive」布局需要提供 width 和 height，但不需要提供單位，因為這里的寬和高僅用于確定比例，MIP會自動給定真實大小。
還有 a標簽強制要求href屬性等其他要求，具體看 MIP-HTML 規范，https://www.mipengine.org/doc...。
組件布局MIP組件支持以下幾種布局（https://www.mipengine.org/doc... ），具體要看各個組件的文檔。可以通過修改MIP組件標簽中的layout屬性修改布局方式。
這里需要注意的是，大多數組件都有默認的布局方式。
添加樣式MIP沒有對CSS做特別的限制（但是會自動去掉一些性能極差的選擇器），也允許使用外鏈的方式引入CSS文件（雖然并不建議這么做，因為這樣引入的CSS文件通常非常大）。對于內聯的CSS，需要使用 包裹。
試用更復雜的組件MIP組件的使用方法類似于Bootstrap的JS組件的使用方法，找到文檔，復制，粘貼，done……所以這里只提一個要點：MIP官方提供的組件分為內置組件、個性化組件和廣告組件，其中內置組件只需要一開始自動引入的 mip.js 就能運行，而其他類型的組件均需要引入特定的腳本才能用。
因為非常簡單，所以這里我就以一個很簡單的個性化組件——mip-gototop為例，展示一下MIP組件的使用方法。
復制粘貼 gototop 組件的示例代碼；
在 mip.js 后添加 gototop 組件需要的JS文件。
隨便寫一些代碼把整個頁面撐的長一些，以便看出回頂部組件的效果。
最后看起來是這樣的：
接著可以使用上文中提到的 MIP-CLI 工具，mip server 命令運行MIP服務器，從這個本地的服務器訪問剛寫完的MIP頁，就可以看到效果了。
以上就是絕大多數MIP組件的使用方法。
已有H5頁改造成MIP頁使用百度的官方MIP開發一個MIP并不難，那現有頁面改造成MIP頁就更簡單了，就三步：
使用 MIP-CLI 驗證現有頁面（mip validate XXX.html），找出所有錯誤；
修復代碼規范類的錯誤，比如a標簽缺了href屬性、存在標簽等；
把用JS實現的特效換成MIP組件，主要包括回到頂部、圖片輪播、廣告等。
我在網上找到了這一套用AmazeUI寫的H5頁，簡單說一下改造的過程。侵刪。
先使用驗證工具驗證這個頁面，提示有這些錯誤：
可以發現大多數錯誤都可以很快解決。
然后可以發現，頁面中有三塊JS實現的效果需要替換為MIP組件。分別是：
頂部的輪播圖片效果，需要替換為 mip-carousel；
回到頂部按鈕，需要替換為 mip-gototop；
超鏈接，mip頁之間跳轉需要用
至此也就完成了這個頁面的MIP化改造。
總結本文簡單介紹了MIP技術、MIP頁的開發過程、現有H5的MIP化改造等基本問題，后續的文章將更深入的討論MIP技術，包括MIP自定義組件的開發、MIP 2.0等話題。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116824.html
摘要：百度在一年前推出了稱為的前端開發組件，主要目的是加速移動端網頁的顯示。不過呢，百度已經在開發了，的亮點即整站化，包括提供更多強大的組件更容易編寫代碼默認用開發自定義組件以及更快的運行速度等。 前言 「本文假定讀者已經有初級的前端開發知識，包括HTML、CSS。」 百度在一年前推出了稱為 MIP（Mobile Instant Pages）的前端開發組件，主要目的是加速移動端網頁的顯示。M...
摘要：那百度為什么不和一樣用呢況且還是開源的。我想一個重要的原因是使用的需要調用官網的庫，用于控制資源加載緩存等功能這個恐怕是百度不愿意采用的一個核心原因，鑒于國內的網絡環境偉大的，難免不讓人擔心這個庫那天被屏蔽了。 1.關于AMP 在移動互聯網的時代，盡管網站響應式設計可以滿足多屏（pc、手機、ipad等）瀏覽,但google在2015年10月推出了更快移動頁面訪問速度的技術-Accele...
摘要：很多人都問過我，咖啡你的主題模板到底怎么改的。的改造非常簡單。今天就免費給大家獻上改造方案。好了，直接進入正題模板文件規范自己改，不多說。原文地址這是個技術文章，各位可以轉載哈。 很多人都問過我，咖啡你的MIP主題模板到底怎么改的。我就和zblog那些開發者交流了下。zblog的MIP改造非常簡單。今天就免費給大家獻上改造方案。好了，直接進入正題！模板文件MIP規范自己改，不多說。模板...
摘要：很多人都問過我，咖啡你的主題模板到底怎么改的。的改造非常簡單。今天就免費給大家獻上改造方案。好了，直接進入正題模板文件規范自己改，不多說。原文地址這是個技術文章，各位可以轉載哈。 很多人都問過我，咖啡你的MIP主題模板到底怎么改的。我就和zblog那些開發者交流了下。zblog的MIP改造非常簡單。今天就免費給大家獻上改造方案。好了，直接進入正題！模板文件MIP規范自己改，不多說。模板...
閱讀 1971·2019-08-30 15:54
閱讀 3596·2019-08-29 13:07
閱讀 3124·2019-08-29 12:39
閱讀 1789·2019-08-26 12:13
閱讀 1547·2019-08-23 18:31
閱讀 2159·2019-08-23 18:05
閱讀 1844·2019-08-23 18:00
閱讀 1043·2019-08-23 17:15
