4. 使用自定义 Shell

经过前几个步骤，自定义 Shell 已经创建完成了。接下来我们要在页面中使用它，使用方法和内置的 <mip-shell> 是非常类似的。

添加标签和引用

在 <body> 内部引用 mip.js 之前使用我们刚才新建的自定义 Shell 的标签 <mip-shell-example>（取代默认的 <mip-shell>）。稍有不同的是需要在标签上添加属性 mip-shell，供 MIP 内部认识这个自定义标签并区别对待。

另外一个和 <mip-shell> 不同的是，自定义 Shell 的 js 文件需要额外引入，顺序在 mip.js 之后。

  1. <body>
  2.   <!-- 其他 DOM 内容 -->
  3.   <mip-shell-example mip-shell>
  4.     <script type="application/json">
  5.     {
  6.       "routes": [
  7.         {
  8.           "pattern": "/use-shell.html",
  9.           "meta": {
  10.             "header": {
  11.               "show": true,
  12.               "title": "我的首页",
  13.               "logo": "https://gss0.bdstatic.com/5bd1bjqh_Q23odCf/static/wiseindex/img/favicon64.ico"
  14.             },
  15.             "view": {
  16.               "isIndex": true
  17.             }
  18.           }
  19.         },
  20.         {
  21.           "pattern": "*",
  22.           "meta": {
  23.             "header": {
  24.               "show": true,
  25.               "title": "其他页面"
  26.             }
  27.           }
  28.         }
  29.       ]
  30.     }
  31.     </script>
  32.   </mip-shell>
  33.   <script src="https://c.mipcdn.com/static/v2/mip.js"></script>
  34.   <script src="http://somecdn.com/mip-shell-example.js"></script>
  35. </body>