Panduan Pemula


MIP (Halaman Segera Mudah Alih - Pemecut Halaman Web Mudah Alih) digunakan terutamanya untuk pecutan halaman mudah alih.
Dokumen ini akan membantu anda membuat halaman MIP dengan cepat.

1. Cipta fail HTML

Mula-mula buat fail HTML standard, nota:

  • Enkodkan <html>标签中增加miptanda
  • ke dalam utf-8
  • tambah meta-viewport untuk paparan mudah alih
    • ;

<html mip>
<head>
1,initial-scale=1">
" " <title>Hello World</title>
" " </head>
" " <body
" "
</body> ;
</html>

2. Tambah persekitaran berjalan MIP

Dalam kod HTML, tambahkan mip.js dan mip.css yang MIP bergantung. 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. Tambahkan teg berkaitan MIP<link rel="miphtml"> dan <link rel="canonical"> Terutamanya digunakan untuk memaklumkan enjin carian tentang hubungan antara halaman. Selepas menambah teg yang berkaitan, halaman MIP akan mewarisi berat klik halaman asal (terminal mudah alih) dan halaman MIP akan berfungsi sebagai halaman lencongan pilihan untuk carian enjin.
Peraturan penggunaan:

  • <link rel="canonical">Digunakan dalam halaman MIP, <link rel ="miphtml"> digunakan pada halaman asal.
  • Jika sudah ada teg <link rel="canonical"> dalam halaman asal yang menunjuk ke halaman PC, maka < strong>Halaman MIP
    • href strong><link rel="canonical"> juga menghala ke halaman PC.
  • Jika halaman MIP tidak mempunyai halaman asal yang sepadan, ia akan menghala ke URL halaman MIP itu sendiri.
rrreee

4. Tambah gaya🎜🎜Atas sebab kelajuan, disyorkan untuk menggunakan gaya css sebaris. Semua gaya ditulis dalam <style mip-custom></style> Nota: tag gaya hanya dibenarkan muncul sekali. 🎜rrreee

5. Gantikan teg HTML yang dilumpuhkan 🎜🎜MIP memberi perhatian yang besar kepada kelajuan halaman, jadi ia telah melumpuhkan beberapa teg html yang menyebabkan kelembapan (Senarai dilumpuhkan🎜). Contohnya, teg <img> akan menyebabkan penyemak imbas mengecat semula dan mengalir semula Untuk mengelakkan ini, MIP menyediakan teg alternatif <mip-img>. Untuk butiran, lihat <mip-img>Gunakan dokumentasi🎜🎜rrreee

6. Gunakan komponen MIP🎜🎜Disebabkan pertimbangan kualiti dan prestasi kod, kod javascript tersuai tidak dibenarkan dalam halaman MIP dan semua interaksi dicapai melalui pengenalan komponen MIP. Komponen MIP boleh difahami sebagai teg html tersuai yang merangkum js. <mip-img> dalam langkah sebelumnya juga merupakan komponen MIP. 🎜Klik di sini🎜 untuk melihat lebih banyak komponen. 🎜

Kami mengambil komponen perkongsian sebagai contoh Mengikut dokumen komponen perkongsian, tag html yang sepadan dengan komponen ialah <mip-share>，需要依赖//mipcache.bdstatic.com/static/v1/mip-share/mip-share.jsskrip, seperti ini apabila digunakan dalam halaman:

rrreee

Apabila menggunakan komponen, sila baca. dokumen komponen untuk menyemak sama ada komponen bergantung pada skrip tambahan. Jika bergantung, sila perkenalkan skrip selepas mip.js.

7. Pratonton

Selepas pembangunan selesai, anda boleh menggunakan alat pengesahan MIP untuk memastikan spesifikasi kod.

Fail halaman MIP boleh dijalankan terus Anda boleh memilih kaedah berikut untuk pratonton halaman HTML MIP seperti laman HTML biasa:

  • Buka terus dalam pelayar (disebabkan kegagalan Permintaan XML Http, pratonton beberapa. elemen mungkin gagal)
  • Sebarkan perkhidmatan secara setempat, seperti apache, nginx, dll.

8 Berlepas

Setakat ini, anda telah mencipta halaman MIP. Halaman ini mempunyai gambar dan teks, boleh dikongsi dan boleh dijalankan dalam penyemak imbas.

Untuk kandungan lanjutan, sila rujuk

  • Spesifikasi HTML MIP
  • Susun Letak Komponen
  • Spesifikasi Pembangunan Pecutan MIP
    • Diperluaskan Kompaun

→