跨平台混合式App开发

PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以调用。

为何要使用混合式开发？

要说为什么使用Hybrid App 【混合式开发】，就要先了解什么是Native App【原生程序】， Web App【网站程序】。

Native App

是专门针对某一类移动设备而生的，它们都是被直接安装到设备里，而用户一般也是通过应用商店来获取应用 。 如安装在 iOS 和 Android 设备上的客户端。

Web App

一般说来，移动Web App都是都是需要用到网络的，它们利用设备上的浏览器(比如iPhone的Safari)来运行，而且它们不需要在设备上下载后安装。

Native App

体验效果很好，但是有一个缺点，如果新增或更改某个功能的话，需要频繁的升级，导致版本维护很难。

Web App

如果升级一个功能，只需要后台更新即可，不需要用户端做什么事情，但是它的缺点是权限很低，不能操作用户端设备的信息。

Hybrid App

是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native App，但只有一个WebView，里面访问的是一个Web App，如掌上百度和淘宝客户端Android版，走的也是Hybrid App的路线，不过掌上百度里面封装的不是WebView，而是自己的浏览内核，所以体验上更像客户端，更高效。

结论

“Hybrid App同时使用网页语言与程序语言开发，通过应用商店区分移动操作系统分发，用户需要安装使用的移动应用”。总体特性更接近Native App但是和Web App区别较大。只是因为同时使用了网页语言编码，所以开发成本和难度比Native App要小很多。因此说，Hybrid App兼具了Native App的所有优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。

项目开发

开发中用到的关键技术

AngularJS：js框架，用于开发网站应用，详细的请看之前写过的文章。

PhoneGap：用于js和客户端交互，详细原理请看 phonegap 框架详解

调试流程及工具（安卓系统）

初步调试，适用于功能开发阶段，调试工具：Chrome浏览器

查看AngularJS数据，工具：Chrome插件 -> AngularJS Batarang

集成到客户端中调试，使用Chrome自带功能，chrome://inspect ，此功能需要FQ，且安卓系统版本大于4.4

低版本兼容性问题，使用weiner库

问题解答

问题： 在chrome://inspect中不显示我连接的手机

原因： 检查一下，手机是否连接成功，是否已经安装了adb调试工具，是否开启开发者模式，启用usb调试功能 。具体调试操作可以看 移动端Web开发调试之Chrome远程调试(Remote Debugging)

问题： 怎么开启usb调试功能

原因： 原版手机系统请查看 如何打开USB调试模式，如果是华为或小米 需要先点击版本号，开启“开发者模式”，每个品牌的手机，开发者模式选项的位置都不相同，如果找不到，请自行百度【百度关键字：小米 开启usb调试模式】

问题： 使用chrome://inspect点击inspect按钮，页面出现空白

原因： 第一次使用此功能时，谷歌浏览器会向服务器发送请求，获取相应数据，由于请求被墙了，导致数据加载不了，导致空白页面，怎么解决，你懂得。

问题： 使用chrome://inspect有时调试不了

原因： 只有debug版本才能调试，看你打的包是不是release版本的apk。

问题： js添加了PhoneGap之后，和客户端交互的功能没有响应

原因： 一、确认代码确实走到调用客户端的代码那里并且执行了相关代码，二、看一下是否是js写的有问题，如本地客户端的函数名和js调用的函数名不同，三、是否是客户端的权限没有配置

问题： 集成了PhoneGap后，如果程序立即执行，客户端交互程序有时会直接报错

原因： 这是因为你在PhoneGap还没初始化好的时候就调用PhoneGap插件了，解决此问题需要，把 改为 并且需要在js修改为手动初始化AngularJS

///// deviceready之后在开始执行angular
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    var domElement = document.getElementById('mainApp');
    angular.bootstrap(domElement, ["mainApp"]);
}

问题： 修改成 deviceready 之后，在页面中就调试不了了，怎么办

原因： 在网页中调试时，你把ng-app="mainApp"加上就可以了

问题： 程序员哥哥，再问最后一个问题，你为什么那么帅，那么有气质呢

原因： 很多人也都说我漂亮的不像实力派，我只想说：当才华与美貌并存的时候，我希望你看重的是才华！

程序员是不限与一种技术的，也不是只就熟悉一种语言的，现在不是流行全端工程师吗，我觉得应该不断的学习新的技术，不断突破自己，才能让自己变得更加优秀。