3. 创建一个链接

到目前为止 MIP 还是以“页面”为单位。在标准 HTML 中，页面之间通过链接相连，在这点上 MIP 也是相同的。

在创建链接之前，我们需要再创建一个页面。只有拥有两个页面，才使得链接跳转有意义。

再创建一个页面

因为之前已经创建过一个页面了，因此这里就不详细分步骤讲述了，直接放上第二个页面的 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="300" height="300" class="main-image"></mip-img>
  31.     <p>MIP 为所有组件提供了一些常用的样式，避免开发者在编写组件时重复实现。这部分样式会在以后的迭代中逐步完善，敬请开发者们关注。</p>
  33.     <h3>一像素边框</h3>
  35.     <p>针对移动端浏览器在高清屏幕显示中最常见的“一像素边框”问题，MIP 给出了通用的解决方案。开发者只需要引入固定的类名即可绘制出真实的一像素边框。</p>
  37.     <script src="https://c.mipcdn.com/static/v2/mip.js"></script>
  38.   </body>
  39. </html>

添加链接

MIP 页面的链接采用和标准 HTML 相同的 <a> 标签，但进行了一些限制。最主要的一点是在 MIP 页面之间跳转时，加上 mip-link 或者 data-type="mip"。更加详细和完整的相关说明可以参阅这篇文档。

既然我们已经有了两个页面 index.html 和 second.html，我们可以给它们之间添加链接了。例如我们在 index.html 的最后添加：

  1. <a mip-link href="./second.html" class="next-link">下一页</a>

预览效果

点击 index.html 的下一页按钮，我们可以看到 second.html 以动画的形式流畅地侧滑进入屏幕，页面并没有常规的白屏，体验和单页应用完全相同。

切换效果