5. 完整示例代码

    second.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.   <body>
    28.     <mip-img src="https://www.mipengine.org/static/img/mip_logo_3b722d7.png" width="213" height="112" class="main-image"></mip-img>
    30.     <p>MIP 为所有组件提供了一些常用的样式，避免开发者在编写组件时重复实现。这部分样式会在以后的迭代中逐步完善，敬请开发者们关注。</p>
    32.     <h3>一像素边框</h3>
    34.     <p>针对移动端浏览器在高清屏幕显示中最常见的“一像素边框”问题，MIP 给出了通用的解决方案。开发者只需要引入固定的类名即可绘制出真实的一像素边框。</p>
    36.     <mip-shell>
    37.       <script type="application/json">
    38.       {
    39.         "routes": [
    40.           {
    41.             "pattern": "/use-shell.html",
    42.             "meta": {
    43.               "header": {
    44.                 "show": true,
    45.                 "title": "我的首页",
    46.                 "logo": "https://gss0.bdstatic.com/5bd1bjqh_Q23odCf/static/wiseindex/img/favicon64.ico",
    47.                 "buttonGroup": [
    48.                   {
    49.                       "name": "subscribe",
    50.                       "text": "关注"
    52.                       "name": "chat",
    53.                       "text": "发消息"
    54.                   }
    55.                 ]
    56.               },
    57.               "view": {
    58.                 "isIndex": true
    59.               }
    60.             }
    61.           },
    62.           {
    63.             "pattern": "*",
    64.             "meta": {
    65.               "header": {
    66.                 "show": true,
    67.                 "title": "其他页面"
    68.               }
    69.             }
    70.           }
    71.         ]
    72.       }
    73.       </script>
    74.     </mip-shell>
    76.     <script src="https://c.mipcdn.com/static/v2/mip.js"></script>
    77. </html>