使用面向组件的思想，快速完成一个微信自定义菜单的开发

<p>
看看效果:

首先,拆分用户界面为一个组件树

<p>
<pre>
<code>
.menu-layer{
.menu-content{
.menu-left{
.menu-list-nav{
}
.menu-list{
li{
a{
display: block;
}
}
}
}

 .menu-right{
 }

}

.menu-bottom{
}
}
</code>
</pre>

其次创建一个组件的静态模板

<pre>
<code>
<div class="menu-layer">
<div class="menu-content">
<div class="menu-left">
<div class="menu-list-nav"></div>
<ul class="menu-list">
<li>
<a href="javascript:void(0);">官网下载</a>
</li>
<li>
<a href="javascript:void(0);">回看经典</a>
</li>
<li>
<a href="javascript:void(0);">历史消息</a>
</li>
</ul>
</div>
<div class="menu-right"></div>
</div>
<div class="menu-bottom">
</div>
</div>
</code>
</pre>

<p>

各区域子组件 进行精细雕琢

menu-bottom

Paste_Image.png

menu-right

d

menu-left

Paste_Image.png

最后合组件

<p>

Paste_Image.png

接下来就可以 使用angularjs 或者你熟悉的任何xx 添加交互,
像angular这种双向数据绑定的玩微信这种交互 爽爆了

最后成功展示如下: