前 言
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下载地址: ,下载完成后傻瓜式安装即可。
1使用HBuilder新建移动APP项目
HBuilder安装成功以后,就可以新建一个移动APP项目啦!点击“文件—>新建—>移动APP”,输入你的项目名称,就可以搭建完成一个移动APP项目啦!
项目的目录结构如下:
2manifest.json文件介绍
项目目录中的css/img/js/html等文件就不一一赘述了,建好项目后我们需要新增页面只需要新建HTML文件即可,与开发手机网站的操作一模一样。
而这里面最重要的应该就是manifest.json这个文件了,这个文件几乎包含了我们APP的所有设置,双击打开,可以看到这个界面:
底部的选项卡可以看到,这里面包含了我们APP的名称、版本号、首页文件、应用的图标、应用的启动图片以及我们需要的各种SDK。大家可以根据自己的需求自行设置,此处不再一一赘述。
二、APP程序的打包与调试 |
在上面的操作中,我们搭建了一款属于自己的移动APP项目,那么这个项目怎么运行调试,又是怎么打包成Android以及IOS能够安装的APP呢?
1将项目打包成APP
首先,我们来看一下如何和将项目打包成一个能够安装的应用程序,这是Hbuilder最便捷的一步,也是杰小瑞老师选择Hbuilder这款IDE的主要原因之一。
选中项目,点击Hbuilder顶部导航栏的“发行—>发行为原生安装包”,可以看到如下页面:
点击打包,就可以在不需要Xcode和 Android SDK的情况下,直接在云端打包。
打包完成后,就可以得到安卓的apk文件和苹果的ipa文件。
2直接运行调试
上面介绍的是将项目打包成应用程序,但是开发过程中,我们每个页面都要进行大量的调试测试,HBuilder也是支持的。常用的方式有多种,直接通过浏览器调试,通过手机运行调试,通过模拟器调试,都是可以。
点击运行,就可以选择调试模式啦~~此处不再赘述,如果需要可以评论留言哦!
三、MUI框架与HTML5+框架介绍 |
上面提到,HBuilder编辑器、MUI框架、HTML5+框架都是数字天堂公司的知名产品。那么MUI框架和HTML5+框架都是干什么的呢?
1MUI框架
MUI框架号称是“最接近原生APP体验的高性能前端框架”,当然这是官方的口号,杰小瑞老师不负责吹牛~ 官方文档地址:
经过我们的亲身体验,MUI框架确实对得起他的口号,当然也有很大的进步空间需要提升。 但是配合HBuilder的使用,如此般顺滑的操作体验会让你不敢相信自己在敲代码。 MUI给我们提供了大量的组件,只需要在HBuilder中输入一个”m”开头,就可以同列表中选择形形色色各种组件!
选中你需要的任意一个组件,回车,一大段代码直接生成!比如我们选择第一个maccordion回车,就会直接生成一大段代码,如下:
运行之后,就可以看到一个折叠面板:
这相比于其他框架需要自己手写Class的方式,这种操作是不是顺滑到不能想象呀!麻麻再也不用担心你记不住这么多class名字了~~ 所以,MUI提供了这么多的组件,使用如此简单,我们也就不再一一讲解了。感兴趣的同学,可以进入帮助文档 查看所有组件。
我们后面的内容,将主要针对MUI中的页面跳转、选项卡切换、Ajax、下拉刷新&上拉加载、调取底层摄像头的功能展开讲解。
2HTML5+框架介绍
上面我们介绍了MUI框架的基本使用。也了解到了MUI的主要功能是搭建APP的页面布局所使用的框架。那么HTML5+则是增强版的手机浏览器引擎,让HTML5达到原生水平!二维码、语音输入、摇一摇、摄像头、文件系统、微信分享……等几乎你能想到的原生底层功能,HTML5+都能帮你实现。
官方给出了一句话: 40万原生API能力随意调用。功能可谓强大,可以点击进入详细了解:
后续的文章中,我们也会使用到HTML5+调用原生摄像头、写入原生文件等能力进行演示。
四、搭建第一个APP应用 |
介绍完了APP搭建的基本内容,我们就开始制作我们第一个移动APP吧。首先,我们为我们的APP制作一个首页。
1创建第一个首页
首先,我们应该新建一个index.html文件,注意新建的时候选择“含MUI的html文件”,这样可以帮助我们自动导入所需要的各种默认配置。
创建完成后的第一个文件,代码以及详细解释如下:
2搭建首页HTML布局
首先,我们先在body中输入“m”选择mHead,生成头部导航栏。
杰瑞教育APPDemo
在导航栏下面,输入mbody,生成页面的主体部分,其实就是一个div。 页面中除了Header和Footer以外的全部内容,必须包裹在body中。
紧接着,我们在body中,输入一个mList,生成一个列表。
这里面的7个功能,也就是我们将逐一讲解的7个重要功能~!是不是剧透了呢~~生成的页面效果如下:
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
3.5 跳转代码解释
上述代码中,对于很多初学者来说可能会存在一些问题,下面我们来一一解释一下这部分代码:
① 移动端开发中使用tap替代click
在移动端开发中,由于使用click事件会存在一定的延迟,严重影响用户体验,所以我们一律用tap事件取代所有的点击事件。
② 为什么for循环中嵌套一个自执行函数?
这个问题我们在JS面向对象环节探讨过,由于for循环会在页面加载时直接循环结束,所以当我们点击list时,其中的i已经变成了数组的长度。 至于为什么这么解决,大家可以参考之前的博客:
③mui.openWindow ()是个什么东西?
mui.openWindow是MUI官方给我们提供的专门用于打开一个新窗口的函数,详细的使用教程可以参考:
而这个函数的完整配置项如下,当然我们上述的操作只需要一个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 首页最终效果预览
当然这里面还有很多功能我们暂时没有实现,后面的博客我们继续再见吧!
如若想要源码可戳自行下载。