Cordova外掛開發流程
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!"} );
}