如何用h5做手机app

一、概述

HTML5（超文本标记语言第五版）是互联网时代中一种新的文本标记语言，又被称为“互联网的操作系统”。它不仅继承了之前的HTML（超文本标记语言），同时具备了支持当前WEB多媒体的技术特性，同时还具有离线缓存、音视频播放、Web音频及webGL等技术，能够提供更好的用户体验效果，因此成为网页制作中必须学习的技术之一。

而关于利用HTML5做手机APP就不同了。可以理解为：利用Web技术（包括HTML、CSS、Javascript等）编写出移动端的应用程序，与其它的原生应用相似（比如我们熟知的微信、QQ等），让你的网络应用能在手机端运行。

二、原理

知道了HTML5做手机APP的定义，下面我们来看看它的原理。

内核Webview是利用HTML5成为手机APP不可或缺的关键技术，不同的手机系统都有自带的内核进行支持，如比较常用的Android有Chromium、iOS有WebKit。

在基于HTML5开发的APP中，使用到的HTML5相关技术主要包括Canvas、Audio、Video、Device API等。通过这些技术，可以将代码编写成一个类似原生应用程序的形式。

三、步骤

下面我们进入到实践环节，从开发工具、环境、代码编写和打包等方面做详细介绍。

1、开发工具和环境

首先，介绍一下几款常用的开发工具：

a、PhoneGap：一款非常出色的开源HTML5+CSS3+JS的跨平台应用程序开发软件。它可以将HTML5的网页应用转化为移动应用程序，跨平台支持Android、IOS以及很多其它操作系统，而且可以使用HTML、CSS和JavaScript进行开发。它的好处是提供了一系列的手机APP操作的API，以及对软件保护和加密技术支持。

b、Cordova：Apache 的开源项目，是一个用于构建跨平台的移动应用程序的框架。它允许使用标准的Web技术（HTML、CSS、JavaScript等）设计和开发移动应用程序，并且可以在多种平台（Android、iOS等）上运行。

c、Sencha Touch：是一个基于ExtJS的框架，是专门为手机而设计的，方便与原生移动端的应用进行整合。

至于开发环境的选择，一般来说推荐使用本地浏览器运行，并且在代码编写完成以后使用真机进行测试。开发过程中可以使用一些调试工具、模拟器等进行帮助，包括Chrome的手机调试插件、模拟器Genymotion等等。

2、代码编写

a、设置viewport和rem

在编写HTML5代码时，首先需要注意的是设置viewport和rem，这是保证手机端显示比例统一的关键。

　　meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”/ 　

　　上述代码是viewport设置的范本，同时也需要对rem进行设置，一般是在最上层的样式表里进行设置。

/*在iPhone5上，1rem = 20px*/

　　　　html {

　　　　　　font-size: 20px;

　　　　}

　　　　@media only screen and (max-width: 320px) {

　　　　　　html {

　　　　　　　　font-size: 14px;

　　　　　　}

　　　　}

b、使用H5的特性

在APP中，可以大量运用HTML5开发中的技术，包括Canvas、Audio、Video等特性。比如就可以使用Canvas来实现绘图、动画等效果，使用Audio元素来播放音乐等。

　　　　c、更多代码细节自己尝试学习吧，此处就不再贴出代码（哈哈）

3、打包发布

在有了HTML、CSS、JavaScript代码的基础上，还需进行打包发布，方便用户进行体验。

a、打包

其中，PhoneGap则需要使用自身提供的打包工具进行打包（亲测打包时间很长，90多分钟）。

Cordova支持通过命令行进行打包，使用crodova build即可实现。

b、发布

发布APP时，需要把打好的包上传至App Store或Google Play, 而发布HTML5应用，应该考虑到使用在线分发方式。在线分发的方案有很多，包括直接将代码上传至WEB服务器，然后让用户进行下载。

四、总结

以上就是利用HTML5开发手机APP的原理以及运用到的技术，日常开发中所需考虑的问题，仅是浅浅蹭过而已。对于已经精通Web技术的人来说并不算难，而对于初学者来说还是会有很多的不懂之处。

但不管怎么样，运用HTML5开发手机APP确实可以在短时间内实现跨平台的开发需求，同时也是可以节省开发成本，缩短开发周期，提高开发效率的。