如何开发一个弹出菜单的mip组件

     为何要进行mip开发，mip是百度推出的针对移动网页加速的一套技术标准。有利于移动网站快速打开，有利于百度搜索排名。因为mip页中不能使用js代码。所以必须进行mip组件开发。下面我要开发一个如下图所示的弹出菜单。

首先 安装mip环境，安装步骤可以参考mip官方微博.

第一步：生成组件文件，  在命令行下执行：   mip addelement mip-popup-layer   ,mip-popup-layer是我开发的组件名称。

第二步：编写代码及css样式。

第三步: 运行调试组件   在组件mip-ext目录下执行  mip server 运行mip服务，打开网页进行测试功能是否正确。

第四步：组件完成后，执行： mip  validateelement mip-popup-layer 验证组件是否有错误。

第五步:   将组件目录打包后提交到组件审核平台进行审核，审核通过后，能看到 上线地址。

 主要实现原理： 利用mip-fiexd组件使用工个栏始终保持在屏幕的最底端。不要自己使用css  fiexd来定位是定位不了的。当单击按钮时会弹出一个包含菜单的层，同时生成一个全屏大小的遮照层来实现点击屏幕空白处关闭菜单的效果，实际上是点击了遮照层才关闭的。

设计代码或调用时还需注意的个问题 ：

    1.  工具栏   遮照层  弹出层 它们z-index属性的大小顺序是  弹出层>工具栏>遮照层, 哪个是最顶端的层，才是生效的层。

    2.  遮照层使用了fiexd属性定位，相对于body定位，遮照层必须做为body的子对象，不能做为更下层的对象如body>div>ul>遮照层  这种结构有时fiexd属性会失效的。

    3.  注意事件的传递性，如下面代码

 <li class="listype"  on="tap:popuplx.closeAll tap:popuplx.toggle"> 
<mip-img width="24" height="21" layout="fixed" src="http://www.xuexinjiajiao.com/Public/Wap/Images/lxwm2.png"></mip-img>
  <label>联系</label>
     <mip-popup-layer id="popuplx" layout="nodisplay" >
    <ul>                
        <li><a href="/sy-aboutus.html">关于我们</a></li>        
    </ul>   
   </mip-popup-layer>  
  </li>

执行打开菜单（mip-popup-layer）时，点击菜单上的链接并不会执行而直接关闭了菜单。因为点击菜单上的链接时，单击事件传递给了他的父结点li 上，刚好上面有关闭命令。 上面语句正确的写法应改为： 执行命令的元素和要弹出层要平级。如下代码：

<li class="listype"> 
  <div on="tap:popuplx.closeAll tap:popuplx.toggle">
<mip-img width="24" height="21" layout="fixed" src="http://www.xuexinjiajiao.com/Public/Wap/Images/lxwm2.png"></mip-img>
  <label>联系</label>
  </div>
     <mip-popup-layer id="popuplx" layout="nodisplay" >
    <ul>               
        <li><a href="/sy-aboutus.html">关于我们</a></li>        
    </ul>   
   </mip-popup-layer>  
  </li>

mip-popup-layer组件的引用地址：https://mipcache.bdstatic.com/extensions/platform/v1/mip-popup-layer/mip-popup-layer.js

详细调用方式请访问家教网页，查看网页原代码即可。我不知道在哪里能看到组件的原代码，需要组件原代码联系我。