- 首先打开命令行敲上
$ sudo npm install -g phonegap然后回车 - (推荐)输入密码后,PhoneGap就会自动安装.
也可以到http://phonegap.com/install/ 这里来下载最新的PhoneGap2.9.1(虽然我下载后也搞不懂,运行过程序后没发觉有明显变化) - 然后我们就可以来新建项目了
- 新建项目也有两种方法,第一种是按照官网上的
$ phonegap create myFirstHybird
$ cd myFirstHybird
$ phonegap run ios
-
敲完命令以后就可以发现myFirstHybird目录下有这些文件了,可以看到platforms目录下有ios然后有个helloWord的工程,双击运行就ok了.
目录
运行的程序
- 这种方法有个不好的地方就是你的工程名永远都是helloWord
- 下面来介绍第二种方法
1.首先要安装cordovasudo npm install -g cordova
2.在想要新建项目的文件夹中打开命令行,敲入cordova create theSecond com.ozx theSecondProtheSecond文件夹名,com.ozx:Bundle Identifier theSecondPro:工程名
3.按回车以后,就回自动生成文件,但是没有ios代码,platforms还是空的，现在我们来为它添加ios平台代码，在终端输入：cordova platform add ios, 打开工程就有
项目
4.运行,运行效果与方法一相同
那么如何修改js中的代码呢,我们现在开始来探讨.
点开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上发送过来的请求了.
而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中显示新添加的内容了.
网友评论