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

前言

JRedu

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

一、移动APP项目搭建

由于我们的H5编写的都是一个个网页，需要使用浏览器打开才能使用，这显然不是APP的使用方式。那么我们才能将一个手机网站，封装成一个APP呢？时下热门的Cordova、PhoneGap、appMobi、WeX5等…都是主流的构建APP工具！但是这些工具有一个共同的特点——使用麻烦！！

所以，我们介绍一种最简便的构建的方式，使用HBuilder一键打包！HBuilder是数字天堂旗下的一款前端开发IDE，其功能强大远超你想象，我们使用的MUI框架，HTML5+框架，都是数字天堂旗下产品，Hbuilder+MUI这对好基友，简直就是绝配！

HBuilder下载地址：http://www.dcloud.io/ ，下载完成后傻瓜式安装即可。

1使用HBuilder新建移动APP项目

HBuilder安装成功以后，就可以新建一个移动APP项目啦！点击“文件—>新建—>移动APP”,输入你的项目名称，就可以搭建完成一个移动APP项目啦！

项目的目录结构如下：

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

2manifest.json文件介绍

项目目录中的css/img/js/html等文件就不一一赘述了，建好项目后我们需要新增页面只需要新建HTML文件即可，与开发手机网站的操作一模一样。

而这里面最重要的应该就是manifest.json这个文件了，这个文件几乎包含了我们APP的所有设置，双击打开，可以看到这个界面：

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

底部的选项卡可以看到，这里面包含了我们APP的名称、版本号、首页文件、应用的图标、应用的启动图片以及我们需要的各种SDK。大家可以根据自己的需求自行设置，此处不再一一赘述。

二、APP程序的打包与调试

在上面的操作中，我们搭建了一款属于自己的移动APP项目，那么这个项目怎么运行调试，又是怎么打包成Android以及IOS能够安装的APP呢？

1将项目打包成APP

首先，我们来看一下如何和将项目打包成一个能够安装的应用程序，这是Hbuilder最便捷的一步，也是杰小瑞老师选择Hbuilder这款IDE的主要原因之一。

选中项目，点击Hbuilder顶部导航栏的“发行—>发行为原生安装包”，可以看到如下页面：

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

点击打包，就可以在不需要Xcode和 Android SDK的情况下，直接在云端打包。

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

打包完成后，就可以得到安卓的apk文件和苹果的ipa文件。

2直接运行调试

上面介绍的是将项目打包成应用程序，但是开发过程中，我们每个页面都要进行大量的调试测试，HBuilder也是支持的。常用的方式有多种，直接通过浏览器调试，通过手机运行调试，通过模拟器调试，都是可以。

点击运行，就可以选择调试模式啦~~此处不再赘述，如果需要可以评论留言哦！

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

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

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

1MUI框架

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

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

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

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

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

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

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

这相比于其他框架需要自己手写Class的方式，这种操作是不是顺滑到不能想象呀！麻麻再也不用担心你记不住这么多class名字了~~ 所以，MUI提供了这么多的组件，使用如此简单，我们也就不再一一讲解了。感兴趣的同学，可以进入帮助文档http://dev.dcloud.net.cn/mui/ui/ 查看所有组件。

我们后面的内容，将主要针对MUI中的页面跳转、选项卡切换、Ajax、下拉刷新&上拉加载、调取底层摄像头的功能展开讲解。

2HTML5+框架介绍

上面我们介绍了MUI框架的基本使用。也了解到了MUI的主要功能是搭建APP的页面布局所使用的框架。那么HTML5+则是增强版的手机浏览器引擎，让HTML5达到原生水平！二维码、语音输入、摇一摇、摄像头、文件系统、微信分享……等几乎你能想到的原生底层功能，HTML5+都能帮你实现。

官方给出了一句话： 40万原生API能力随意调用。功能可谓强大，可以点击进入详细了解：http://www.dcloud.io/runtime.html

后续的文章中，我们也会使用到HTML5+调用原生摄像头、写入原生文件等能力进行演示。

四、搭建第一个APP应用

介绍完了APP搭建的基本内容，我们就开始制作我们第一个移动APP吧。首先，我们为我们的APP制作一个首页。

1创建第一个首页

首先，我们应该新建一个index.html文件，注意新建的时候选择“含MUI的html文件”，这样可以帮助我们自动导入所需要的各种默认配置。

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

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

<!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>

在导航栏下面，输入mbody，生成页面的主体部分，其实就是一个div。页面中除了Header和Footer以外的全部内容，必须包裹在body中。

<div class="mui-content">

</div>

紧接着，我们在body中，输入一个mList，生成一个列表。

<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个重要功能~！是不是剧透了呢~~生成的页面效果如下：

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

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

添加点击事件肯定就要用到JS啦~~先介绍几个非常常用的MUI方法。

3.1 mui.init({})

mui.init方法时MUI的初始化函数，接受一个对象参数，用于进行页面的各种配置，比如子页面的加载、页面预加载等。。。

下面的代码是利用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,//等待框背景区域高度，默认根据内容自动计算合适高度

        ......

      }

    }

})

好了，截止到这，我们的首页就全部搭建完成啦！最终效果如下！

3.6 首页最终效果预览

当然这里面还有很多功能我们暂时没有实现，后面的博客我们继续再见吧！

如若想要源码可戳http://www.jredu100.com/index.php?m=content&c=index&a=show&catid=65&id=38自行下载。

作者：杰瑞教育
出处：http://www.cnblogs.com/jerehedu/
版权声明：本文版权归烟台杰瑞教育科技有限公司和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

技术咨询： MUI框架开发HTML5手机APP(一)--搭建第一个手机APP

MUI框架开发HTML5手机APP(一)--搭建第一个手机APP的更多相关文章

MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
MUI框架开发HTML5手机APP
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
MUI框架开发HTML5手机APP(二)--页面跳转传值&amp&semi;底部选项卡切换
概述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
使用mui框架开发App,当input获取焦点时，键盘弹出，底部导航栏上升。
转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...
用mui框架开发手机app项目实践中的那些事儿
http://www.yilingsj.com/xwzj/2015-04-29/260.html 最近在玩mui框架,坑的我是:西湖的水,全都是眼泪!!! 公司的手机app要进行改版,我率先想到的是j ...
JavaEE开发基于Eclipse的环境搭建以及Maven Web App的创建
本篇博客就完整的来聊一下如何在Eclipse中创建的Maven Project.本篇博客是JavaEE开发的开篇,也是基础.本篇博客的内容干货还是比较多的,而且比较实用,并且都是采用目前最新版本的工具 ...
mui框架开发aop的跨页面传值
mui开发跨平台app,其实不乏会涉及到跨页面传值,今天给大家简单介绍一种常用也是简单的传值方法咱在这里设置一个场景,就是两个页面进入到同一页面展示不同的元素,此时需要在这两个页面各自设置一个区别的 ...
mui框架上下拉加载
mui框架被定位为“最接近原生体验的移动App的UI框架”. 写下mui框架中常用的两个功能,下拉刷新和上拉加载,没有后台交互,用js写假数据模拟,下面直接上代码. <!DOCTYPE html ...
MUI框架-04-切换页面头部文字重叠
MUI框架-04-切换页面头部文字重叠从现在开始就只分享 MUI 框架开发时遇到的问题了开发不懂请查看:官方文档问题情况切换页面 title 文字重叠,覆盖截图: 解决办法给 h1 标签加 ...

随机推荐

C&num;记录程序运行时间记录显示
//引入命名空间 using System.Diagnostics; //清空导入时间 lbImportTime.Text = ""; ...
HP-SOCKET TCP/UDP通信框架库解析
项目概述: HP-SOCKET是一套通用TCP/UDP通信框架,包括服务器.客户端.Agent组件:其目标是提供高性能.通用性.简易性.可扩展.可定制: 鉴于此,其仅实现基本的通用框架通信.数据收发功 ...
&period;Net 中的反射(序章) - Part&period;1
引言反射是.Net提供给我们的一件强力武器,尽管大多数情况下我们不常用到反射,尽管我们可能也不需要精通它,但对反射的使用作以初步了解在日后的开发中或许会有所帮助. 反射是一个庞大的话题,牵扯到的知识 ...
[20150513]Linux远程登陆管理以及Vim的学习
Linux远程登陆管理以及Vim的学习实现Linux远程管理所需工具Xshell,Xshell是一个用于MS Windows平台的强大的SSH,TELNET,和RLOGIN终端仿真软件.它使得用户 ...
Mono addin 学习笔记 4 再论数据扩展点（Data only extension point）
1. Attribute声明方式定义扩展属性 [AttributeUsage(AttributeTargets.Assembly, AllowMultiple= true)] public clas ...
从一个action地址获取信息
get方法 String url_str ="http://127.0.0.1:8400/lxyyProduct/getProductUserNeedUpdate.action?ts=&qu ...
php学习之路：php在iconv功能详细解释
iconv函数库可以完毕各种字符集间的转换,是php编程中必不可少的基础函数库. 使用方法例如以下: $string = "亲爱的朋友欢迎訪问胡文芳的博客.希望给您带来一点点的帮助!&quo ...
netty 之 telnet HelloWorld 详解
前言 Netty是一个异步事件驱动的网络应用程序框架, 用于快速开发可维护的高性能协议服务器和客户端. etty是一个NIO客户端服务器框架,可以快速轻松地开发协议服务器和客户端等网络应用程序.它极 ...
模块commonjs AMD UMD
commonjs是用在服务器端的,同步的,如nodejs amd, cmd是用在浏览器端的,异步的,如requirejs和seajs 其中,amd先提出,cmd是根据commonjs和amd基础上提出 ...
NGUI诡异的drawCall
看了很多关于NGUI drawCall的文章,见得比较多的一个观点是:一个 Atlas 对应一个Drawcall. 好奇心下做了个demo,两个panel中只用到一个Atlas,却产生了10个draw ...