Cordova自定義插件實(shí)戰(zhàn)#
使用前提
這篇文章是之前發(fā)表在CSDN上的苗分，拿過來充數(shù)用的供鸠，其實(shí)那個時候也寫了不少豫柬，不過也就這篇能看的過去锌钮，其他一些都是知識總結(jié)性的桥温。沒什么意思。
- 已經(jīng)能夠?qū)崿F(xiàn)原有插件的使用梁丘。
- 稍微熟悉JS語言（其實(shí)我也不會）
- 創(chuàng)建一個Cordova的Demo侵浸。
自定義插件實(shí)戰(zhàn)
準(zhǔn)備工具
- 用Cordova在Dos中創(chuàng)建一個Demo，之后將此Demo在Eclipse中引入氛谜，會發(fā)現(xiàn)多了兩個文件CordovaLib和MainActivity掏觉。
- 新建一個text的Android工程，將MainActivity中src目錄下的org.apache.cordova包值漫，assets目錄下的www文件澳腹，和res目錄下的XML文件夾拷到新建text工程的相應(yīng)位置。
- 將Cordova作為text外部依賴庫杨何。
Toast
先寫一個比較簡單的插件酱塔，方便大家了解這個插件化的編寫流程，只要把套路記住了危虱，其他的都好弄羊娃。
先說一下在寫插件的過程中我們需要經(jīng)常接觸的四個文件。
- 插件的JAVA文件---位于src目錄下--自己寫
- 插件的JS文件---位于assets/www/plugins目錄下--自己寫
- Cordova_plugins.js---位于assets目錄下--插件的配置文件
- Config.xml---位于res/xml目錄下--添加配置
在自定義插件的過程中我們會經(jīng)常接觸的就是這四個文件埃跷，接下來就是套路了蕊玷。
編寫Java文件：在src目錄下新建一個包邮利，包名隨便起，我的是com.pactera.plugin垃帅，之后在里面新建一個Toast類延届。
public class Toast extends CordovaPlugin{
CallbackContext mCallbackContext;
@Override
public boolean execute(String action, JSONArray args,
CallbackContext callbackContext) throws JSONException {
// TODO Auto-generated method stub
if("showToast".equals(action)){
showToast(args.getString(0),args.getInt(1));
}
return true;
}
private void showToast(String text, int type) {
android.widget.Toast.makeText(cordova.getActivity(), text, type).show();
}
}
首先繼承CordovaPlugin這個類之后重寫execute方法，三個參數(shù)挺智，action為html中調(diào)用的方法名祷愉，args為方法參數(shù)，callbackContext為回調(diào)赦颇，先不用管那個多二鳄，首先對action進(jìn)行判斷，如果action所對應(yīng)的方法名與我們定義的方法名相同的話就媒怯，就執(zhí)行彈出一個Toast的動作订讼，在if（）{}大括號中隨便寫，我只不過是為了方便就寫的與方法名相同扇苞，其實(shí)不用欺殿。關(guān)于返回值true的時候表示此插件可用，false為不可用鳖敷，個人目前沒有感覺在實(shí)際中有什么應(yīng)用〔彼眨現(xiàn)在一個Toast插件的Java代碼就寫好了，唯一值得注意的就是if（）括號中的方法名定踱。
編寫JS文件：
在assets/www/plugins目錄下新建一個文件夾棍潘，名字隨意起，我的是cordova-plugin-toast崖媚，之后在文件夾內(nèi)新建一個toast.js文件亦歉，代碼。
cordova.define("cordova-plugin-toast.toast", function(require, exports, module) {
var exec = require('cordova/exec');
module.exports ={
showToast:function (content,type) {
exec(null, null, "Toasts", "showToast", [content,type]);
}
};
});
這是一個最精簡的一個JS文件畅哑，不過也囊括了一個插件的JS文件的必備要素肴楷。
- 第一行，" cordova.define("cordova-plugin-toast.toast", function(require, exports, module) { " 這就是套路荠呐，不用想為什么這么寫赛蔫，因?yàn)槲乙膊恢溃档米⒁獾木褪窃?strong>cordova.define()括號中添加的是插件js文件的文件夾名和js文件名泥张。
- 第二行呵恢，第三行，抄過去進(jìn)行圾结，必須寫瑰剃。
- 第四行齿诉，其中showToast為我們自己定義的在html調(diào)用的方法名筝野。冒號后面的function的括號中定義在html中調(diào)用本地Toast中需要的參數(shù)晌姚，大括號中也是固定寫法 exec括號中有五個參數(shù)，分別是：成功回調(diào)歇竟，失敗回調(diào)挥唠，feature name，方法名焕议，參數(shù)宝磨。，其中feature name可能不知道是什么無所謂盅安，先放著唤锉，方法名就是showToast，參數(shù)就是function中的參數(shù)别瞭，同時也對應(yīng)著java代碼中JSONArray args窿祥。
配置cordova_plugins.js
在module.exports中添加
{
"file": "plugins/cordova-plugin-toast/toast.js",
"id": "cordova-plugin-toast.toast",
"clobbers": [
"navigator.webtoast"
]
}
把上面的復(fù)制粘貼一下，將file中的改為插件的JS文件路徑蝙寨，id改為插件的文件夾名和文件名晒衩，對應(yīng)著JS文件中的Cordova.define括號中內(nèi)容，clobbers中內(nèi)容隨便寫墙歪，這個是html中調(diào)用方法時的調(diào)用頭部（先這么叫著吧听系，因?yàn)槲乙矝]學(xué)過JS，不知道專業(yè)怎么叫）虹菲，注意上下文的逗號靠胜。
在module.exports.metadata中添加
"cordova-plugin-toast":"1.0.0"
"文件夾名" ："版本號"，版本號隨便寫届惋，目前不知道在未來有什么作用髓帽，文件夾名就是JS文件的文件夾名，這個cordova_plugins也配合完成脑豹。
配置config.xml
在文件中適當(dāng)?shù)奈恢锰砑?/p>
<feature name="Toasts">
<param name="android-package" value="com.pactera.plugin.Toast" />
</feature>
直接把其中的一個復(fù)制粘貼郑藏，feature name隨便寫，不過要與JS文件中的第三個參數(shù)保持一致瘩欺，param name統(tǒng)一寫 android-package必盖，value中則對應(yīng)的是JAVA文件的包名和類名。
套路
整體的編寫流程已經(jīng)介紹一遍了俱饿，其中比較重要的地方都加粗標(biāo)記了一下歌粥，不過這么看起來好像有點(diǎn)亂，而且也沒有體現(xiàn)出來套路是什么∨牟海現(xiàn)在就把套路告訴大家失驶，只要掌握這個基本的套路寫一個簡單的插件完全沒有問題。
- JAVA文件："方法名".equals(action),做判斷枣购。args中存放html給你的參數(shù)嬉探。
- JS文件：define（"JS文件夾名.文件名"）擦耀，方法名 ：function（參數(shù)）{exec（成功，失敗涩堤，"feature name"眷蜓，"方法名"，[參數(shù)]）}
- cordova_plugins.js:file:"js文件的路徑"胎围，id："JS文件夾名.文件名"吁系，clobbers："方法調(diào)用頭"，metadata中添加"JS文件夾名"："版本號"白魂。
- config.xml:feature name="隨便寫"汽纤，與JS文件中保持一致，value為"JAVA包名.類名"
在編寫的過程中一共就這四條福荸，只要這四條中所對應(yīng)的內(nèi)容都匹配的上冒版，那么這個插件就沒有問題。
驗(yàn)證
這運(yùn)行之前還有兩點(diǎn)需要做逞姿，首先在新建的Android的項(xiàng)目中把MainActivity中的內(nèi)容進(jìn)行一點(diǎn)的更改辞嗡，將MainActivity繼承自CordovaActivity，將onCreate修飾符改為public滞造，去掉setContentview改為loadUrl("file:///android_asset/www/index.html");就是加載assets下index.xml文件续室，其次在index.xml文件中寫一個button，onclick方法名隨便寫谒养，之后寫一個function方法挺狰。
function showToast(){
navigator.webtoast.showToast("測試Toast成功",0);
}
第一個showToast為button的onclick所對應(yīng)的方法名。大括號中的就是在cordova_plugins中定義的方法調(diào)用頭和在JS中定義的方法名买窟，參數(shù)也隨便寫丰泊，不過要注意就是也JAVA中的參數(shù)相對應(yīng)。
看下效果始绍。
可以看到這就是一個簡單的Toast插件效果瞳购，個人覺得按照套路把房子搭好，之后你愿意放什么就放什么亏推。如果有不明白或者有有問題的可以留言学赛。
Call&SmS
接下來如果你的Toast插件已經(jīng)編寫完成了，并且對于整個套路有了一定的熟悉吞杭，肯定想驗(yàn)證一下自己學(xué)到的東西到底有沒有真正的掌握盏浇，那么來做個測試吧，嘗試編寫插件來實(shí)現(xiàn)html調(diào)用本地的電話和短信芽狗，套路都是一樣的主要差別就在JAVA代碼中绢掰，這也是編寫插件的最主要的地方，先看一下效果。
可以看出來效果還是可以的就是實(shí)現(xiàn)簡單的調(diào)用而已滴劲。大家可以自行嘗試一下谊却，并不難。
拓展
關(guān)于拓展我想寫的有兩點(diǎn)：
- 關(guān)于html中接受回調(diào)哑芹，這個需要做的就是在Java代碼中CallbackContext的兩個方法，succsee和error捕透，其中可以傳遞多種參數(shù)類型聪姿，之后要做的就是在JS代碼中function方法的參數(shù)內(nèi)添加兩個參數(shù)，分別是成功和失敗回掉調(diào)乙嘀， exec中也要在相應(yīng)的位置上寫上相同名稱的回調(diào)末购。最后在html中的方法內(nèi)同樣要寫上成功和失敗回調(diào)的function方法，注意參數(shù)的位置順序虎谢。這個就自己嘗試吧盟榴，不上代碼了。
- 關(guān)于onActivityResult的執(zhí)行：通常會出現(xiàn)這樣的情況婴噩，html中一個動作擎场，通過插件開啟另一個Activity之后需要回傳數(shù)據(jù)，如果按照之前的startActivityForResult方法的話在插件的JAVA類中重寫onActivityResult中是無法接受回調(diào)的几莽，正確啟動另一個Activity的姿勢是
cordova.startActivityForResult(command, intent, requestCode);
第一個參數(shù)是關(guān)鍵就是當(dāng)前的Plugin對象迅办，這樣onActivityResult才會收到回調(diào)。
總結(jié)
之前一直在找工作章蚣，很久沒有更新博客了站欺，這篇博客算是新工作的第一個任務(wù)的階段性總結(jié)吧，公司要求使用Cordova來實(shí)現(xiàn)很多的html交互纤垂，只能去學(xué)一些這方面的知識矾策。新工作目前感覺還可以，接下來的半年應(yīng)該都是自己充實(shí)的過程吧峭沦，感覺最近自己有點(diǎn)浮躁了贾虽，或者說安逸的生活不能激勵我，鞭策我前進(jìn)吼鱼，找到工作就沒有之前那么努力學(xué)習(xí)了榄鉴，這是病得治，準(zhǔn)備合理安排自己的工作時間和休息時間蛉抓，堅(jiān)持半年庆尘，保持良好的學(xué)習(xí)態(tài)度和高昂的學(xué)習(xí)熱情，未來會更好的巷送。
本人水平有限驶忌，對于JS，html之類的東西不是很了解，這篇博客內(nèi)容主要就是那四個套路方式付魔，用好就可以其他的問我我也不會聊品，如果按照我的套路在寫插件的過程中出現(xiàn)什么問題可以留言，或者你有一個想要實(shí)現(xiàn)的插件效果几苍，也可以留言翻屈，正好我也需要鍛煉，共同進(jìn)步妻坝！
