Cordova custom plugin (Android version)

Cordova custom plugin (android)

  特别注意 android 项目的包名 必须为 com.example.hello，否则编译不会通过。

1. Install command tools

$ npm i plugman -g
mac 电脑：$ sudo npmi plugman -g)

2. Create the first plugin

 $plugman create --name FirstPlugin --plugin_id cordova-plugin-first-plugin --plugin_version 1.0.0

3. Add Android plugin

 $plugman platform add --platform_name android  
 注：平台有 android、ios、windows
 
 将 FirstPlugin 文件 改为 cordova-plugin-first-plugin

 改后的文件结构

 cordova-plugin-first-plugin
     |-- src // 平台源码
         |-- android // Android 平台源码
     |-- www // 调用原生的js代码 
     |-- package.json // 
     |-- plugin.xml // 插件配置文件

5. Modify FirstPlugin.js to

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

var FirstPlugin = {
    testFirstPlugin: (arg0, success, error) => {
        exec(success, error, 'FirstPlugin', 'testFirstPlugin', [arg0]);
    }
}
module.exports = FirstPlugin;

6. Modify plugin.xml to


<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-first-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0"
        xmlns:android="http://schemas.android.com/apk/res/android">
    <name>FirstPlugin</name>
    <js-module name="FirstPlugin" src="www/FirstPlugin.js">
        <clobbers target="FirstPlugin"/>
    </js-module>
    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="FirstPlugin">
                <param name="android-package" value="cordova.plugin.first.plugin.FirstPlugin"/>
            </feature>
        </config-file>
        <config-file parent="/*" target="AndroidManifest.xml"></config-file>
        <source-file src="src/android/FirstPlugin.java" target-dir="src/cordova/plugin/first/plugin"/>
    </platform>
</plugin>

7. Add package.json file

 plugman createpackagejson [插件路径]

8. Add plugin

 到基于cordova的项目中，输入以下命令
 cordova plugin add [插件路径]

9. Debug plugin

用Android sudio 打开cordova 项目。

android Studio open the project

debug Start to debug the plugin

10. Change FirstPlugin.java to

 package cordova.plugin.first.plugin;
 
 import android.app.AlertDialog;
 
 import com.example.hello.R;
 
 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 FirstPlugin extends CordovaPlugin {
 
     @Override
     public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
         if (action.equals("testFirstPlugin")) {
             String message = args.getString(0);
             this.testFirstPlugin(message, callbackContext);
             return true;
         }
         return false;
     }
 
     private void testFirstPlugin(String message, CallbackContext callbackContext) {
         if (message != null && message.length() > 0) {
             AlertDialog alertDialog = new AlertDialog.Builder(cordova.getContext())
                     .setTitle("这是标题")//标题
                     .setMessage("这是内容")//内容
                     .setIcon(R.mipmap.ic_launcher)//图标
                     .create();
             alertDialog.show();
             callbackContext.success(message);
         } else {
             callbackContext.error("Expected one non-empty string argument.");
         }
     }
 }

11.js call example

        try {
            // console.log(window.FirstPlugin);
            window.FirstPlugin.testFirstPlugin((res)=>{
                console.log(res);
            },(error)=>{

            },null);
        } catch (e) {
            console.log(e);
            console.log("请在真机或者模拟器运行");
        }