- 首先打開命令行敲上
$ sudo npm install -g phonegap
然后回車 - (推薦)輸入密碼后,PhoneGap就會自動安裝.
也可以到http://phonegap.com/install/ 這里來下載最新的PhoneGap2.9.1(雖然我下載后也搞不懂,運行過程序后沒發(fā)覺有明顯變化) - 然后我們就可以來新建項目了
- 新建項目也有兩種方法,第一種是按照官網(wǎng)上的
$ phonegap create myFirstHybird
$ cd myFirstHybird
$ phonegap run ios
-
敲完命令以后就可以發(fā)現(xiàn)myFirstHybird目錄下有這些文件了,可以看到platforms目錄下有ios然后有個helloWord的工程,雙擊運行就ok了.
目錄
運行的程序 - 這種方法有個不好的地方就是你的工程名永遠都是helloWord
- 下面來介紹第二種方法
1.首先要安裝cordovasudo npm install -g cordova
2.在想要新建項目的文件夾中打開命令行,敲入cordova create theSecond com.ozx theSecondPro
theSecond文件夾名,com.ozx:Bundle Identifier theSecondPro:工程名
3.按回車以后,就回自動生成文件,但是沒有ios代碼,platforms還是空的舆床,現(xiàn)在我們來為它添加ios平臺代碼滤祖,在終端輸入:cordova platform add ios
, 打開工程就有
項目
4.運行,運行效果與方法一相同
那么如何修改js中的代碼呢,我們現(xiàn)在開始來探討.
點開Staging文件夾,對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("youdao:abc");
}
</script>
</head>
<body>
<br/>
<br/>
<br/>
<input type="button" value="add" onclick="check();" />
</body>
</html>
在CDVViewController.m文件中找到- (BOOL)webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
在其中添加
if ([[url scheme] isEqualToString:@"youdao"]) {
UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"test" message:[url absoluteString] delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil] ;
[alertView show];
return NO;
}
那么這樣native(oc)就可以處理js上發(fā)送過來的請求了.
而native如何注入js代碼呢
- (IBAction)add:(id)sender {
NSString * js = @" var p = document.createElement('p'); p.innerText = 'new Line';document.body.appendChild(p);";
[self.webView stringByEvaluatingJavaScriptFromString:js];
}
這樣就可以在webview中顯示新添加的內(nèi)容了.