天天看点

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类名路径是否正确!