冲浪网站优化 / Products Center

HTML5 Plus 应用概述

HTML5 Plus 规范

通过HTML5 开发移动App 时，会发现HTML5 很多能力不具备。为弥补HTML5 能力的不足，在W3C 中国的指导下成立了www.html5plus.org 组织，推出HTML5+规范。HTML5+规范是一个开放规范，允许三方浏览器厂商或其他手机runtime 制造商实现。HTML5+扩展了JavaScript 对象plus，使得js 可以调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。

HBuilder 的手机原生能力调用分2 个层面：
a) 跨手机平台的能力调用都在HTML5+规范里，比如二维码、语音输入，使用plus.barcode 和plus.speech。编写一次，可跨平台运行。
b) 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 等原生安装包，在手机客户端运行。
当然这些移动App 里某些页面也可以继续从服务器端以网页方式下行。所以mobile web，在HBuilder 里新建项目时，属于web 项目。不要放置到移动App 项目下。mobile web 项目也不能真机联调和打包。
举几个例子。
例1：一个mobile web 项目，想打包成移动App。
a) 在HBuilder 里新建一个web 项目，把mobile web 代码放进去。
b) 在HBuilder 里新建移动App
c) 在新建的移动App 下找到manifest.json，将其中的入口页面配置为mobile web 的网
络地址。
d) 然后点发行打包，就得到一个移动App 的安装包。除了可发行到Appstore 和桌面有个快捷方式外，与浏览器的体验不会有其他区别。
e) 另外其实mobile web 的代码，也可以判断自己运行的环境，如果UA 里包含“Html5Plus”，也可以写plus 对象来调用原生能力。

例子2：正规的移动App（没有网页进度条）
a) 在HBuilder 里新建移动App 项目
b) 在移动App 里编写html、Js、css 文件，本地js 通过ajax 方式请求服务器数据，通
过plus.net 对象避开跨域限制。
c) 移动App 里的js 可以通过plus 对象调用手机原生能力
d) 编写好的移动App 点打包变成安装包。
例子3：混合型移动App
这里的混合型移动App，所指并非是原生和HTML5 的hybrid App，而是指一部分页面是本地的HTML，通过ajax 与服务器交互，另一部分页面是从服务器下行的mobileweb 页面。
a) 分别新建一个web 项目和一个移动App 项目
b) 在移动App 里的某个html 里通过<a href= 或者location.href=指定mobile web 的页面地址。

详细下载：HTML5plus 移动App 开发入门。