Cordova外掛開發流程

阿新 • • 發佈：2018-12-15

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!"} );
        }

Cordova外掛開發流程