Cordova創(chuàng)建和自定義插件使用方法

Cordova安裝

安裝Cordova命令行工具,通過下面步驟:
1.下載和安裝Node.js,安裝完成后在命令行中使用nodenpm冠绢。
2.(可選)下載和安裝git client如果你沒有囤躁。安裝成功后,你可以在命令行中使用git福铅。 這個(gè)命令行使用下載git倉庫中的資源萝毛。
3.安裝cordova模塊使用Nodejs的npm工具。cordova模塊會(huì)被npm工具自動(dòng)下載

  • 在OS X和Linux上:
    $ sudo npm install -g cordova

在OS X和Linux上, npm命令加上前綴sudo因?yàn)?code>cordova可能需要安裝在其他的受限制目錄比如 /usr/local/share滑黔。如果你使用可選工具nvm/nave或者具有安裝目錄的寫權(quán)限笆包,那么你可以省略sudo前綴。這里有更多提示 可用在使用 npm 沒有 sudo前綴時(shí)略荡,如果你想那么做庵佣。

  • 在Windows上:
    C:\>npm install -g cordova

-g標(biāo)志是告訴npm我們?nèi)职惭b cordova。否則我們將會(huì)安裝在當(dāng)前工作目錄的 node_modules子目錄汛兜。

安裝完成后巴粪,你應(yīng)該能夠在命令行中運(yùn)行cordova命令,在沒有任何參數(shù)的時(shí)候會(huì)打印一些幫助信息粥谬。

創(chuàng)建APP

首先我們創(chuàng)建一個(gè)HelloWorld項(xiàng)目添加ios平臺(tái)肛根。

$ cordova create 路徑 bundle ID 工程名字

$ cd 工程路徑

給你的App添加目標(biāo)平臺(tái)。我們將會(huì)添加iosandroid平臺(tái)帝嗡,并確保他們保存在了config.xml中:

$ cordova platform add ios --save
$ cordova platform add android --save

檢查你當(dāng)前平臺(tái)設(shè)置狀況:

$ cordova platform ls

創(chuàng)建自定義插件

  • 首先安裝plugman,cordova需要用它來創(chuàng)建插件,可使用node命令來安裝
$ npm install -g plugman
  • plugman安裝成功后就可以創(chuàng)建插件了,這里我們學(xué)習(xí)自定義一個(gè)Toast插件晶通,基本學(xué)會(huì)之后,大部分插件都是一個(gè)套路了哟玷。
$ plugman create --name [插件名] --plugin_id [插件id] --plugin_version [插件版本] 
$ plugman create --name Toast --plugin_id toast_plugin --plugin_version 1.0.0
$ cd Toast

  • 進(jìn)入Toast目錄下之后狮辽,我們添加插件支持的平臺(tái)
$ plugman platform add --platform_name android
$ plugman platform add --platform_name ios
  • 到這一步,基本整個(gè)插件就已經(jīng)完成了巢寡,但是你在項(xiàng)目中添加插件時(shí)會(huì)提示你創(chuàng)建package.json文件喉脖,而plugman沒有給我們創(chuàng)建這個(gè)的文件,所有就需要我們自己動(dòng)手去創(chuàng)建抑月,通過npm init 命令創(chuàng)建package.json 树叽,里面的參數(shù)從plugin.xml拿來使用就好,也可以一路回車,這樣一個(gè)插件就完成了谦絮。
"name": "toast",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"

安裝插件

$ cd 創(chuàng)建的工程文件路徑
$ cordova plugin add /Users/cordova/Toast

刪除插件

$ cordova plugin remove XXXXX(你的plugin_id)

查看所有插件

cordova plugin list
  • 打開創(chuàng)建出來的插件文件 打開plugin.xml
<?xml version='1.0' encoding='utf-8'?>
<plugin id="toast_plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
<!--    模塊名稱-->
    <name>Toast</name>
    <js-module name="Toast" src="www/Toast.js"><!--js中間件相對(duì)文件地址(www目錄下的那個(gè)js)-->
        <!--H5通過它調(diào)用js中間件方法(js調(diào)用方法的前綴)可自定義-->
        <clobbers target="cordova.plugins.Toast" />
    </js-module>
<!--    添加的iOS平臺(tái)-->
    <platform name="ios">
        <config-file parent="/*" target="config.xml">
            <feature name="Toast">
                <param name="ios-package" value="Toast" />
            </feature>
        </config-file>
        <source-file src="src/ios/Toast.m" />
    </platform>
</plugin>
  • 查看index.js文件
//showClick() 和html中按鈕點(diǎn)擊名一致
function showClick() {
    console.log("1");
    cordova.plugins.Toast.showT(onSuccess, onFail, "message");
}
function onSuccess(msg){
    alert(msg);
    
}
function onFail(msg) {
    alert(msg);
    
}
  • 在打開Toast.js
cordova.define("toast_plugin.Toast", function(require, exports, module) {
var exec = require('cordova/exec');
var device = function(){};
               //showT與js中action一致
               //device.prototype.方法名题诵,是對(duì)外部提供的方法
device.prototype.showT = function (success, error, arg0) {
/*
 *Toast文件名稱
 *showToast 文件中方法名稱
 *[arg0] 傳遞的數(shù)據(jù)
 */
               console.log("2");
exec(success, error, 'Toast', 'showToast', [arg0]);

}

               
//new一個(gè)device的類對(duì)象,并賦值給module.exports
var Toast = new device();
module.exports = Toast;
               

});
  • js調(diào)用原生代碼
CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:message];
        //持續(xù)發(fā)送通知在需要持續(xù)回調(diào)的時(shí)候使用
        [pluginResult setKeepCallbackAsBool:YES];
        
        
        [self.commandDelegate sendPluginResult:pluginResult callbackId:callbackID];
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末层皱,一起剝皮案震驚了整個(gè)濱河市性锭,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌叫胖,老刑警劉巖草冈,帶你破解...
    沈念sama閱讀 221,198評(píng)論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡怎棱,警方通過查閱死者的電腦和手機(jī)哩俭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來拳恋,“玉大人凡资,你說我怎么就攤上這事∽缪遥” “怎么了讳苦?”我有些...
    開封第一講書人閱讀 167,643評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵带膜,是天一觀的道長(zhǎng)吩谦。 經(jīng)常有香客問我,道長(zhǎng)膝藕,這世上最難降的妖魔是什么式廷? 我笑而不...
    開封第一講書人閱讀 59,495評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮芭挽,結(jié)果婚禮上滑废,老公的妹妹穿的比我還像新娘。我一直安慰自己袜爪,他們只是感情好蠕趁,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,502評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著辛馆,像睡著了一般俺陋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上昙篙,一...
    開封第一講書人閱讀 52,156評(píng)論 1 308
  • 那天腊状,我揣著相機(jī)與錄音,去河邊找鬼苔可。 笑死缴挖,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的焚辅。 我是一名探鬼主播映屋,決...
    沈念sama閱讀 40,743評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼同蜻!你這毒婦竟也來了棚点?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,659評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤埃仪,失蹤者是張志新(化名)和其女友劉穎乙濒,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,200評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡颁股,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,282評(píng)論 3 340
  • 正文 我和宋清朗相戀三年么库,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片甘有。...
    茶點(diǎn)故事閱讀 40,424評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡诉儒,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出亏掀,到底是詐尸還是另有隱情忱反,我是刑警寧澤,帶...
    沈念sama閱讀 36,107評(píng)論 5 349
  • 正文 年R本政府宣布滤愕,位于F島的核電站温算,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏间影。R本人自食惡果不足惜注竿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,789評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望魂贬。 院中可真熱鬧巩割,春花似錦、人聲如沸付燥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽键科。三九已至闻丑,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間萝嘁,已是汗流浹背梆掸。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評(píng)論 1 271
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留牙言,地道東北人酸钦。 一個(gè)月前我還...
    沈念sama閱讀 48,798評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像咱枉,于是被迫代替她去往敵國(guó)和親卑硫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,435評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容