Guide du débutant


MIP (Mobile Instant Pages - Mobile Web Pages Accelerator) est principalement utilisé pour l'accélération des pages mobiles.
Ce document vous aidera à créer rapidement une page MIP.

1. Créer un fichier HTML

Créez d'abord un fichier HTML standard, remarque :

  • Encodez la <html>标签中增加mipmarque
  • en utf-8
  • ajoutez une méta-fenêtre pour l'affichage mobile
<
<html mip>
<head>
1,initial-scale=1">
" " <title>Hello World</title>
" " </head>
" " <body>
" "
</body> ;
</html>

2. Ajoutez un environnement d'exécution MIP

Dans le code HTML, ajoutez mip.js et mip.css dont dépend 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 关联标签

<link rel="miphtml">和<link rel="canonical">主要用于告知搜索引擎页面间的关系。添加关联标签后，MIP页的会继承原页面(移动端)的点击权重，同时MIP页将作为搜索引擎的首选导流页面。
使用规则：

  • <link rel="canonical">在MIP 页中使用，<link rel="miphtml">在原页面使用。
  • 若原页面中已经存在<link rel="canonical">标签指向PC页，则MIP页<link rel="canonical">的 href 也指向PC页。
  • 若 MIP页没有对应的原页面，则指向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. 添加样式

出于速度考虑，建议內联使用 css 样式。所有样式写在<style mip-custom></style>中，注意：style 标签仅允许出现一次。

<!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十分关注页面速度，也因此禁用了一些引起拖慢速度的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组件

出于对代码质量和性能的考虑，MIP页中不允许自定义javascript代码，所有的交互通过引入MIP组件实现。MIP组件可以理解为封装了js的自定义html标签。上一步中的<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>
        <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>

3. Ajoutez les balises associées au MIP<link rel="miphtml"> et <link rel="canonical"> Principalement utilisé pour informer les moteurs de recherche sur la relation entre les pages. Après avoir ajouté la balise associée, la page MIP héritera du poids de clic de la page d'origine (terminal mobile), et la page MIP servira de page de déviation préférée pour la recherche. moteurs.
Règles d'utilisation :

  • <link rel="canonical">Utilisé dans la page MIP, <link rel ="miphtml"> est utilisé sur la page originale.
  • S'il y a déjà une balise <link rel="canonical"> dans la page d'origine pointant vers la page PC, alors le < strong>Page MIP
    • Le href de strong><link rel="canonical"> pointe également vers la page PC.
  • Si la page MIP n'a pas de page originale correspondante, elle pointera vers l'URL de la page MIP elle-même.
rrreee

4. Ajouter des styles🎜🎜Pour des raisons de rapidité, il est recommandé d'utiliser les styles CSS en ligne. Tous les styles sont écrits en <style mip-custom></style> Remarque : la balise de style ne peut apparaître qu'une seule fois. 🎜rrreee

5. Remplacer les balises HTML désactivées 🎜🎜MIP accorde une grande attention à la vitesse des pages, il a donc désactivé certaines balises html qui provoquent des ralentissements (Liste désactivée🎜). Par exemple, la balise <img> entraînera la refonte et la redistribution du navigateur. Pour éviter cela, MIP fournit une balise alternative <mip-img>. Pour plus de détails, voir <mip-img>Utiliser la documentation🎜🎜rrreee

6. Utiliser les composants MIP🎜🎜En raison de considérations de qualité et de performances du code, le code javascript personnalisé n'est pas autorisé dans les pages MIP et toutes les interactions sont réalisées grâce à l'introduction de composants MIP. Les composants MIP peuvent être compris comme des balises HTML personnalisées qui encapsulent js. <mip-img> à l'étape précédente est également un composant MIP. 🎜Cliquez ici🎜 pour voir plus de composants. 🎜

Nous prenons le composant de partage comme exemple. Selon le document du composant de partage, la balise html correspondant au composant est <mip-share>，需要依赖//mipcache.bdstatic.com/static/v1/mip-share/mip-share.jsscript, qui ressemble à ceci lorsqu'elle est utilisée dans la page :

rrreee

Lors de l'utilisation du composant, veuillez lire le document du composant pour vérifier si le composant dépend d'un script supplémentaire. En cas de dépendance, veuillez introduire le script après mip.js.

7. Aperçu

Une fois le développement terminé, vous pouvez utiliser l'outil de vérification MIP pour garantir les spécifications du code.

Les fichiers de page MIP peuvent être exécutés directement. Vous pouvez choisir la méthode suivante pour prévisualiser la page HTML MIP comme un site HTML normal :

  • Ouvrir directement dans le navigateur (en raison de l'échec des requêtes XML Http, l'aperçu de certaines des éléments peuvent échouer)
  • Déployez un service localement, comme Apache, nginx, etc.

8 Décollage

Jusqu'à présent, vous avez créé une page MIP. Cette page contient des images et du texte, peut être partagée et exécutée dans un navigateur.

Pour le contenu avancé, veuillez vous référer à la

  • Spécification HTML MIP
  • Mise en page des composants
  • Principe d'accélération MIP
  • Spécification étendue du développement de composants

→