Cordova for android || cordova基本使用以及自定義插件生成

環境準備

1、jdk安裝

   環境變量設定：

   建立變量 名：JAVA_HOME    值（jdk安裝的路徑）：C:\Program Files\Java\jdk1.8.0_51

2、Android SDK安裝

   環境變量設定：

   建立變量 名：ANDROID_HOME    值（SDK的路徑）：D:\AS_SDK

3、gradle安裝

   環境變量設定：

   在path變量末尾添加gradle的路徑D:\Android Studio\gradle\gradle-4.1\bin

4、下載下傳和安裝Node.js (位址：https://nodejs.org/en/download/)

   安裝完後：

   通過指令node --version  可檢視nodejs版本；

   通過指令npm --version  可檢視npm版本；

5、cordova安裝

   指令行輸入：npm install -g cordova

   通過指令cordova requirements檢查必備的建構工具

6、建立cordova項目

cordova create cordovaProject  

7、進入建立的cordova項目根目錄，添加android項目

cordova platform add android

8、打出apk

cordova build android

自定義插件生成方法一：指令生成

1、建立目錄用于建立插件  => plugins ,進入建立的plugins目錄打開指令行，建立插件

plugman create --name [插件名] --plugin_id [插件ID] --plugin_version [插件版本号]

plugman create --name MyPlugin --plugin_id pluginId-MyPlugin --plugin_version 1.0.0

2、打開www目錄修改MyPlugi.js檔案：MyPlugin為對于的java類名 toastShow為H5調用所使用的方法名

cordova.define("MyPluginTest", function(require, exports, module) {//MyPluginTest和cordova_plugin.js裡面的id參數對應
var exec = require('cordova/exec');
exports.toastShow = function (arg0, success, error) {
    exec(success, error, 'MyPlugin', 'toastShow', [arg0]);//toastShow h5調用名、原生接收的action名   MyPlugin//java類名
};
});
           

3、進入插件目錄MyPlugin生成java類

plugman platform add --platform_name android

4、建立package.json

npm init

5、進入cordova項目目錄，導入插件

cordova plugin add E:\plugins\MyPlugin

完成後cordova_plugin.js檔案自動添加配置

module.exports = [
       {
         "id": "MyPluginTest",  //對應MyPlugin.js裡面的cordova.define的參數1
         "file": "plugins/com.test.MyPlugin/www/MyPlugin.js",  //MyPlugin.js檔案路徑
         "pluginId": "pluginId-MyPlugin", //對應metadata
         "clobbers": [
           "colin"//H5調用别名
         ]
       }
     ];
     module.exports.metadata = {
       "cordova-plugin-whitelist": "1.3.4",
       "pluginId-MyPlugin": "1.0.0"
     };
           

6、測試

  index檔案添加一個按鈕

 <input type="button" value="佛祖保佑" id='test'/>
           

   index.js添加事件

 document.getElementById("test").addEventListener("click",test);
    colin.toastShow("佛祖來了",function(msg){
              alert('原生傳回了：'+msg);
              },function(e){
                  alert(e);
              });
           

自定義插件生成方法二：手動生成（備注：cordova3之後已經不支援此方式）

1、 建立一個java類MyToast.java繼承CordovaPlugin 重寫execute

public class MyToast extends CordovaPlugin {
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        System.out.println("action11 "+action);
        if(action.equals("showToast")){
            Toast.makeText(cordova.getActivity(),args.getString(0),Toast.LENGTH_SHORT).show();
            return true;
        }
        return super.execute(action, args, callbackContext);
    }
}
           

2、在assets的plugins裡面建立MyToast.js檔案

cordova.define("Toast", function(require, exports, module) {//Toast 随便起名，但在cordova_plugin.js要對應上
    var exec = require('cordova/exec');
    exports.toastShow = function (arg0, success, error) {
    exec(success, error, 'MyToast', 'toastShow', [arg0]);//MyToast java類名  toastShow h5調用名、原生接收的action名   
   };

});
           

3、編輯cordova_plugin.js檔案

module.exports = [
       
       {
                "id": "Toast",//對應MyToast.js
                "file": "plugins/toast/MyToast.js",MyToast.js檔案路徑
                "pluginId": "pluginId-MyToast",
                "clobbers": [
                  "colinToast"//别名，随便寫，H5調用的原生的開頭名
                ]
              }
     ];
     module.exports.metadata = {
       "pluginId-MyToast": "1.0.0"

     };
           

4、編輯cofig.xml檔案

    添加：

<feature name="MyToast">//MyToast随便寫
        <param name="android-package" value="org.apache.cordova.toast.MyToast" />//value是MyToast.java的包名+類名
    </feature>
           

5、測試

   index檔案添加一個按鈕

 <input type="button" value="佛祖保佑" id='test'/>
           

   index.js添加事件

document.getElementById("test").addEventListener("click",test);
    colinToast.toastShow("佛祖來了",function(msg){
              alert('原生傳回了：'+msg);
              },function(e){
                  alert(e);
              });
};
           

注意事項：檢測config.xml配置的java類名路徑是否正确！