Beginner's Guide


MIP (Mobile Instant Pages - mobile web accelerator) is mainly used for mobile page acceleration.
This document will help you quickly create a MIP page.

1. Create an HTML file

First create a standard HTML file, note: add

  • in the <html> tag mipIdentification
  • Encoding is utf-8
  • Add meta-viewport for mobile display
<! DOCTYPE html>
<html mip>
; <head>
; <meta charset="UTF-8">
; <meta name="viewport" content="width=device -width,minimum-scale=1,initial-scale=1">
                                                                                                 h1>Hello World!</h1>                                                              

2. Add MIP running environment

In the HTML code, add the mip.js and mip.css that MIP depends on. 

<!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. Add MIP associated tags

<link rel="miphtml">and<link rel="canonical"> Mainly used to inform search engines about the relationship between pages. After adding the associated tag, the MIP page will inherit the click weight of original page (mobile terminal), and MIP page will be the preferred diversion page for search engines.
Usage rules:

  • <link rel="canonical">Used in MIP page , <link rel ="miphtml">Used on original page.
  • If the original page already exists <link rel="canonical"> tag points to the PC page, then MIP page## The href of #<link rel="canonical"> also points to the PC page.
    • If
  • MIP page does not have a corresponding original page, it will point to the url of the MIP page itself. 
    • <!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. Add styles

For speed reasons, it is recommended to use css styles inline. All styles are written in

<style mip-custom></style>. Note: the style tag is only allowed to appear once. 

<!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. Replace disabled HTML tags

MIP pays great attention to page speed, and therefore disables some html tags that cause slowdowns (

Banned List). For example, the <img> tag will cause the browser to repaint and reflow. To avoid these, MIP provides the alternative tag <mip-img>. For details, see <mip-img>Usage documentation

<!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. Using MIP components

For code quality and performance considerations, Customized javascript code is not allowed in the MIP page, and all interactions are achieved through the introduction of MIP components. MIP components can be understood as custom html tags that encapsulate js.

<mip-img> in the previous step is also a MIP component. Click here to see more components.

Let's take the sharing component as an example. According to the Sharing component document, the html tag corresponding to the component is <mip-share>, which needs to depend on //mipcache.bdstatic .com/static/v1/mip-share/mip-share.js The script is used in the page like this: 

<!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>

When using components, please read the component documentation to check whether the component depends on it Extra scripts. If dependent, please introduce the script after mip.js.

7. Preview

After the development is completed, you can use the MIP verification tool to ensure code specifications.

MIP page files can be run directly. You can choose the following method to preview the MIP HTML page like a normal HTML site:

  • Open directly in the browser (due to XML Http Requests Failure may cause the preview of some elements to fail)
  • Deploy a service locally, such as apache, nginx, etc.

8. Take off

So far, you A MIP page has been created. This page has pictures and text, can be shared, and can be run in a browser.

For advanced content, please refer to

  • MIP HTML specification
  • Component layout
  • MIP acceleration principle
  • Extended component development specifications
→