对hbuilder的学习的总结1

原文地址：http://blog.csdn.net/wangyuchun_799/article/details/37692845

一、html5+

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

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

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

a)   跨手机平台的能力调用都在 HTML5+ 规范里，比如二维码、语音输入，使用

plus.barcode 和 plus.speech。编写一次，可跨平台运行。

b)   JS Bridge是另一项创新技术，通过 js 可以直接调 ios 和 android 的原生 API，这部 分就不再跨平台，比如调 ios game center，或在 android 手机桌面创建快捷方式。 JSB 的用法是，var obj= plus.android.import("android.content.Intent");，将一个原生对 象 android.content.Intent 映射为 js 对象 obj，然后在 js 里操作 obj对象的方法属性就可以了。

二、HTML5+ App

使用 HTML5+开发的移动 App 并非 mobileweb 页面。这是新手最容易混淆的地方。 mobileweb 的文件存放在 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，将其中的入口页面配置为 mobileweb 的网 络地址。

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 的 hybridApp，而是指一部分 页面是本地的 HTML，通过 ajax 与服务器交互，另一部分页面是从服务器下行的 mobileweb页面。

a)   分别新建一个 web 项目和一个移动 App 项目

b)   在移动 App 里的某个 html 里通过 三、开发环境  HBuilder

HBuilder 内置 HTML5+ APP 开发环境，提供一套完整的移动应用开发解决方案。内置HTML5+ API 语法提示，提高开发效率；集成真机运行环境，方便开发后即时在真机上查看 运行效果；集成应用云端打包系统，不用部署 xcode和 Android sdk 就可以打包应用。使开 发者只需要使用 HTML5、CSS、CSS 技术就可以快速开发跨平台的移动应用。