MUI框架开发HTML5手机APP(一)--搭建第一个手机APP

JRedu
　随着HTML5的不断发展，移动开发成为主流趋势！越来越多的公司开始选择使用HTML5开发手机APP，而随着手机硬件设备配置的不断提升，各种开发框架的不断优化，也使着H5开发的混合APP的体验越来越趋于原生！那么在本系列博客中，我们就来一探H5开发APP的神秘面纱吧~~

一、移动APP项目搭建

http://www.dcloud.io/

1使用HBuilder新建移动APP项目

2manifest.json文件介绍

二、APP程序的打包与调试

1将项目打包成APP

2直接运行调试

三、MUI框架与HTML5+框架介绍

上面提到HBuilder编辑器、MUI框架、HTML5+框架都是数字天堂公司的知名产品。MUI框架和HTML5+框架都是干什么的呢？

1MUI框架

MUI框架号称是“最接近原生APP体验的高性能前端框架”，当然这是官方的口号，杰小瑞老师不负责吹牛~ 官方文档地址：http://dev.dcloud.net.cn/mui/

经过我们的亲身体验，MUI框架确实对得起他的口号，当然也有很大的进步空间需要提升HBuilder的使用，如此般顺滑的操作体验会让你不敢相信自己在敲代码。 MUI给我们提供了大量的组件，只需要在HBuilder中输入一个”m”开头，就可以同列表中选择形形色色各种组件！

选中你需要的任意一个组件，回车，一大段代码直接生成！比如我们选择第一个maccordion回车，就会直接生成一大段代码，如下：

运行之后，就可以看到一个折叠面板：

http://dev.dcloud.net.cn/mui/ui/

2HTML5+框架介绍

四、搭建第一个APP应用

1创建第一个首页

创建完成后的第一个文件，代码以及详细解释如下：

<!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" />         <!--导入页面所需要的MUI的CSS文件-->         <link href="css/mui.min.css" rel="stylesheet" />     </head>      <body>         <!--导入页面所需要的MUI的JS文件-->         <script src="js/mui.min.js"></script>         <script type="text/javascript">             // MUI页面初始化函数             mui.init()         </script>     </body> </html>

2搭建首页HTML布局

首先，body中输入“m”选择mHead，生成头部导航栏。

<!--头部APP顶部导航栏区域--> <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">杰瑞教育APPDemo</h1> </header>

<div class="mui-content">      </div>

<ul class="mui-table-view">     <li class="mui-table-view-cell">         <a class="mui-navigate-right">             1、页面加载子页&列表跳转详情页并传参         </a>     </li>     <li class="mui-table-view-cell">         <a class="mui-navigate-right">             2、 底部选项卡切换(Div模式)         </a>     </li>     <li class="mui-table-view-cell">         <a class="mui-navigate-right">             3、底部选项卡切换(WebView模式)         </a>     </li>     <li class="mui-table-view-cell">         <a class="mui-navigate-right">             4、底部选项卡切换(自定义)         </a>     </li>     <li class="mui-table-view-cell">         <a class="mui-navigate-right">             5、图片轮播组件         </a>     </li>     <li class="mui-table-view-cell">         <a class="mui-navigate-right">             6、HTML5+摄像头使用         </a>     </li>     <li class="mui-table-view-cell">         <a class="mui-navigate-right">             7、下拉刷新&上拉加载更多&Ajax         </a>     </li> </ul>

这里面的7个功能，也就是我们将逐一讲解的7个重要功能~！是不是剧透了呢~~生成的页面效果如下：

3为每个列表添加点击事件跳转页面

3.1 mui.init({})

// 初始化页面中的MUI控件       mui.init({           /*设置各种手势操作的开关*/           gestureConfig:{            tap: true, //默认为true            doubletap: true, //默认为false            longtap: true, //默认为false            swipe: true, //默认为true            drag: true, //默认为true            hold:false,//默认为false，不监听            release:false//默认为false，不监听         }       });

3.2 mui.ready()

Mui.ready()是MUI框架中的文档就绪函数，琛ㄧずmui框架已经加载完毕，接受一个回调函数JQuery的文档就绪函数。

// 当MUI的页面DOM加载完成后，执行的函数。 但是，基本都使用mui.plusReady       mui.ready(function(){           //console.log("我在plusReady之前调用！");       })

3.3 mui.plusReady ()

mui.plusReady()方法使用与mui.ready()类似，但是这个方法在执行时间上，mui.ready()MUI框架加载完毕的基础上，还要求HTML5+运行时必须准备完毕！

所以我们一般用这个函数，JS中的window.onload函数。

//页面中HTML5+相关的内容加载完毕后，执行的函数。  类似于window.onload = function(){}       mui.plusReady(function(){           //console.log("我在mui.ready之后调用！");       })

3.4 页面跳转功能的实现

页面跳转功能的实现思路是，我们新建了一个数组，数组中存放着与列表一一对应的链接地址list添加点击事件，并打开数组中对应的页面地址，代码如下：

var page = ["01-jiazaiziyemian.html","02-tabbarDiv.html","03-tabbarWebView.html","04-tabbarMy.html","05-imglunbo.html","06-Camera.html","07-fullPush.html"];                      var arr = document.getElementsByTagName("a");           for(var i=0; i<arr.length; i++){               !function(i){                   // 在手机APP中，事件绑定推荐使用DOM2模型。 用tap事件取代click事件。                   arr[i].addEventListener("tap",function(){                       mui.openWindow({                           url:page[i],                           id:page[i],                       })                   })               }(i);           }

3.5 跳转代码解释

上述代码中，对于很多初学者来说可能会存在一些问题，下面我们来一一解释一下这部分代码：

① 移动端开发中使用tap替代click

在移动端开发中，click事件会存在一定的延迟，严重影响用户体验，tap事件取代所有的点击事件。

② 为什么for循环中嵌套一个自执行函数？

JS面向对象环节探讨过，for循环会在页面加载时直接循环结束，list时，i已经变成了数组的长度http://www.cnblogs.com/jerehedu/p/7592124.html

③mui.openWindow ()是个什么东西？

mui.openWindow是MUI官方给我们提供的专门用于打开一个新窗口的函数，详细的使用教程可以参考：http://dev.dcloud.net.cn/mui/window/#openwindow

而这个函数的完整配置项如下，URL和一个页面ID即可，ID基本都使用URL同名的方式哦~

mui.openWindow({     url:new-page-url,     id:new-page-id,     styles:{       top:newpage-top-position,//新页面顶部位置       bottom:newage-bottom-position,//新页面底部位置       width:newpage-width,//新页面宽度，默认为100%       height:newpage-height,//新页面高度，默认为100%       ......     },     extras:{       .....//自定义扩展参数，可以用来处理页面间传值     },     createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示     show:{       autoShow:true,//页面loaded事件发生后自动显示，默认为true       aniShow:animationType,//页面显示动画，默认为”slide-in-right“；       duration:animationTime//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；     },     waiting:{       autoShow:true,//自动显示等待框，默认为true       title:'正在加载...',//等待对话框上显示的提示内容       options:{         width:waiting-dialog-widht,//等待框背景区域宽度，默认根据内容自动计算合适宽度         height:waiting-dialog-height,//等待框背景区域高度，默认根据内容自动计算合适高度         ......       }     } })