免費(fèi)AI編程助手
MIP新手指南
MIP (Mobile Instant Pages - 移動(dòng)網(wǎng)頁加速器)主要用于移動(dòng)端頁面加速。
這篇文檔將帶你快速創(chuàng)建一個(gè) MIP 頁面。
1. 創(chuàng)建 HTML 文件
首先創(chuàng)建一個(gè)標(biāo)準(zhǔn)的 HTML 文件, 注意：
- 在
<html>標(biāo)簽中增加mip標(biāo)識(shí) - 編碼為 utf-8
- 添加meta-viewport，用于移動(dòng)端展現(xiàn)
<!DOCTYPE html>
<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運(yùn)行環(huán)境
在 HTML 代碼中，添加MIP依賴的mipmain.js和mipmain.css。 使用最新版本的文件能夠保證組件的正常使用，可以在這里查看mipmain.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/mipmain-v1.1.1.css">
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
<script src="https://mipcache.bdstatic.com/static/mipmain-v1.1.2.js"></script>
</body>
</html>
3. 添加 MIP 關(guān)聯(lián)標(biāo)簽
<link rel="miphtml">和<link rel="canonical">主要用于告知搜索引擎頁面間的關(guān)系。
- 在
MIP頁中使用<link rel="canonical">， href 指向原頁面, 若只有 MIP 頁，則指向自己。 - 如果
MIP頁和原頁面同時(shí)存在，則在原頁面中添加<link rel="miphtml">指向MIP頁。MIP頁的點(diǎn)擊會(huì)與原頁面的點(diǎn)擊權(quán)重加和計(jì)算，同時(shí)原頁面將作為搜索引擎的首選頁。
<!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/mipmain-v1.1.1.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/mipmain-v1.1.2.js"></script>
</body>
</html>
4. 添加樣式
出于速度考慮，建議內(nèi)聯(lián)使用 css 樣式。所有樣式寫在<style mip-custom></style>中，注意：style 標(biāo)簽僅允許出現(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/mipmain-v1.1.1.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/mipmain-v1.1.2.js"></script>
</body>
</html>
5. 替換禁用 HTML 標(biāo)簽
MIP十分關(guān)注頁面速度，也因此禁用了一些引起拖慢速度的html標(biāo)簽（禁用列表）。例如，<img>標(biāo)簽會(huì)引起瀏覽器的repaint和reflow，為了避免這些，MIP提供了替代標(biāo)簽<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/mipmain-v1.1.1.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/mipmain-v1.1.2.js"></script>
</body>
</html>
6. 使用MIP組件
出于對(duì)代碼質(zhì)量和性能的考慮，MIP頁中不允許自定義javascript代碼，所有的交互通過引入MIP組件實(shí)現(xiàn)。MIP組件可以理解為封裝了js的自定義html標(biāo)簽。上一步中的<mip-img>也是一個(gè)MIP組件。點(diǎn)擊這里查看更多組件。
我們以分享組件為例，根據(jù)分享組件文檔，組件對(duì)應(yīng)的html標(biāo)簽為<mip-share>，需要依賴//mipcache.bdstatic.com/static/v1.1/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/mipmain-v1.1.1.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="分享：我的第一個(gè)MIP頁面"></mip-share>
<script src="https://mipcache.bdstatic.com/static/mipmain-v1.1.2.js"></script>
<script src="https://mipcache.bdstatic.com/static/v1.1/mip-share.js"></script>
</body>
</html>
在使用組件時(shí)，請(qǐng)注意閱讀組件文檔，查看組件是否依賴額外腳本。如果依賴，請(qǐng)?jiān)趍ipmain.js之后引入腳本。
7. 預(yù)覽
開發(fā)完成后，可以使用MIP校驗(yàn)工具保證代碼規(guī)范。
MIP頁文件可以直接運(yùn)行，你可以選擇如下方式，像預(yù)覽普通HTML站點(diǎn)一樣預(yù)覽 MIP HTML 頁面：
- 直接在瀏覽器中打開（由于XML Http Requests失敗可能會(huì)導(dǎo)致某些元素預(yù)覽失?。?/li>
- 在本地部署一個(gè)服務(wù)，如apache，nginx等
8. 起飛
到目前為止，你已經(jīng)創(chuàng)建好了一個(gè)MIP頁面。這個(gè)頁面有圖，有文，能分享，可以在瀏覽器中運(yùn)行。
進(jìn)階的內(nèi)容，請(qǐng)參考
更多建議：