新手指南
MIP (Mobile Instant Pages - 移動網(wǎng)頁加速器)主要用于移動端頁面加速。
這篇文檔將帶你快速創(chuàng)建一個 MIP 頁面。
1. 創(chuàng)建 HTML 文件
首先創(chuàng)建一個標準的 HTML 文件, 注意:
- 在
<html>
標簽中增加mip
標識 - 編碼為 utf-8
- 添加meta-viewport,用于移動端展現(xiàn)
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
2. 添加MIP運行環(huán)境
在 HTML 代碼中,添加MIP依賴的mip.js
和mip.css
。
<!DOCTYPE html> <html mip> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css"> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script> </body> </html>
3. 添加 MIP 關(guān)聯(lián)標簽
<link rel="miphtml">
和<link rel="canonical">
主要用于告知搜索引擎頁面間的關(guān)系。添加關(guān)聯(lián)標簽后,MIP頁的會繼承原頁面(移動端)的點擊權(quán)重,同時MIP頁將作為搜索引擎的首選導(dǎo)流頁面。
使用規(guī)則:
<link rel="canonical">
在MIP 頁中使用,<link rel="miphtml">
在原頁面使用。- 若原頁面中已經(jīng)存在
<link rel="canonical">
標簽指向PC頁,則MIP頁<link rel="canonical">
的 href 也指向PC頁。 - 若
MIP頁
沒有對應(yīng)的原頁面
,則指向MIP頁本身url。
<!DOCTYPE html> <html mip> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css"> <link rel="canonical" href="//www.mipengine.org/"> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script> </body> </html>
4. 添加樣式
出于速度考慮,建議內(nèi)聯(lián)使用 css 樣式。所有樣式寫在<style mip-custom></style>
中,注意:style 標簽僅允許出現(xiàn)一次。
<!DOCTYPE html> <html mip> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css"> <link rel="canonical" href="//www.mipengine.org/"> <title>Hello World</title> <style mip-custom> h1 { color: red;} </style> </head> <body> <h1>Hello World!</h1> <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script> </body> </html>
5. 替換禁用 HTML 標簽
MIP十分關(guān)注頁面速度,也因此禁用了一些引起拖慢速度的html標簽(<img>
標簽會引起瀏覽器的repaint和reflow,為了避免這些,MIP提供了替代標簽<mip-img>
。詳見<mip-img>
使用文檔
<!DOCTYPE html> <html mip> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css"> <link rel="canonical" href="//www.mipengine.org/"> <title>Hello World</title> <style mip-custom> h1 { color: red;} </style> </head> <body> <h1>Hello World!</h1> <mip-img src="https://www.mipengine.org/static/img/mip_logo_3b722d7.png"></mip-img> <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script> </body> </html>
6. 使用MIP組件
出于對代碼質(zhì)量和性能的考慮,MIP頁中不允許自定義javascript代碼,所有的交互通過引入MIP組件實現(xiàn)。MIP組件可以理解為封裝了js的自定義html標簽。上一步中的<mip-img>
也是一個MIP組件。
我們以分享組件為例,根據(jù)<mip-share>
,需要依賴//mipcache.bdstatic.com/static/v1/mip-share/mip-share.js
腳本,用在頁面里就是這樣:
<!DOCTYPE html> <html mip> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css"> <link rel="canonical" href="//www.mipengine.org/"> <title>Hello World</title> <style mip-custom> h1 { color: red;} </style> </head> <body> <h1>Hello World!</h1> <mip-img src="https://www.mipengine.org/static/img/mip_logo_3b722d7.png"></mip-img> <mip-share title="分享:我的第一個MIP頁面"></mip-share> <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script> <script src="https://mipcache.bdstatic.com/static/v1/mip-share/mip-share.js"></script> </body> </html>
在使用組件時,請注意閱讀組件文檔,查看組件是否依賴額外腳本。如果依賴,請在mip.js之后引入腳本。
7. 預(yù)覽
開發(fā)完成后,可以使用
MIP頁文件可以直接運行,你可以選擇如下方式,像預(yù)覽普通HTML站點一樣預(yù)覽 MIP HTML 頁面:
- 直接在瀏覽器中打開(由于XML Http Requests失敗可能會導(dǎo)致某些元素預(yù)覽失?。?/li>
- 在本地部署一個服務(wù),如apache,nginx等
8. 起飛
到目前為止,你已經(jīng)創(chuàng)建好了一個MIP頁面。這個頁面有圖,有文,能分享,可以在瀏覽器中運行。
進階的內(nèi)容,請參考
MIP HTML 規(guī)范 組件布局 MIP 加速原理 擴展組件開發(fā)規(guī)范