本文內(nèi)容銜接自Cordova 從安裝到創(chuàng)建項(xiàng)目到創(chuàng)建簡單自定義插件到添加使用插件總結(jié)(二)

• 說明
• 1.下載node.js
• 2.全局安裝cordova
• 3.創(chuàng)建項(xiàng)目
• 4.添加平臺(tái)
• 5.構(gòu)建iOS項(xiàng)目
• 6.簡單的插件開發(fā)
• 7.插件打包以及映射js代碼給前端開發(fā)人員使用
• 8.將插件包加入cordova項(xiàng)目并使用插件

7.插件打包以及映射js代碼給前端開發(fā)人員使用

再次聲明篓跛，我們應(yīng)該用plugman來創(chuàng)建插件甘改，而不應(yīng)該自己一個(gè)文件夾一個(gè)文件夾創(chuàng)建目錄結(jié)構(gòu)违霞。

①安裝plugman，如果已安裝可以跳過這一步

執(zhí)行以下命令行

sudo npm install -g plugman

安裝完成以后依然可以用以下命令查看版本季率，如果輸出版本說明安裝成功

plugman -v

②cd到我們想要?jiǎng)?chuàng)建插件的路徑，這里依然以桌面為例

cd ~/desktop

③用plugman創(chuàng)建插件
輸入以下指令

plugman create --name com.abc.name --plugin_id com.abc.name --plugin_version 0.0.1

執(zhí)行該命令行以后描沟，會(huì)在你cd到的路徑下創(chuàng)建一個(gè)名為--name參數(shù)的文件夾（該參數(shù)同時(shí)也是我們的默認(rèn)插件名）飒泻，該文件夾就是我們的插件包，他會(huì)自動(dòng)的為我們創(chuàng)建插件包內(nèi)的目錄結(jié)構(gòu)吏廉。插件的id就是--plugin_id的參數(shù)泞遗，插件版本就是--plugin_version的參數(shù)。效果如下：

7.png

plugin.xml：是配置iOS(及其他)平臺(tái)信息的配置文件席覆，這是一個(gè)非常重要的文件史辙，在js中能否調(diào)用到插件中的原生方法就需要看這個(gè)文件中是否配置正確。

src文件夾：里面放置的是各個(gè)平臺(tái)的類文件以及一些lib庫佩伤，但是需要注意的是聊倔，目前插件尚未添加任何平臺(tái)，所以該文件夾下面是空的生巡。在下一步中我們會(huì)用命令行為插件添加平臺(tái)耙蔑，然后會(huì)多出一個(gè)ios文件夾來。我們之前寫的插件OC代碼應(yīng)該放在這個(gè)ios文件夾內(nèi)孤荣。其他如果有依賴的第三方庫或者bundle等等也是放在這個(gè)ios文件夾內(nèi)甸陌。

www文件夾：這個(gè)文件夾里面默認(rèn)就有一個(gè)js文件，是我們用指令創(chuàng)建插件自動(dòng)生成的盐股。這個(gè)js的主要作用就是映射原生方法钱豁，通過訪問該js內(nèi)的接口來調(diào)用src文件夾中不同平臺(tái)的原生方法。

④為生成的插件添加iOS平臺(tái)

先cd到我們的插件文件夾

cd com.abc.name

sudo plugman platform add -platform_name ios

然后你就會(huì)發(fā)現(xiàn)src文件夾下面多了一個(gè)ios文件夾遂庄，說明平臺(tái)添加成功寥院。此時(shí)ios文件夾下默認(rèn)會(huì)添加一個(gè).m文件（文件名是你之前創(chuàng)建插件的時(shí)候填的插件名），如果你同時(shí)打開這個(gè).m和www文件夾下自動(dòng)創(chuàng)建的.js文件做個(gè)對(duì)比涛目。就會(huì)發(fā)現(xiàn).m中的方法和.js中的方法是成對(duì)的秸谢，已經(jīng)做好了映射的，并且plugin.xml也是填寫好了相關(guān)配置的霹肝，這個(gè)大概算是官方例子吧估蹄。

在進(jìn)行下一步之前不妨來分析一下這個(gè)官方例子，可以加強(qiáng)下理解沫换，以后也就知道怎么做了臭蚁。也可以直接跳過，看下一步。

tips：如果沒有相關(guān)軟件垮兑，js文件和xml文件可以用Xcode直接打開冷尉，并且可以設(shè)置編碼方式（一般打開對(duì)應(yīng)格式的文件Xcode會(huì)自動(dòng)幫我們選好），該標(biāo)注的關(guān)鍵字都會(huì)標(biāo)注出來系枪。

9.png

plugin.xml：

<?xml version='1.0' encoding='utf-8'?>
<plugin id="com.abc.name" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">

    //插件名稱雀哨，可修改
    <name>com.abc.name</name>
    
    //www文件夾下js的配置,主要作用是用于能夠找到該js文件 
    //name是js文件名，src是js路徑
    //clobbers中的target是你的前端開發(fā)調(diào)用js時(shí)的對(duì)象名稱 
    //可以自定義該tag  
    <js-module name="com.abc.name" src="www/com.abc.name.js">
        <clobbers target="cordova.plugins.com.abc.name" />
    </js-module>
    
    //用指令添加平臺(tái)的好處私爷，會(huì)自動(dòng)創(chuàng)建對(duì)應(yīng)平臺(tái)的基礎(chǔ)配置
    //如果是自己創(chuàng)建ios文件夾不會(huì)有這一部分
    <platform name="ios">
    
        //這一部分應(yīng)該很眼熟
        //之前開發(fā)簡單插件的時(shí)候雾棺，做測試時(shí)在config.xml中添加過相似的東西
        //只不過現(xiàn)在插件要打包了，不是由我們?cè)赾onfig.xml中寫入對(duì)應(yīng)的東西
        //而是在這個(gè)配置文件里面寫好衬浑，到時(shí)候把插件添加到Cordova項(xiàng)目中
        //最后構(gòu)建項(xiàng)目Xcode的時(shí)候捌浩，Cordova會(huì)自動(dòng)注入相關(guān)代碼。
        <config-file parent="/*" target="config.xml">
        
            //js調(diào)用我們的類的時(shí)候創(chuàng)建的實(shí)例對(duì)象的名字工秩，可修改
            <feature name="com.abc.name">
                //該對(duì)象的類名
                <param name="ios-package" value="com.abc.name" />
            </feature>
            
        </config-file>
        
        //需要鏈接的相關(guān)文件路徑
        <source-file src="src/ios/com.abc.name.m" />
    </platform>
    
</plugin>

src/ios/com.abc.name.m

//要交互的類必須繼承自CDVPlugin
@interface com.abc.name : CDVPlugin {
  // Member variables go here.
}

//交互的方法參數(shù)必須是(CDVInvokedUrlCommand*)command;
- (void)coolMethod:(CDVInvokedUrlCommand*)command;
@end

@implementation com.abc.name

- (void)coolMethod:(CDVInvokedUrlCommand*)command
{
    //給js的回調(diào)內(nèi)容
    CDVPluginResult* pluginResult = nil;尸饺。
    
    //獲取js傳遞過來的參數(shù)，傳過來的是個(gè)數(shù)組拓诸。
    //之前說過可以跟前端人員自由商量侵佃，按需要取來用。
    NSString* echo = [command.arguments objectAtIndex:0];

    if (echo != nil && [echo length] > 0) {
    
        //創(chuàng)建回傳一個(gè)字符串的成功回調(diào)
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
    } else {
    
        //創(chuàng)建失敗回調(diào)
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
    }
    
    //向js發(fā)送回調(diào)奠支。
    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}

@end

www文件夾下com.abc.name.js文件

var exec = require('cordova/exec');

//arg0 是傳遞的數(shù)據(jù) success error 是回調(diào)方法

//com.abc.name是plugin.xml中
//與config.xml配置部分<feature name="com.abc.name">
//name對(duì)應(yīng)的 
    
//函數(shù)外部的exports.coolMethod這個(gè)coolMethod表示之后js調(diào)用的方法叫collMethod
//這個(gè)地方的名字可以隨意寫馋辈，只是js中調(diào)用的是這個(gè)地方的名字 

//函數(shù)內(nèi)部的'coolMethod'這個(gè)coolMethod表示這個(gè)js方法映射的是原生方法的coolMethod
//這個(gè)地方的名字必須與我們?cè)贠C中寫的方法名保持一致否則無法正常調(diào)用
exports.coolMethod = function (arg0, success, error) {
    exec(success, error, 'com.abc.name', 'coolMethod', [arg0]);
};

結(jié)合這個(gè)例子的配置文件，最后導(dǎo)入插件后在js中調(diào)用就是

var success = function(e){  
     alert(e);  
 }  
 var error = function(e){  
     alert(e);  
 }  
 cordova.plugins.com.abc.name.coolMethod("Hello",success,error);  

⑤將之前在測試項(xiàng)目中寫的OC插件代碼放入插件包中并刪除自動(dòng)生成的.m

8.png

⑥修改plugin.xml配置文件

在改配置文件之前倍谜，為了能更直觀的對(duì)比下之前的默認(rèn)配置文件迈螟，有個(gè)形象的理解，可以把www/com.abc.name.js的名字改一下尔崔。這里把名字改成myJs答毫，于是路徑變?yōu)?code>www/myJs.js。

<?xml version='1.0' encoding='utf-8'?>
<plugin id="com.abc.name" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    
    <name>com.abc.name</name>
    
    <js-module name="myJs" src="www/myJs.js">
        <clobbers target="myPlugin" />
    </js-module>
    
    <platform name="ios">
        
        <config-file parent="/*" target="config.xml">
            
            <feature name="myPluginOCModle">
                <param name="ios-package" value="MyTestClass" />
            </feature>
            
        </config-file>
        
        //注意這里的標(biāo)簽不一樣
        <header-file src="src/ios/MyTestClass.h" />
        <source-file src="src/ios/MyTestClass.m" />
        
    </platform>
</plugin>

⑦修改myJs映射函數(shù)季春。

var exec = require('cordova/exec');

//這個(gè)hehehe函數(shù)名必然不規(guī)范洗搂，只是為了等下js調(diào)用的時(shí)候有個(gè)詭異的函數(shù)名好識(shí)別
//并且與OC原生方法名區(qū)分開，便于理解载弄。
exports.hehehe = function (arg0, success, error) {
    exec(success, error, 'myPluginOCModle', 'ocPresentViewControllerWithCommand', [arg0]);
};

現(xiàn)在打包就已經(jīng)完成了耘拇，所有的配置都避免了重復(fù)名稱的出現(xiàn)，以便于理解宇攻。

⑧還差最后一步不然到時(shí)候添加插件會(huì)報(bào)錯(cuò)CordovaError: Invalid Plugin!.....needs a valid package.json

在終端進(jìn)入插件根目錄

cd /Users/xxx/Desktop/com.abc.name

然后執(zhí)行

plugman createpackagejson .

會(huì)提示你填寫信息惫叛，有需要就填，不填就一直回車逞刷，最后輸入yes回車就行

8.將插件包加入cordova項(xiàng)目并使用插件

之前講過我們?cè)跇?gòu)建出來的項(xiàng)目里面寫插件相當(dāng)于寫Demo嘉涌，正式開發(fā)的時(shí)候不應(yīng)該那樣妻熊，下面講講正常流程。
說是整個(gè)流程仑最，其實(shí)與iOS相關(guān)的還是前面插件打包為止的部分扔役。接下來的內(nèi)容是為了梳理整個(gè)流程，并且也為了檢測剛才寫的插件是否能正常運(yùn)行警医。

①新建項(xiàng)目厅目，模擬正常開發(fā)的cordova項(xiàng)目

cd ~/desktop
sudo cordova create cordovaTest com.example.cordovatest cordovaTest

②進(jìn)入項(xiàng)目路徑

cd /Users/XXX/Desktop/cordovaTest

③給cordova項(xiàng)目添加插件
地址的話就是我們剛才創(chuàng)建的自定義插件地址，直接把文件夾拖到終端即可

sudo cordova plugin add /Users/XXX/Desktop/com.abc.name

④給項(xiàng)目添加平臺(tái)

sudo cordova platform add ios --save

⑤進(jìn)行前端開發(fā)

這一步本應(yīng)該交由前端人員進(jìn)行法严，在這里為了對(duì)整個(gè)流程有個(gè)認(rèn)識(shí)我們可以充當(dāng)前端開發(fā)，進(jìn)行代碼的編寫葫笼。
打開項(xiàng)目目錄下www/index.html文件(可以用前端開發(fā)軟件打開www文件夾深啤，也可以用Xcode直接打開index.html，有可能需要修改讀寫權(quán)限路星。按照之前的方法修改即可溯街。)
將原本的代碼替換為下面的代碼

<!DOCTYPE html>
<html>
    <head>
        <title>AMAlert</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
            <script type="text/javascript" charset="utf-8">

            function presentViewController() {
                //注意這里與之前有什么不同
                //如果之前配置不是很明白的到了這一步可以反過來推測一下前面配置和這里的關(guān)系
                //注意此處的參數(shù)順序，要與之前寫的映射js的參數(shù)順序一致
                myPlugin.hehehe("Hey,I'm JS!",presentSuccess,presentFail);
            }
            
            function presentSuccess(msg) {
                alert(msg);
            }
            
            function presentFail(msg) {
                alert('調(diào)用OC失敗: ' + msg);
            }
            </script>
            </head>
    
    <body style="padding-top:50px">
        <button style="font-size:17px;" onclick="presentViewController();">調(diào)用OC插件</button> <br>
    </body>
</html>

⑥前端開發(fā)完成洋丐，構(gòu)建iOS的Xcode項(xiàng)目呈昔。

保證終端目前路徑是項(xiàng)目根目錄

sudo cordova build ios

構(gòu)建Xcode項(xiàng)目成功后可以打開項(xiàng)目看看與之前的插件Demo項(xiàng)目有什么不同
1.之前我們手動(dòng)修改的index.html的內(nèi)容已經(jīng)存在，現(xiàn)在不管你如何重新構(gòu)建項(xiàng)目這部分內(nèi)容都不會(huì)再被覆蓋掉友绝。
2.Staging/config.xml里面已經(jīng)為我們添加好了依賴關(guān)系堤尾。
3.Plugins文件下插件oc代碼已經(jīng)自動(dòng)為我們添加進(jìn)來了。

⑦運(yùn)行項(xiàng)目查看效果

10.gif

⑧打包APP上架什么的就不講了

至此迁客，Cordova從安裝到創(chuàng)建項(xiàng)目到創(chuàng)建簡單自定義插件到添加使用插件的流程就結(jié)束了

如果想看更多plugin.xml配置文件的寫法郭宝，可以看這篇文檔iOS Cordova插件開發(fā)（一）之plugin.xml文件編寫，里面包含了很多種類資源的引用配置編寫例子掷漱。