5. 完整示例代码

其实执行到上一步我们已经完成了示例的全部开发步骤。但为了清晰和可读性考虑，我们把最终形态的示例代码展示给开发者。

index.html

  1. <html>
  2.   <head>
  3.     <meta charset="utf-8">
  4.     <title>My First MIP Page</title>
  5.     <meta name="apple-touch-fullscreen" content="yes">
  6.     <meta name="apple-mobile-web-app-capable" content="yes">
  7.     <meta name="format-detection" content="telephone=no">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  9.     <link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
  10.     <style mip-custom>
  11.     h2 {
  12.       text-align: center;
  13.       margin: 10px auto;
  14.     }
  16.     .main-image {
  17.       margin: 10px auto;
  18.       display: block;
  19.     }
  21.     p {
  22.       margin: 10px;
  23.     }
  25.     .next-link {
  26.       float: right;
  27.       margin-right: 10px;
  28.       padding: 0 10px;
  29.       background: #69f;
  30.       border-radius: 20px;
  31.       height: 40px;
  32.       line-height: 40px;
  33.       color: white;
  34.     }
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <h2>这是我的第一个 MIP 页面</h2>
  40.     <mip-img src=" https://boscdn.baidu.com/assets/mip/codelab/shell/mashroom.jpg" width="300" height="300" class="main-image"></mip-img>
  42.     <p>MIP 全称为 Mobile Instant Pages，因此是以页面 (Page) 为单位来运行的。开发者通过改造/提交一个个页面，继而被百度收录并展示。 </p>
  43.     <p>但以页面为单位会带来一个问题：当一个 MIP 页面中存在往其他页面跳转的链接时，就会使浏览器使用加载页面的默认行为来加载新页面。这“第二跳”的体验比起从搜索结果页到 MIP 页面的“第一跳”来说相去甚远。 </p>
  44.     <p>MIP 为了解决这个问题，引入了 Page 模块。它的作用是把多个页面以一定的形式组织起来，让它们互相之间切换时拥有和单页应用一样的切换效果，而不是浏览器默认的切换效果。这个功能大部分情况下对开发者是透明的，但也需要开发者遵守一定的页面编写规范。除此之外，一些和路由相关的信息和操作也会提供给开发者使用。这两部分将是本章节的主要内容。</p>
  46.     <a mip-link href="./second.html" class="next-link">Next Page</a>
  48.     <mip-shell>
  49.       <script type="application/json">
  50.       {
  51.         "routes": [
  52.           {
  53.             "pattern": "/use-shell.html",
  54.             "meta": {
  55.               "header": {
  56.                 "show": true,
  57.                 "title": "我的首页",
  58.                 "logo": "https://gss0.bdstatic.com/5bd1bjqh_Q23odCf/static/wiseindex/img/favicon64.ico",
  59.                 "buttonGroup": [
  60.                   {
  61.                       "name": "subscribe",
  62.                       "text": "关注"
  63.                   },
  64.                   {
  65.                       "name": "chat",
  66.                       "text": "发消息"
  67.                   }
  68.                 ]
  69.               },
  70.               "view": {
  71.                 "isIndex": true
  72.               }
  73.             }
  74.           },
  75.           {
  76.             "pattern": "*",
  77.             "meta": {
  78.               "header": {
  79.                 "show": true,
  80.                 "title": "其他页面"
  81.               }
  82.             }
  83.           }
  84.         ]
  85.       }
  86.       </script>
  87.     </mip-shell>
  89.     <script src="https://c.mipcdn.com/static/v2/mip.js"></script>
  90.   </body>
  91. </html>

second.html

  1. <html>
  2.   <head>
  3.     <meta charset="utf-8">
  4.     <title>My Second MIP Page</title>
  5.     <meta name="apple-touch-fullscreen" content="yes">
  6.     <meta name="apple-mobile-web-app-capable" content="yes">
  7.     <meta name="format-detection" content="telephone=no">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  9.     <link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
  10.     <style mip-custom>
  11.     h2 {
  12.       text-align: center;
  13.       margin: 10px auto;
  14.     }
  16.     .main-image {
  17.       margin: 10px auto;
  18.       display: block;
  19.     }
  21.     p,h3 {
  22.       margin: 10px;
  23.     }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <h2>这是我的第二个 MIP 页面</h2>
  29.     <mip-img src="https://www.mipengine.org/static/img/mip_logo_3b722d7.png" width="213" height="112" class="main-image"></mip-img>
  31.     <p>MIP 为所有组件提供了一些常用的样式，避免开发者在编写组件时重复实现。这部分样式会在以后的迭代中逐步完善，敬请开发者们关注。</p>
  33.     <h3>一像素边框</h3>
  35.     <p>针对移动端浏览器在高清屏幕显示中最常见的“一像素边框”问题，MIP 给出了通用的解决方案。开发者只需要引入固定的类名即可绘制出真实的一像素边框。</p>
  37.     <mip-shell>
  38.       <script type="application/json">
  39.       {
  40.         "routes": [
  41.           {
  42.             "pattern": "/use-shell.html",
  43.             "meta": {
  44.               "header": {
  45.                 "show": true,
  46.                 "title": "我的首页",
  47.                 "logo": "https://gss0.bdstatic.com/5bd1bjqh_Q23odCf/static/wiseindex/img/favicon64.ico",
  48.                 "buttonGroup": [
  49.                   {
  50.                       "name": "subscribe",
  51.                       "text": "关注"
  52.                   },
  53.                   {
  54.                       "name": "chat",
  55.                       "text": "发消息"
  56.                   }
  57.                 ]
  58.               },
  59.               "view": {
  60.                 "isIndex": true
  61.               }
  62.             }
  63.           },
  64.           {
  65.             "pattern": "*",
  66.             "meta": {
  67.               "header": {
  68.                 "show": true,
  69.                 "title": "其他页面"
  70.               }
  71.             }
  72.           }
  73.         ]
  74.       }
  75.       </script>
  76.     </mip-shell>
  78.     <script src="https://c.mipcdn.com/static/v2/mip.js"></script>
  79.   </body>
  80. </html>