移动Web App
跨平台开发
用户不需要去卖场来下载安装App
任何时候都可以发布App
只需要一个开发项目
可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成（PHP,Ruby on Rails,Python）
1 MUI-轻量APP框架
快速体验
Quickly get up and running with a mui app.
1. 下载Hello mui App
点击下载 已打包好的Hello mui 手机app，直接在手机上体验mui的控件UI及能力展示；
2. 创建Hello mui工程
可从https://www.dcloud.io下载Hbuilder，选择新建“移动APP”，并选择“Hello MUI”工程模板，创建工程；然后通过数据线将手机连接上电脑，点击运行，就可以在手机上体验MUI的各项能力。
3. mui帮助文档
可从MUI帮助文档http://dev.dcloud.net.cn/mui/ui/ ——了解该框架的使用方法。
3 ionic开发框架
ionic : 一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以 下 的版本支持，来获取更好的使用体验。
ionic 创建 APP | 菜鸟教程 http://www.runoob.com/ionic/ionic-creat-app.html
4 手机APP中事件监听
在手机APP中，事件绑定推荐使用DOM2模型。 用tap事件取代click事件。
事件绑定
除了可以使用addEventListener()方法监听某个特定元素上的事件外， 也可以使用.on()方法实现批量元素的事件绑定。
事件取消
使用on()方法绑定事件后，若希望取消绑定，则可以使用off()方法。 off()方法根据传入参数的不同，有不同的实现逻辑。
事件触发
使用mui.trigger()方法可以动态触发特定DOM元素上的事件。
3 手机APP中的图片轮播(MUI)
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> <link href="css/comment.css" rel="stylesheet" /> <style type="text/css"> .mui-slider-item{ width: 100%; height: 300px; background-color: red; } .mui-slider-title{ background-color: rgba(255,0,0,0.7); color: green; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">图片轮播组件</h1> </header> <!--轮播组件--> <div class="mui-content"> <div class="mui-slider"> <div class="mui-slider-group"> <div class="mui-slider-item"> 第一个轮播组件 </div> <div class="mui-slider-item"> 第二个轮播组件 </div> </div> </div> <!--不支持循环图片轮播--> <div class="mui-slider"> <div class="mui-slider-group"> <div class="mui-slider-item"><a href="#"><img src="img/cbd.jpg" /></a> <!--给当前新闻添加标题--> <p class="mui-slider-title">这是一个新闻的标题</p> </div> <div class="mui-slider-item"><a href="#"><img src="img/muwu.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="img/shuijiao.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="img/yuantiao.jpg" /></a></div> </div> <div class="mui-slider-indicator"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> </div> </div> <!--支持循环的图片轮播--> <div id="slider" class="mui-slider" > <div class="mui-slider-group mui-slider-loop"> <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="img/yuantiao.jpg"> </a> </div> <!-- 第一张 --> <div class="mui-slider-item"> <a href="#"> <img src="img/cbd.jpg"> </a> </div> <!-- 第二张 --> <div class="mui-slider-item"> <a href="#"> <img src="img/muwu.jpg"> </a> </div> <!-- 第三张 --> <div class="mui-slider-item"> <a href="#"> <img src="img/shuijiao.jpg"> </a> </div> <!-- 第四张 --> <div class="mui-slider-item"> <a href="#"> <img src="img/yuantiao.jpg"> </a> </div> <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="img/cbd.jpg"> </a> </div> </div> <div class="mui-slider-indicator"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> </div> </div> <button id="btn">点击我调到第三张</button> </div> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init() //获得slider插件对象 var gallery = mui('#slider'); gallery.slider({ interval:5000//自动轮播周期，若为0则不自动播放，默认为0； }); //mui自带的事件绑定,只能用事件委派的方式 mui(".mui-content").on("tap","#btn",function(){ gallery.slider().gotoItem(2); }); </script> </body> </html>
