H5如何做手机app(移动Web App)?图片轮播？ionic、MUI

移动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>