Cordova自定義插件實戰

Cordova自定義插件實戰

使用前提

1. 已經能夠實現原有插件的使用。
2. 稍微熟悉JS語言（其實我也不會）
3. 創建一個Cordova的Demo。

自定義插件實戰

準備工具

1. 用Cordova在Dos中創建一個Demo，之後將此Demo在Eclipse中引入，會發現多了兩個文件CordovaLib和MainActivity。
2. 新建一個text的Android工程，將MainActivity中src目錄下的org.apache.cordova包，assets目錄下的www文件，和res目錄下的XML文件夾拷到新建text工程的相應位置。
3. 將Cordova作爲text外部依賴庫。

Toast

先寫一個比較簡單的插件，方便大家瞭解這個插件化的編寫流程，只要把套路記住了，其他的都好弄。
先說一下在寫插件的過程中我們需要經常接觸的四個文件。

1. 插件的JAVA文件—位於src目錄下–自己寫
2. 插件的JS文件—位於assets/www/plugins目錄下–自己寫
3. Cordova_plugins.js—位於assets目錄下–插件的配置文件
4. Config.xml—位於res/xml目錄下–添加配置

在自定義插件的過程中我們會經常接觸的就是這四個文件，接下來就是套路了。

編寫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方法，三個參數，action爲html中調用的方法名，args爲方法參數，callbackContext爲回調，先不用管那個多，首先對action進行判斷，如果action所對應的方法名與我們定義的方法名相同的話就，就執行彈出一個Toast的動作，在if（）{}大括號中隨便寫，我只不過是爲了方便就寫的與方法名相同，其實不用。關於返回值true的時候表示此插件可用，false爲不可用，個人目前沒有感覺在實際中有什麼應用。現在一個Toast插件的Java代碼就寫好了，唯一值得注意的就是if（）括號中的方法名。

編寫JS文件：在assets/www/plugins目錄下新建一個文件夾，名字隨意起，我的是cordova-plugin-toast，之後在文件夾內新建一個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文件的必備要素。

1. 第一行，” cordova.define(“cordova-plugin-toast.toast”, function(require, exports, module) { ” 這就是套路，不用想爲什麼這麼寫，因爲我也不知道，值得注意的就是在cordova.define()括號中添加的是插件js文件的文件夾名和js文件名。
2. 第二行，第三行，抄過去進行，必須寫。
3. 第四行，其中showToast爲我們自己定義的在html調用的方法名。冒號後面的function的括號中定義在html中調用本地Toast中需要的參數，大括號中也是固定寫法 exec括號中有五個參數，分別是：成功回調，失敗回調，feature name，方法名，參數。，其中feature name可能不知道是什麼無所謂，先放着，方法名就是showToast，參數就是function中的參數，同時也對應着java代碼中JSONArray args。

配置cordova_plugins.js

在module.exports中添加

{
    "file": "plugins/cordova-plugin-toast/toast.js",
    "id": "cordova-plugin-toast.toast",
    "clobbers": [
          "navigator.webtoast"
    ]
}

把上面的複製粘貼一下，將file中的改爲插件的JS文件路徑，id改爲插件的文件夾名和文件名，對應着JS文件中的Cordova.define括號中內容，clobbers中內容隨便寫，這個是html中調用方法時的調用頭部（先這麼叫着吧，因爲我也沒學過JS，不知道專業怎麼叫），注意上下文的逗號。

在module.exports.metadata中添加

"cordova-plugin-toast":"1.0.0"

“文件夾名” ：”版本號”，版本號隨便寫，目前不知道在未來有什麼作用，文件夾名就是JS文件的文件夾名，這個cordova_plugins也配合完成。

配置config.xml
在文件中適當的位置添加

   <feature name="Toasts">
 <param name="android-package" value="com.pactera.plugin.Toast" />
    </feature>

直接把其中的一個複製粘貼，feature name隨便寫，不過要與JS文件中的第三個參數保持一致，param name統一寫 android-package，value中則對應的是JAVA文件的包名和類名。

套路

整體的編寫流程已經介紹一遍了，其中比較重要的地方都加粗標記了一下，不過這麼看起來好像有點亂，而且也沒有體現出來套路是什麼。現在就把套路告訴大家，只要掌握這個基本的套路寫一個簡單的插件完全沒有問題。
1. JAVA文件：”方法名”.equals(action),做判斷。args中存放html給你的參數。
2. JS文件：define（”JS文件夾名.文件名”），方法名 ：function（參數）{exec（成功，失敗，”feature name”，”方法名”，[參數]）}
3. cordova_plugins.js:file:”js文件的路徑”，id：”JS文件夾名.文件名”，clobbers：”方法調用頭”，metadata中添加”JS文件夾名”：”版本號”。
4. config.xml:feature name=”隨便寫”，與JS文件中保持一致，value爲”JAVA包名.類名”

在編寫的過程中一共就這四條，只要這四條中所對應的內容都匹配的上，那麼這個插件就沒有問題。

驗證

這運行之前還有兩點需要做，首先在新建的Android的項目中把MainActivity中的內容進行一點的更改，將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所對應的方法名。大括號中的就是在cordova_plugins中定義的方法調用頭和在JS中定義的方法名，參數也隨便寫，不過要注意就是也JAVA中的參數相對應。
看下效果。

可以看到這就是一個簡單的Toast插件效果，個人覺得按照套路把房子搭好，之後你願意放什麼就放什麼。如果有不明白或者有有問題的可以留言。

Call&SmS

接下來如果你的Toast插件已經編寫完成了，並且對於整個套路有了一定的熟悉，肯定想驗證一下自己學到的東西到底有沒有真正的掌握，那麼來做個測試吧，嘗試編寫插件來實現html調用本地的電話和短信，套路都是一樣的主要差別就在JAVA代碼中，這也是編寫插件的最主要的地方，先看一下效果。
可以看出來效果還是可以的就是實現簡單的調用而已。大家可以自行嘗試一下，並不難。

拓展

關於拓展我想寫的有兩點：
1. 關於html中接受回調，這個需要做的就是在Java代碼中CallbackContext的兩個方法，succsee和error，其中可以傳遞多種參數類型，之後要做的就是在JS代碼中function方法的參數內添加兩個參數，分別是成功和失敗回掉調， exec中也要在相應的位置上寫上相同名稱的回調。最後在html中的方法內同樣要寫上成功和失敗回調的function方法，注意參數的位置順序。這個就自己嘗試吧，不上代碼了。
2. 關於onActivityResult的執行：通常會出現這樣的情況，html中一個動作，通過插件開啓另一個Activity之後需要回傳數據，如果按照之前的startActivityForResult方法的話在插件的JAVA類中重寫onActivityResult中是無法接受回調的，正確啓動另一個Activity的姿勢是
cordova.startActivityForResult(command, intent, requestCode);
第一個參數是關鍵就是當前的Plugin對象，這樣onActivityResult纔會收到回調。

總結

之前一直在找工作，很久沒有更新博客了，這篇博客算是新工作的第一個任務的階段性總結吧，公司要求使用Cordova來實現很多的html交互，只能去學一些這方面的知識。新工作目前感覺還可以，接下來的半年應該都是自己充實的過程吧，感覺最近自己有點浮躁了，或者說安逸的生活不能激勵我，鞭策我前進，找到工作就沒有之前那麼努力學習了，這是病得治，準備合理安排自己的工作時間和休息時間，堅持半年，保持良好的學習態度和高昂的學習熱情，未來會更好的。

本人水平有限，對於JS，html之類的東西不是很瞭解，這篇博客內容主要就是那四個套路方式，用好就可以其他的問我我也不會，如果按照我的套路在寫插件的過程中出現什麼問題可以留言，或者你有一個想要實現的插件效果，也可以留言，正好我也需要鍛鍊，共同進步！