我的第一个cordova_android程序（cmd控制台）自定义插件

1. 创建工程

1.1输入：

PS E:\testDrawByJS> cordova create KMPrintEProject com.kmarking.eweihu MainPage

注：命令分解：(来自官网http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-cli/index.html#cordova-create-command)

cordova create path [id [name [config]]] [options]

Value	Description
path	Directory which should not already exist. Cordova will create this directory. For more details on the directory structure, see below.
id	Default: `io.cordova.hellocordova` Reverse domain-style identifier that maps to `id` attirbute of `widget` element in `config.xml`. This can be changed but there may be code generated using this value, such as Java package names. It is recommended that you select an appropriate value.
name	Default: `HelloCordova` Application's display title that maps `name` element in `config.xml` file. This can be changed but there may be code generated using this value, such as Java class names. The default value is `HelloCordova`, but it is recommended that you select an appropriate value.
config	JSON string whose key/values will be included in `<path>`/.cordova/config.json

Options

Option	Description
--template	Use a custom template located locally, in NPM, or GitHub.
--copy-from\	--src
--link-to	Symlink to specified `www` directory without creating a copy.

2. 进入目录，添加平台

2.1输入：

PS E:\testDrawByJS> cd KM*

2.2输入：

PS E:\testDrawByJS\KMPrintEProject> cordova platform add browser --save

2.3运行结果：

Using cordova-fetch for cordova-browser@^6.0.0
Adding browser project...
Creating Cordova project for cordova-browser:
Path: E:\testDrawByJS\KMPrintEProject\platforms\browser
Name: MainPage
Plugin 'cordova-plugin-whitelist' found in config.xml... Migrating it to package.json
Discovered saved plugin "cordova-plugin-whitelist". Adding it to the project
Installing "cordova-plugin-whitelist" for browser
Adding cordova-plugin-whitelist to package.json

2.4输入：

PS E:\testDrawByJS\KMPrintEProject> cordova platform add android --save

2.5运行结果：

Using cordova-fetch for cordova-android@^8.0.0
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms\android
Package: com.kmarking.eweihu
Name: MainPage
Activity: MainActivity
Android target: android-28
Subproject Path: CordovaLib
Subproject Path: app
Android project created with [email protected]
Installing "cordova-plugin-whitelist" for android

2.6输入：

PS E:\testDrawByJS\KMPrintEProject> cordova platform add ios --save

2.7运行结果：

Using cordova-fetch for cordova-ios@^5.0.0
Adding ios project...
Creating Cordova project for the iOS platform:
Path: platforms\ios
Package: com.kmarking.eweihu
Name: MainPage
iOS project created with [email protected]
Installing "cordova-plugin-whitelist" for ios

3. 添加插件：

3.1输入：

npm install -g plugman //安装一个插件工具

3.2输入：

plugman create --name KMPrintPlugin --plugin_id KMPrintPlugin --plugin_version 0.0.1

3.3运行后项目路径下出现，此路径为当前powerShell打开的路径，这个文件夹生成在哪里无所谓，最后会把这个插件添加到各平台下的。

3.4进入该文件夹，添加平台

输入：

PS E:\testDrawByJS\KMPrintEProject> cd KM*

PS E:\testDrawByJS\KMPrintEProject\TestDialog> plugman platform add --platform_name android

PS E:\testDrawByJS\KMPrintEProject\TestDialog> plugman platform add --platform_name ios

运行后该目录下自动生成android/KMPrintPlugin.java文件！！！！！

3.5创建package.json文件

3.5.1输入：

~~plugman createpackagejson E:\testDrawByJS\KMPrintEProject\KMPrintPlugin~~

注：这样写用了绝对路径，在ios添加插件时会报错，应该添加为相对路径：

npm init

3.5.2接下来会一有提示填写信息，输入后最后yes就好

3.6在生成的java文件种编写代码：

package KMPrintPlugin;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

/**
 * This class echoes a string called from JavaScript.
 */
public class KMPrintPlugin extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("coolMethod")) {
            String message = args.getString(0);
            this.coolMethod(message, callbackContext);
            return true;
        }else if(action.equals("greet")){
			 String name = data.getString(0);
            String message = "Hello, " + name;
            callbackContext.success(message);
            Log.d("Hello",message);
            Toast.makeText(this.cordova.getActivity(),"1111",Toast.LENGTH_SHORT);
            return true;
		}else{
			return false;
		}
        
    }

    private void coolMethod(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

3.7将插件添加到平台中

3.7.1输入：

PS E:\testDrawByJS\KMPrintEProject\com.kmarking.PrintPlugin> cordova plugin add KMPrintPlugin --save

3.7.2运行结果：

Installing "com.kmarking.PrintPlugin" for android
Installing "com.kmarking.PrintPlugin" for browser
Installing "com.kmarking.PrintPlugin" for ios
Adding com.kmarking.PrintPlugin to package.json

3.7.3此时项目中已有我们写好的Java文件了

4.关于配置插件plugin.xml
有些博客说要自己手动创建，但是我自己手动创建后，build工程xml/config.xml是没有注册成功的！！！！

然后又在插件文件夹中add了platform android，这个plugin.xml是自动生成的，不用配就能用了！！！！！！

但是如果项目需要包含其他引用库，就需要在配置中手动添加<source-file>

5.在www文件夹下的js配置：

var exec = require('cordova/exec');

<!-- msg 是传递的数据 success error 是回调方法 其中 TestPlugin是plugin中配置的js中clobbers标签中的target-->
<!--greet 是java文件中excute中的action值，和.h中定义的greet方法, 记住 要保持一致。-->
exports.greet = function(msg, success, error) {
    exec(success, error, "TestPlugin", "greet", [msg]);
};

6.插件调用

在你的cordova工程中的 html页面用调用js方法并且在js的function中写入

var success = function(e){
          alert(e);
      }
      var error = function(e){
          alert(e);
      }
      TestPlugin.greet("Geek",success,error);

我的第一个cordova_android程序（cmd控制台）自定义插件

Options

猜你喜欢