My first custom plug-in for cordova_android program (cmd console)

My first custom plug-in for cordova_android program (cmd console)

1. Create a project

1.1 Input:

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

Note: Command decomposition: (from the official website 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. Enter the catalog and add a platform

2.1 Input:

PS E:\testDrawByJS> cd KM*

2.2 Input:

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

2.3 Operation results:

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 Input:

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

2.5 Running results:

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 Input:

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

2.7 Running results:

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. Add plug-in:

3.1 Input:

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

3.2 Input:

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

3.3 Appears under the project path after running. This path is the path opened by the current powerShell. It doesn't matter where the folder is generated. Finally, the plug-in will be added to each platform.

3.4 Enter the folder, add platform

enter:

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

After running, the android/KMPrintPlugin.java file is automatically generated in this directory! ! ! ! !

3.5 Create package.json file

3.5.1 Input:

plugman createpackagejson E:\testDrawByJS\KMPrintEProject\KMPrintPlugin

Note: The absolute path is written in this way, and an error will be reported when adding the plug-in in ios. It should be added as a relative path:

npm init

3.5.2 Next, there will be a prompt to fill in the information, and finally yes after inputting

 

3.6 Write code in the generated java files:

 

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 Add plugins to the platform

3.7.1 Input:

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

3.7.2 Operation results:

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 There are already Java files written by us in the project at this time

​

4. Regarding the configuration plug-in plugin.xml,
     some blogs said that I had to create it manually, but after I created it manually, the build project xml/config.xml was not registered successfully! ! ! !

      Then add platform android in the plugin folder. This plugin.xml is automatically generated and can be used without configuration! ! ! ! ! !

       But if the project needs to include other reference libraries, you need to manually add <source-file> in the configuration

5. The js configuration under the www folder:

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. Plug-in call

Use the js method to call the html page in your cordova project and write in the js function

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