HTML5Plus应用开发指南.pdf

DCloud.io 1 / 25 HTML5plus移动 App开发入门 （v0.3） 更新时间：2014年 8月 4日 DCloud.io 2 / 25 HTML5 Plus应用概述 HTML5 Plus规范 通过 HTML5开发移动 App时，会发现 HTML5很多能力不具备。为弥补 HTML5能力 的不足，在W3C中国的指导下成立了 组织，推出 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对象的方法 属性就可以了。 Native.js的详细教程可以参考：/HTML5%2B应用开发 -Native.js.pdf 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 里包含 DCloud.io 3 / 25 “Html5Plus”，也可以写 plus对象来调用原生能力。 例子 2：正规的移动 App（没有网页进度条） a) 在 HBuilder里新建移动 App项目 b) 在移动 App里编写 html、Js、css文件，本地 js通过 ajax方式请求服务器数据，通 过 对象避开跨域限制。 c) 移动 App里的 js可以通过 plus对象调用手机原生能力 d) 编写好的移动 App点打包变成安装包。 例子 3：混合型移动 App 这里的混合型移动 App，所指并非是原生和 HTML5的 hybrid App，而是指一部分 页面是本地的 HTML，通过 ajax与服务器交互，另一部分页面是从服务器下行的 mobile web页面。 a) 分别新建一个 web项目和一个移动 App项目 b) 在移动 App里的某个 html里通过a href= 或者 location.href=指定 mobile web的页 面地址。 HTML5+ 应用架构 HTML5+ 规范 API 及 demo示例 最新规范请参考 /#specification DCloud.io 4 / 25 手机端体验各个 API的实现效果，ios手机在 Appstore搜索 Hello H5+，Android手机下载 http://dcloud.io/helloh5/HelloH5.apk。 在 HBuilder