Cordova插件開發流程
插件開發簡介:插件的開發大體上分爲查詢類插件,操作類插件,請求類插件.每種插件一般需要不同的處理及返回方式.大部分插件的開發基本上都是在android源碼的基礎上繼承CordovaPlugin類,使用CallBack對象返回結果。
Android環境下
1、準備工作
在android原生的基礎上進行cordova插件開發，可以在android上代碼實現相應的功能後把代碼集成進cordova工程，也可以直接在cordova工程中開發相應的代碼。
以在cordova工程中爲例:具體操作步驟如下 @cordova環境配置
cordova環境配置的基礎是JDK環境變量和SDK環境變量都已經配置完成
1.配置cordova環境,安裝nodejs
2.創建cordova工程
cordova create hello com.example.hello HelloWorld
3.添加平臺,首先要進入到工程的根目錄下(如果添加android平臺如下)
cordova platform add android
4.運行app,運行到手機上或者模擬器上
注:app編譯或者運行的時候會下載gradle環境,需要網絡通暢(儘量能夠翻牆);
cordova run android
2.插件開發
cordova的環境準備和工程創建完成後就可以進行下一步了,現在需要配置工程中的開發插件的環境.
插件的環境配置在開發階段是xml和js文件的定義. @cordova插件配置
例如要開發一個前端js傳參讓android彈出一個Toast的插件
1.定義插件對於前端js的調用方法
在主工程中找到Project\platforms\android\assets\www\plugins目錄(插件的實現方法定義區),在目錄下新建cordova-plugin-toast/www目錄(二級目錄),目錄中新建toast.js文件,js中的代碼如下:
cordova.define("cordova-plugin-toast.toast", function(require, exports, module) {
var exec = require('cordova/exec');
exports.showToast= function(success, error,args) {
exec(success, error, "Plugin_Toast", "showToast", [args]);
};
});
1.在這段js中,define括號後面的cordova-plugin-toast是插件的id,在"."後的toast是插件的name,exports後跟的是插件對前端js所暴 漏的方法,方法裏的三個參數分別是插件調用成功後的處理,失敗後的處理,以及傳遞的參數.
2.方法裏面的exec方法是cordova環境下調用原生android的入口,其中第二個參數是要調用的原生android類的feature的name,第三個參數在原生的代碼中定義用來彈出toast的動作,這個在插件開發下一步中會用到.
2.定義前端js的調用方式
在主工程中找到Project\platforms\android\assets\www目錄下,找到cordova_plugins.js文件,在module.exports = […]的數組中添加我們自定義插件的內容,代碼如下
{
"id": "cordova-plugin-toast.toast",
"file": "plugins/cordova-plugin-toast/www/toast.js",
"pluginId": "cordova-plugin-toast",
"clobbers": [
"cordova.toast"
]
}
上述代碼中:
“id”:就是第一步中我們定義的插件的id和name的組合
“file”:是對應的第一步中的toast.js所在的相對路徑
“pluginId”:插件的id
“clobbers”:把插件封裝進cordova.toast對象,方便js調用
注意:每個插件的定義以逗號隔開,否則工程運行時會提示插件初始化錯誤.
3.開發具體的android功能
1.在android的src下新建com.cordova.toast目錄,新建Plugin_Toast類.並且繼承CordovaPlugin類,代碼如下
package com.cordova.toast;
import android.widget.Toast;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaInterface;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CordovaWebView;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
public class Plugin_Toast extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
switch (action){
case "showToast":
JSONObject params = args.getJSONObject(0);
Toast.makeText(cordova.getActivity(),params.getString("context"),Toast.LENGTH_LONG).show();
JSONObject jsonObject = new JSONObject();
jsonObject.put("reslut","I am back");
callbackContext.success(jsonObject);
break;
}
return true;
}
}
參數簡介
1.action:第一步中js傳遞的調用動作
2.callbackContext對象用來對結果進行返回,成功時使用success返回,失敗使用error返回.
4.連接android原生與cordova環境
在主工程中找到Project\platforms\android\res\xml目錄下,找到config.xml文件,在widget標籤下添加feature標籤,如下
<feature name="Plugin_Toast">
<param name="android-package" value="com.cordova.toast.Plugin_Toast" />
</feature>
參數介紹:
name: 第一步中使用的feature的name,相當於把android類暴露給cordova環境
value: android類所在的相對位置
到現在爲止,一個完成的插件開發就完成了,現在只需要在前端的頁面中調用就行了.
調用插件
在主工程中找到Project\platforms\android\assets\www目錄下,找到index.html,使用如下方法便可以調用插件並且拿到返回結果
var showToast = function(){
cordova.toast.showToast(
function(res){ console.info(JSON.stringify(res));},
function(err){console.info(err);},
{"context":"I am a Toast!"} );
}