那些年坑过我的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/

 
 
 
 
 
 
posted @ 2015-08-08 15:21  沧海小鱼儿  阅读(2496)  评论(6编辑  收藏  举报