HTML5+ App开发入门

HTML5 Plus应用概述

HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App能够经过扩展的JS API任意调用手机的原生能力，实现与原生App一样强大的功能和性能。

HTML5 Plus规范

经过HTML5开发移动App时，会发现HTML5不少能力不具有。为弥补HTML5能力的不足，在W3C中国的指导下成立了www.html5plus.org组织，推出HTML5+规范。

HTML5+规范是一个开放规范，容许三方浏览器厂商或其余手机runtime制造商实现。

HTML5+扩展了JavaScript对象plus，使得js能够调用各类浏览器没法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。

HBuilder的手机原生能力调用分2个层面：

- 跨手机平台的能力调用都在HTML5+规范里，好比二维码、语音输入，使用plus.barcode和plus.speech。编写一次，可跨平台运行。
- Native.js是另外一项创新技术。手机OS的原生API有四十多万，大量的API没法被HTML5使用。Native.js把几十万原生API封装成了js对象，经过js能够直接调ios和android的原生API。这部分就再也不跨平台，写法分别是plus.ios和plus.android，好比调ios game center，或在android手机桌面建立快捷方式。

Native.js的用法示例，var obj= plus.android.import("android.content.Intent");，将一个原生对象android.content.Intent映射为js对象obj，而后在js里操做obj对象的方法属性就能够了。

HTML5+ App

使用HTML5+开发的移动App并不是mobile web页面。这是新手最容易混淆的地方。mobile web的文件存放在web服务器上，而移动App的文件存放在手机本地，编写移动App的html、js、css文件被打包到ipa或apk等原生安装包，在手机客户端运行。

用个更形象的列子，web app仍然是b/s结构，而移动App是c/s结构甚至是彻底脱线的单机应用。
这或许有点超过一些人的想象，他们认为HTML就是web、就是b/s，事实上javascript早已可经过nodejs等技术运行在服务器侧，而在HBuilder的移动App里，HTML、JS等文件也能够被打包成原生安装包。

固然这些移动App里某些页面也能够继续从服务器端以网页方式下行，就像任何原生应用（如微信）均可之内嵌网页同样。

因此mobile web，在HBuilder里新建项目时，属于web项目。不要放置到移动App项目下。mobile web项目也不能真机联调和打包。

举几个例子说明mobile web和移动App的区别。
例1：把一个mobile web项目，打包成移动App。

1. 在HBuilder里新建一个web项目，把mobile web代码放进去。
2. 在HBuilder里新建移动App
3. 在新建的移动App下找到manifest.json，将其中的入口页面配置为mobile web的网络地址。
4. 而后点发行打包，就获得一个移动App的安装包。除了有个安装包和桌面有个快捷方式外，与浏览器的体验不会有其余区别。
5. 不过注意，这样的移动App体验不好，它在页面跳转时会像浏览器那样切换而且白屏，它彻底没法脱线使用，没有网络时点开这个app只能看到一片白板。这样的app在Apple的Appstore审核时是没法经过的，其余大的安卓市场也不会容许发行。

例子2：正规的移动App

1. 在HBuilder里新建移动App项目
2. 在移动App里编写html、Js、css文件，本地js经过ajax方式请求服务器数据，经过plus.net对象避开跨域限制
3. 移动App里的js能够经过plus对象调用手机原生能力
4. 编写好的移动App点打包变成安装包，这才是一个体验良好的、可上线的移动App。

例子3：混合型移动App

这里的混合型移动App，所指并不是是原生和HTML5的hybrid App，而是指一部分页面是本地的HTML，经过ajax与服务器交互，另外一部分页面是从服务器下行的mobile web页面。
1. 分别新建一个web项目和一个移动App项目
2. 在移动App里的某个html里经过<a href= 或者location.href=或者webview对象的loadURL方法指定mobile web的页面地址。
3. 在服务器下行的mobile web页面中，同样能够经过js调用本地HTML5Plus api对硬件层进行访问。相似微信JS SDK。

HTML5+ 应用架构

HTML5+ 规范 API 及demo示例

最新规范请参考http://www.html5plus.org/#specification
手机端体验各个API的实现效果，ios手机在Appstore搜索Hello H5+，Android手机下载地址。
在HBuilder中新建移动App，选Hello H5+，便可看到这个demo的源代码。

建议：在进行开发以前先把DCloud公司提供的实例都运行一遍，这样可以利用许多现有的功能模块，省去不少开发时间和成本。

开发环境HBuilder

HBuilder内置HTML5+ APP开发环境，提供一套完整的移动应用开发解决方案。内置HTML5+ API语法提示，提升开发效率；集成真机运行环境，方便开发后即时在真机上查看运行效果；集成应用云端打包系统，不用部署xcode和Android sdk就能够打包应用。使开发者只须要使用HTML五、Javascript、CSS技术就能够快速开发跨平台的移动应用。
下载地址：http://www.dcloud.io/

平台支持

• iOS 5.0及以上
• Android 2.3及以上