一、关于phonegap
是什么？honegap是一个利用HTML5去开发App的框架。可以为安卓、iOS、WP、黑莓、火狐等移动操作系统。采用HTML5来编写交互界面。
优点：是编写一次可以编译到各种移动平台上，大大为公司节省了开发周期。
缺点：性能不如原生的好，只能做一些简单的APP，比如介绍公司的那种，或者网站客户端。要是做游戏还是算了吧。PhoneGap集成多了个平台.程序的载入和UI界面的反应都比原生的程序慢，UI反应延时——这是个致命伤 .它实际上还是在展示Web页面，所以载入、页面刷新等肯定是需要一定时间的。 这在用户体验上来说PhoneGAp依然无法替代原生应用程序。另外，html、javascript、css都运行在各平台内置浏览器webkit之上，受到webkit处理速度影响。目前来说运行速度比较慢，性能较差。
二、开始安装
1.安装GIT:http://www.git-scm.com/
2.安装NODEJS：http://nodejs.org/
最新版6.3.0版本都自带npm安装环境
3.进入终端命令行使用npm安装cordova 代码如下：
sudo npm install -g cordova
说明：
Cordova是PhoneGap贡献给Apache后的开源项目，是从PhoneGap中抽离出的核心代码，是驱动PhoneGap的核心引擎。
4.进入你要创建的项目目录，然后创建phonegap项目
cordova create hello com.example.hello HelloWorld
说明：
hello文件夹名
com.example.hello:Bundle Identifier
HelloWorld:工程名
5.进入刚才已经创建的项目中，这时候可以添加ios平台,无先后顺序。
$ cd hello
$ cordova platform add ios
用xcode打开工程，
工程目录：
运行就可以看到效果了
三、查看效果
下载安装PhoneGap for mac
点击+号，选择打开已经有的工程，就是上面创建的hello
随便点开一个网址，也就能看到了
电脑打开http://192.168.0.207:3000/
或者同一wifi下的手机打开，都可以看到helloworld的界面
四、已有项目集成
原有的项目叫testPhoneGap。
-
打开testPhoneGap文件目录
将刚才上面hello目录的config.xml拷贝过去
进入platforms/ios，将cordova、www、cordovaLib文件夹全部拷贝过去
打开testPhoneGap项目，Add Files添加CordovaLib.xcodeproj 和 config.xml工程目录如下：
0F9C23F5-54DC-493E-B069-C0DF8A56A964.png
选择主项目，进入Build Phases，在Target Dependencies 和Link Binary 中添加Cordova
点击buiild stetings 的 other Liner flags 添加 -all_load和-Objc
编译成功
添加资源文件，把www文件夹拖进去工程， 不要直接Add Files添加， 并且Added folders要选择folder references，这样添加进去的文件夹是蓝色的，一定要是蓝色的，而不是黄色的。
ViewController的Classes属性关联到CDVViewController
运行就又可以显示helloworld效果了。
使用代码的话，就导入#import "Cordova/CDVViewController.h"
使用CDVViewController
五、真正开始使用
开始简单使用，实现js和native(原生)代码之间的通信。
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src=\'#\'" /span>
</script>
<script type="text/javascript" charset="utf-8" src=\'#\'" /span>
</script>
<script type="text/javascript" charset="UTF-8">
function loadURL(url) {
var iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", url);
iFrame.setAttribute("style", "display:none;");
iFrame.setAttribute("height", "0px");
iFrame.setAttribute("width", "0px");
iFrame.setAttribute("frameborder", "0");
document.body.appendChild(iFrame);
iFrame.parentNode.removeChild(iFrame);
iFrame = null;
}
function check() {
loadURL(cj:2527");
}
</script>
</head>
<body>
<br/>
<br/>
<br/>
<input type="button" value="add" onclick="check();" />
</body>
</html>
ViewController.m中
#import "ViewController.h"
@interface ViewController ()<UIWebViewDelegate>
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
}
-(BOOL)webView:(nonnull UIWebView *)webView shouldStartLoadWithRequest:(nonnull NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSURL *url = [request URL];
if ([[url scheme] isEqualToString:@"cj"]) {
// 在这里做 js 调 native 的事情
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"test" message:[url absoluteString] preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"好的"style:UIAlertActionStyleDefault handler:nil];
[alertController addAction:okAction];
[self presentViewController:alertController animated:YES completion:nil];
// 做完之后用如下方法调回 js
[webView stringByEvaluatingJavaScriptFromString:@"alert('hello world!')"];
return NO;
}
return YES;
}
@end
六、附录
PhoneGap的API文档地址：
http://www.phonegapcn.com/docs/zh/cn/index.html
添加插件命令 cordova plugin add *
设备信息插件：
cordova plugin add org.apache.cordova.device
网络连接插件：
cordova plugin add org.apache.cordova.network-information
cordova plugin add org.apache.cordova.battery-status
陀螺仪：
cordova plugin add org.apache.cordova.device-motion
cordova plugin add org.apache.cordova.device-orientation
cordova plugin add org.apache.cordova.geolocation
摄像头拍照录制等：
cordova plugin add org.apache.cordova.camera
cordova plugin add org.apache.cordova.media-capture
cordova plugin add org.apache.cordova.media
访问文件：
cordova plugin add org.apache.cordova.file
cordova plugin add org.apache.cordova.file-transfer
提醒：
cordova plugin add org.apache.cordova.dialogs
cordova plugin add org.apache.cordova.vibration
联系人：
cordova plugin add org.apache.cordova.contacts
全球化：
cordova plugin add org.apache.cordova.globalization
闪屏（启动画面）：
cordova plugin add org.apache.cordova.splashscreen
打开新的浏览器 (InAppBrowser):
cordova plugin add org.apache.cordova.inappbrowser
调试主控制台：
cordova plugin add org.apache.cordova.console
终端切换到工程目录，例如test目录下，输入
cordova plugin add cordova-plugin-camera
就可以成功添加一个插件了。
