5. 完整示例代码

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

mip-shell-example.js

  1. import './mip-shell-example.less'
  3. export default class MIPShellExample extends window.MIP.builtinComponents.MIPShell {
  4.   processShellConfig(shellConfig) {
  5.     // 强制修改 HTML 中的按钮配置
  6.     shellConfig.routes.forEach(route => {
  7.       route.buttonGroup = [{
  8.         "name": "setting",
  9.         "text": "设置"
  10.       },
  11.       {
  12.         "name": "cancel",
  13.         "text": "取消"
  14.       }]
  15.     })
  16.   }
  18.   renderOtherParts () {
  19.     this.$footerWrapper = document.createElement('mip-fixed')
  20.     this.$footerWrapper.setAttribute('type', 'bottom')
  21.     this.$footerWrapper.classList.add('mip-shell-footer-wrapper')
  23.     this.$footer = document.createElement('div')
  24.     this.$footer.classList.add('mip-shell-footer', 'mip-border', 'mip-border-top')
  25.     this.$footer.innerHTML = this.renderFooter()
  27.     this.$footerWrapper.appendChild(this.$footer)
  28.     document.body.appendChild(this.$footerWrapper)
  29.   }
  31.   renderFooter() {
  32.     let pageMeta = this.currentPageMeta
  33.     // 只为了简便，直接输出了一个字符串
  34.     return 'hello ${pageMeta.header.title}!'
  35.   }
  37.   updateOtherParts() {
  38.     this.$footer.innerHTML = this.renderFooter()
  39.   }
  41.   handleShellCustomButton (buttonName) {
  42.     if (buttonName === 'setting') {
  43.       this.$footerWrapper.style.display = 'block'
  44.     }
  45.   }
  47.   bindRootEvents () {
  48.     // 很重要！很重要！很重要！
  49.     super.bindRootEvents()
  51.     this.$footer.addEventListener('click', () => {
  52.       // 点击隐藏底部栏
  53.       this.$footerWrapper.style.display = 'none'
  54.     })
  55.   }
  56. }

index.html

只列出使用 <mip-shell-example> 的部分。

  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>