完整示例代码

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

index.html

  1. <html>
  2.   <head>
  3.     <meta charset="utf-8">
  4.     <title>首页</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.       body {
  12.         padding: 10px;
  13.       }
  14.       .mod {
  15.         border: 1px solid rgba(0, 0, 0, 0.2);
  16.         margin-bottom: 20px;
  17.       }
  18.       label {
  19.         line-height: 40px;
  20.       }
  21.       input {
  22.         border: 1px solid #666;
  23.         width: 100px;
  24.         height: 20px;
  25.         padding: 6px;
  26.       }
  27.       ul {
  28.         list-style-type: none;
  29.         display: flex;
  30.       }
  31.       li {
  32.         flex: 1 1 auto;
  33.         background: rgba(0, 0, 0, 0.1);
  34.         padding: 10px 0;
  35.         text-align: center;
  36.         border-left: 1px solid #bbb;
  37.       }
  38.       li:first-of-type {
  39.         border: none;
  40.       }
  41.       .loading-tip {
  42.         text-align: center;
  43.         height: 100px;
  44.         line-height: 100px;
  45.         width: 100%;
  46.       }
  47.     </style>
  48.   </head>
  49.   <body>
  50.       <mip-data>
  51.         <script type="application/json">
  52.           {
  53.             "no": 0,
  54.             "imgList": [
  55.                 "https://www.mipengine.org/static/img/sample_01.jpg",
  56.                 "https://www.mipengine.org/static/img/sample_02.jpg",
  57.                 "https://www.mipengine.org/static/img/sample_03.jpg"
  58.             ],
  59.             "tab": "娱乐",
  60.             "loadingTip": "default"
  61.           }
  62.         </script>
  63.       </mip-data>
  65.       <div class="mod">
  66.         <label for="input">
  67.           输入数字 0-2 以切换图片:
  68.           <input id="input" type='text' on="change:MIP.setData({no:DOM.value})">
  69.         </label>      
  70.         <mip-img m-bind:src="imgList[no]" width="100%" height="300px"></mip-img>
  71.       </div>
  73.       <div class="mod">
  74.         <ul>
  75.           <li on="tap:MIP.setData({tab: '娱乐'})">娱乐</li>
  76.           <li on="tap:MIP.setData({tab: '体育'})">体育</li>
  77.           <li on="tap:MIP.setData({tab: '新闻'})">新闻</li>
  78.         </ul>
  79.         <div m-text="loadingTip" class="loading-tip"></div>
  80.       </div>
  81.       <mip-script>
  82.         console.log('watched')
  83.         MIP.watch('tab', function (newVal) {
  84.           MIP.setData({
  85.             loadingTip: `正在加载${newVal}频道的数据...`
  86.           })
  87.         })
  88.       </mip-script>
  90.       <script src="https://c.mipcdn.com/static/v2/mip.js"></script>
  91.       <script src="https://c.mipcdn.com/static/v2/mip-script/mip-script.js"></script>
  92.     </body>
  93. </html>