那些年坑过我的cordova,痛并前进着
cordova是用来构建跨平台移动应用的开源框架,之前是叫做phonegap,adobe收购phonegap后的核心东西就是cordova。
网上看了好多有关cordova 的资料,都过于老了,不能用,cordova过于更新太快,就连自己最新的官方文档也跟不上,看它的文档也是一脚一个坑。真是那句话“恨一个人,让他去学phonegap吧”。
历经脚踩无数坑,一路要死要活滴爬了下来。真是自己走的路,就算哭着也要走完。。。。为了不让可怜的码农不在被这坑爹的cordova上断腿断脚的,多活几年,在这,鄙人用自己血一般的教训总结下cordova的开发。
cordova请用终端命令行操作,安装cordova前先安装,git和Node.js,然后输入如下命令:
$
sudo npm install -g cordova
要等一会。有时候还一直下不下来,我曾经下了不止50多次这个命令!!!奇迹的有一次安装上了。。目前我安卓同事死活就是安装不上,竟然手动去其他网站找了个2.9版本的。。这特码都5.1.1版本了。他还用2.9.。
下载安装好cordova后就可以创建项目了:先cd到项目存放的文件目录,然后如下命令:
$
cordova create hello com.example.hello HelloWorld
hello是项目文件加名字,com.example.hello
是项目的唯一标识,HelloWorld
是工程名字。
然后再cd 到您刚刚创建的项目文件hello
文件夹下,如:
$ cd hello
然后再:
$ cordova platform add ios
$ cordova build ios
现在就创建好了iOS平台下的项目了。
你现在就可以把你们项目的资源文件复制放到Staging下的www目录了,覆盖原本的js,img,css文件夹,和html文件。
要是想用远程服务器的链接,本地不想放一点代码,直接来个套壳app,那就在Staging 文件夹下的config.xml文件中 <content src="index.html" />便签中把src="index.html"
改成自己的项目地址:
比如src="http://m.baidu.com"
就好了。只是这样方式用户体验太差,加载过慢。。也上不了AppStore。可就是有些公司非要作死,比如我们公司。。
/-----------------------------华丽的分割线-----------
IOS平台添加cordova已有插件方法:
cordova plugin add cordova-plugin-device
其中cordova-plugin-device
是对应插件,现在都是写成cordova-plugin-xxxx了。用以前的方法会提示让你用这个命令了。
/-----------------------------华丽的分割线-----------
IOS平台添加自己定于插件方法步骤:
在Staging文件夹下的config.xml中最下面的</widget>前添加如下feature标签
<feature name="Maptest">
<param name="ios-package" value="CDMap" />
</feature>
其中 <feature name="Maptest">中的Maptest是自己的插件名字唯一标示符,自由定义。
name="ios-package" 这个是固定写法
value="CDMap"中的CDMap是你要自定义的OC类里的名字。这个要和你自定义的OC类里的名字一样。
然后自己写一个js方法:
//----------------------地图-------------------------------------------------
var HelloPlugin = {
callNativeFunction: function (success, fail, resultType) {
return Cordova.exec( success, fail, "Maptest", "Map", [resultType]);
}
};
function callNativePlugin( returnSuccess ) {
HelloPlugin.callNativeFunction(
nativePluginResultHandler,
nativePluginErrorHandler,
returnSuccess
);
}
function nativePluginResultHandler (result) {
//alert("SUCCESS: \r\n"+result );
}
function nativePluginErrorHandler (error) {
alert("ERROR: \r\n"+error );
}
注意以上写法。中Cordova.exec( success, fail, "Maptest", "Map", [resultType]);这个函数方法,这个就是Cordova里js调用原生代码的关键函数。
一个5个参数在里面,suucess,是成功回调函数,fail是失败回调函数,"Maptest"就是你自己写的插件名字唯一标示符,要和自己在其中 config.xml中的<feature name="Maptest">中写的一样。
然后就是这个"Map",这个就是你自己在插件类里要调用的方法名字了。也以一定要和自己在类里的名字一样。
最后就是这个[resultType]了,这个[]里可以写多个多种数据,string,array,int等等,比如:[2,"我是字符串",]等 。这个就是从js 端传递给oc的信息了。
Cordova通过这个函数调用标示为"Maptest"的OC名字为CDMap这个类,里的Map:这个方法。
然后自己创建一个自定名叫CDMap的这个类这里,写一个方法:- (void)Map:(CDVInvokedUrlCommand*)command;
在m文件里实现如下:
- (void)Map:(CDVInvokedUrlCommand*)command
{
NSLog(@"成功调用了本地代码");
CDVPluginResult* pluginResult = nil;
NSString* echo = [command.arguments objectAtIndex:0];
if (echo != nil && [echo length] > 0) {
NSLog(@"成功echo是%@",echo);
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
} else {
NSLog(@"错误pluginResult");
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
}
[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
NSLog(@"ID是%@",command.callbackId);
}
其中[command.arguments objectAtIndex:0];这个就是从JS端传递过来的信息;
通过如下的方法回传信息给js端:
+ (CDVPluginResult*)resultWithStatus:(CDVCommandStatus)statusOrdinal messageAs...
例如本例中的:
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];通过这个方法把echo回传给js端成功毁掉函数
pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];通过这个方法回传给js端失败函数,但是没有传递值。只是调用回调。
最后通过[self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];最后发送出去。
-----------------------华丽的分割线------------------
还有关于在已有项目中集成cordova的,网上看到一篇比较新的文章,感觉不错,附上链接:
http://blog.csdn.net/jiang314/article/details/47283919
最后放上cordova官方网址,有问题可以上去看看。。
http://cordova.apache.org/