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