国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

MIP文檔手冊 / 新手指南

新手指南

MIP (Mobile Instant Pages - 移動網(wǎng)頁加速器)主要用于移動端頁面加速。
這篇文檔將帶你快速創(chuàng)建一個 MIP 頁面。

1. 創(chuàng)建 HTML 文件

首先創(chuàng)建一個標(biāo)準(zhǔn)的 HTML 文件, 注意：

  • 在<html>標(biāo)簽中增加mip標(biāo)識
  • 編碼為 utf-8
  • 添加meta-viewport，用于移動端展現(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依賴的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)標(biāo)簽

<link rel="miphtml">和<link rel="canonical">主要用于告知搜索引擎頁面間的關(guān)系。添加關(guān)聯(lián)標(biāo)簽后，MIP頁的會繼承原頁面(移動端)的點(diǎn)擊權(quán)重，同時MIP頁將作為搜索引擎的首選導(dǎo)流頁面。
使用規(guī)則：

  • <link rel="canonical">在MIP 頁中使用，<link rel="miphtml">在原頁面使用。
  • 若原頁面中已經(jīng)存在<link rel="canonical">標(biāo)簽指向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 標(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/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 標(biāo)簽

MIP十分關(guān)注頁面速度，也因此禁用了一些引起拖慢速度的html標(biāo)簽（禁用列表）。例如，<img>標(biāo)簽會引起瀏覽器的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/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組件實(shí)現(xiàn)。MIP組件可以理解為封裝了js的自定義html標(biāo)簽。上一步中的<mip-img>也是一個MIP組件。點(diǎn)擊這里查看更多組件。

我們以分享組件為例，根據(jù)分享組件文檔，組件對應(yīng)的html標(biāo)簽為<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>

在使用組件時，請注意閱讀組件文檔，查看組件是否依賴額外腳本。如果依賴，請?jiān)趍ip.js之后引入腳本。

7. 預(yù)覽

開發(fā)完成后，可以使用MIP校驗(yàn)工具保證代碼規(guī)范。

MIP頁文件可以直接運(yùn)行，你可以選擇如下方式，像預(yù)覽普通HTML站點(diǎn)一樣預(yù)覽 MIP HTML 頁面：

  • 直接在瀏覽器中打開（由于XML Http Requests失敗可能會導(dǎo)致某些元素預(yù)覽失?。?/li>
  • 在本地部署一個服務(wù)，如apache，nginx等

8. 起飛

到目前為止，你已經(jīng)創(chuàng)建好了一個MIP頁面。這個頁面有圖，有文，能分享，可以在瀏覽器中運(yùn)行。

進(jìn)階的內(nèi)容，請參考

  • MIP HTML 規(guī)范
  • 組件布局
  • MIP 加速原理
  • 擴(kuò)展組件開發(fā)規(guī)范