초보자 가이드


MIP(Mobile Instant Pages - 모바일 웹 가속기)는 주로 모바일 페이지 가속에 사용됩니다.
이 문서는 MIP 페이지를 빠르게 만드는 데 도움이 됩니다.

1. HTML 파일 만들기

먼저 표준 HTML 파일을 만드세요.

mark
  • 를 utf-8로 인코딩하세요<html>标签中增加mip
    • 모바일 디스플레이용 메타 뷰포트를 추가하세요
  • <
<html mip>
<head>
1,initial-scale=1">
                                                               ~

2. MIP 실행 환경 추가

HTML 코드에 MIP가 의존하는 mip.js와 mip.css를 추가하세요. 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. MIP 관련 태그 추가<link rel="miphtml"> 및 <link rel="canonical"> 주로 페이지 간의 관계를 검색 엔진에 알리는 데 사용됩니다. 관련 태그를 추가하면 MIP 페이지는 원본 페이지(모바일 단말기)의 클릭 가중치를 상속하고 MIP 페이지는 검색 시 기본 전환 페이지 역할을 합니다. 엔진.
사용 규칙:

  • <link rel="canonical">MIP 페이지, <link rel에서 사용됨 ="miphtml">는 원본 페이지에서 사용됩니다.
  • 원본 페이지에 PC 페이지를 가리키는 <link rel="canonical"> 태그가 이미 있는 경우 < Strong>MIP 페이지
    • Strong><link rel="canonical">의 href도 PC 페이지를 가리킵니다.
  • MIP 페이지에 해당 원본 페이지가 없으면 MIP 페이지 자체의 URL을 가리킵니다.
rree

4. 스타일 추가🎜🎜속도상의 이유로 CSS 스타일을 인라인으로 사용하는 것이 좋습니다. 모든 스타일은 <style mip-custom></style>에 작성됩니다. 참고: 스타일 태그는 한 번만 나타날 수 있습니다. 🎜rrreee

5. 비활성화된 HTML 태그 교체 🎜🎜MIP는 페이지 속도에 큰 관심을 기울이기 때문에 속도 저하를 유발하는 일부 HTML 태그를 비활성화했습니다(비활성화 목록🎜). 예를 들어 <img> 태그를 사용하면 브라우저가 다시 그려지고 리플로우됩니다. 이를 방지하기 위해 MIP는 대체 태그 <mip-img>를 제공합니다. 자세한 내용은 를 참조하세요. <mip-img>문서 사용🎜🎜rrreee

6. MIP 구성 요소 사용🎜🎜코드 품질 및 성능을 고려하여 MIP 페이지에서는 사용자 정의 자바스크립트 코드가 허용되지 않으며 모든 상호 작용은 MIP 구성 요소 도입을 통해 이루어집니다. MIP 구성요소는 js를 캡슐화하는 사용자 정의 html 태그로 이해될 수 있습니다. 이전 단계의 도 MIP 구성 요소입니다. 🎜여기를 클릭🎜하여 더 많은 구성 요소를 확인하세요. 🎜

공유 구성 요소를 예로 들어보겠습니다. 공유 구성 요소 문서에 따르면 구성 요소에 해당하는 html 태그는 <mip-share>，需要依赖//mipcache.bdstatic.com/static/v1/mip-share/mip-share.jsscript이며 페이지에서 사용하면 다음과 같습니다.

rrreee

구성 요소를 사용할 때 읽어 보세요. 해당 컴포넌트가 추가 스크립트에 의존하는지 확인하기 위한 컴포넌트 문서입니다. 종속적인 경우 mip.js 뒤에 스크립트를 도입하세요.

7. 미리보기

개발이 완료된 후 MIP 검증 도구를 사용하여 코드 사양을 확인할 수 있습니다.

MIP 페이지 파일을 직접 실행할 수 있습니다. 다음 방법을 선택하여 일반 HTML 사이트처럼 MIP HTML 페이지를 미리 볼 수 있습니다.

  • 브라우저에서 직접 엽니다(XML Http 요청 실패로 인해 일부 미리보기가 요소가 실패할 수 있음)
  • apache, nginx 등과 같은 서비스를 로컬로 배포합니다.

8. 이륙

지금까지 MIP 페이지를 만들었습니다. 이 페이지에는 사진과 텍스트가 포함되어 있으며 공유할 수 있고 브라우저에서 실행할 수 있습니다.

고급 내용은

  • MIP HTML 사양
  • Component Layout
  • MIP 가속 원리
  • 확장 구성 요소 개발 사양

을 참조하세요.
→