一、關(guān)于phonegap
是什么？honegap是一個利用HTML5去開發(fā)App的框架?？梢詾榘沧俊OS、WP、黑莓、火狐等移動操作系統(tǒng)。采用HTML5來編寫交互界面。
優(yōu)點：是編寫一次可以編譯到各種移動平臺上，大大為公司節(jié)省了開發(fā)周期。
缺點：性能不如原生的好，只能做一些簡單的APP，比如介紹公司的那種，或者網(wǎng)站客戶端。要是做游戲還是算了吧。PhoneGap集成多了個平臺.程序的載入和UI界面的反應(yīng)都比原生的程序慢，UI反應(yīng)延時——這是個致命傷 .它實際上還是在展示W(wǎng)eb頁面，所以載入、頁面刷新等肯定是需要一定時間的。 這在用戶體驗上來說PhoneGAp依然無法替代原生應(yīng)用程序。另外，html、javascript、css都運行在各平臺內(nèi)置瀏覽器webkit之上，受到webkit處理速度影響。目前來說運行速度比較慢，性能較差。
二、開始安裝
1.安裝GIT:http://www.git-scm.com/
2.安裝NODEJS：http://nodejs.org/
最新版6.3.0版本都自帶npm安裝環(huán)境
3.進入終端命令行使用npm安裝cordova 代碼如下：
sudo npm install -g cordova
說明：
Cordova是PhoneGap貢獻給Apache后的開源項目，是從PhoneGap中抽離出的核心代碼，是驅(qū)動PhoneGap的核心引擎。
4.進入你要創(chuàng)建的項目目錄，然后創(chuàng)建phonegap項目
cordova create hello com.example.hello HelloWorld
說明：
hello文件夾名
com.example.hello:Bundle Identifier
HelloWorld:工程名
5.進入剛才已經(jīng)創(chuàng)建的項目中，這時候可以添加ios平臺,無先后順序。
$ cd hello
$ cordova platform add ios
用xcode打開工程，
工程目錄：
運行就可以看到效果了
三、查看效果
下載安裝PhoneGap for mac
點擊+號，選擇打開已經(jīng)有的工程，就是上面創(chuàng)建的hello
隨便點開一個網(wǎng)址，也就能看到了
電腦打開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屬性關(guān)聯(lián)到CDVViewController
運行就又可以顯示helloworld效果了。
使用代碼的話，就導(dǎo)入#import "Cordova/CDVViewController.h"
使用CDVViewController
五、真正開始使用
開始簡單使用，實現(xiàn)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 調(diào) 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];
// 做完之后用如下方法調(diào)回 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 *
設(shè)備信息插件：
cordova plugin add org.apache.cordova.device
網(wǎng)絡(luò)連接插件：
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
聯(lián)系人：
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
調(diào)試主控制臺：
cordova plugin add org.apache.cordova.console
終端切換到工程目錄，例如test目錄下，輸入
cordova plugin add cordova-plugin-camera
就可以成功添加一個插件了。
