Cordova插件编写流程（Android平台）

一、Android环境准备
二、Cordova环境准备
三、搭建测试项目
四、插件代码调试
五、进阶
- 1、添加多个方法
- 2、跳转到原生页面
- 3、添加依赖
- 4、添加Marven和JCenter
- 5、添加kotlin支持（插件依赖）
参考文档

一、Android环境准备

安装 JDK。
安装 AndroidStudio。
根据AndroidStudio提示安装SDK。
配置JAVA环境变量。（教程）

配置Android环境变量

ANDROID_HOME：[Android SDK安装目录]（比如C:\Users\bellesun\AppData\Local\Android\sdk）PATH：%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;%ANDROID_HOME%\tools\bin;

安装模拟器或用真机调试

二、Cordova环境准备

安装Node.js
安装nodejs，是为了使用其中安装的包管理工具npm（下载上传工具）
测试是否安装成功，cmd中执行[node -v]以及[npm -version]
安装Cordova
```
$ npm install -g cordova
```
安装PluginMan
```
 $ npm install -g plugman
```

三、搭建测试项目

创建Cordova项目

cordova create [项目名] [包名] [App名]

$ cd d:/Test$ Cordova create demoproject com.example.demoproject CordovaDemo

创建插件

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

$ cd d:/Test/Plugins$ plugman create --name ToastDemo --plugin_id cordova.plugin.toastdemo --plugin_version 1.0.0

初始化插件

$ cd d:/Test/Plugins/ToastDemo$ npm init

然后一路回车

为插件添加Android平台

$ plugman platform add --platform_name android

编辑插件的配置文件（plugin.xml）

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

编辑插件js文件

var exec = require('cordova/exec');//默认生成// exports.coolMethod = function (arg0, success, error) {       //     exec(success, error, 'ToastDemo', 'coolMethod', [arg0]);// };//修改后////exports.toast的toast为js中调用的方法名，其中传递的参数可以任意多个 如：(arg0,arg1,arg2...,success,error)exports.toast = function (arg0, success, error) {           //ToastDemo与plugin.xml中feature节点的name属性值相同    //这里的toast是java代码中用于判断调用方法的action参数    exec(success, error, 'ToastDemo', 'toast', [arg0]);};

接下来我们先不编辑ToastDemo.java文件，我们随后用AndroidStudio打开项目来编辑Java文件，这样可以有代码补全和便于调试

编辑Cordova项目中的index.html添加测试代码

<html>    <head>        <link rel="stylesheet" type="text/css" href="css/index.css">        <title>Hello Worldtitle>    head>    <body>        <div class="app">            <button onclick="showToast()">Toastbutton>        div>        <script>            function showToast(){                        ToastDemo.toast("Hello World");            }        script>        <script type="text/javascript" src="cordova.js">script>        <script type="text/javascript" src="js/index.js">script>    body>html>

用VS Code打开Cordova项目添加Android平台
```
$ cordova platform add android
```

安装插件

cordova plugins add [插件目录]

$ cordova plugins add d:/Test/Plugins/toastdemo

四、插件代码调试

到目前为止测试项目搭建完成，其中包括一个Android平台，且平台中已经包含了toastdemo插件。我们用Android Studio打开 DemoProject 中的android项目（D:\Test\demoproject\platforms\android），如果插件配置正确这个时候在ToastDemo.java中设置断点并调试运行，点击界面中的按钮是可以进入断点的。如果无法进入需要检查插件的配置文件和js文件是否编写正确。

现在我们打开ToastDemo.java对插件的java文件进行完善

package cordova.plugin.toastdemo;import android.widget.Toast;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 ToastDemo extends CordovaPlugin {         @Override    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {             //这里对action进行判断        if (action.equals("toast")) {                 String message = args.getString(0);            //调用对应方法            this.showToast(message, callbackContext);            return true;        }        return false;    }/*** 弹出Toast的方法**/    private void showToast(String message, CallbackContext callbackContext) {             if (message != null && message.length() > 0) {                 Toast.makeText(cordova.getContext(), message, Toast.LENGTH_SHORT).show();            callbackContext.success(message);        } else {                 callbackContext.error("Expected one non-empty string argument.");        }    }}

当程序运行达到预期效果后我们把Java文件考回到插件项目中覆盖之前的Java文件，然后我们移除项目中的插件并重新安装.

$ cd d:/Test/demoproject$ cordova plugins rm cordova.plugin.toastdemo $ cordova plugins add d:/Test/Plugins/toastdemo

如果程序运行正常那么我们的插件就编写完成了。

五、进阶

1、添加多个方法

添加多个方法我们首先需要修改插件中的ToastDemo.js文件

var exec = require('cordova/exec');//默认生成// exports.coolMethod = function (arg0, success, error) {     //     exec(success, error, 'ToastDemo', 'coolMethod', [arg0]);// };//修改后////exports.toast的toast为js中调用的方法名，其中传递的参数可以任意多个 如：(arg0,arg1,arg2...,success,error)exports.toast = function (arg0, success, error) {         //ToastDemo与plugin.xml中feature节点的name属性值相同    //这里的toast是java代码中用于判断调用方法的action参数    exec(success, error, 'ToastDemo', 'toast', [arg0]);};exports.dialog = function (arg0, success, error) {         //这里改变了action参数值    exec(success, error, 'ToastDemo', 'dialog', [arg0]);};

然后在Cordova项目中的页面添加测试代码

<html>    <head>        <link rel="stylesheet" type="text/css" href="css/index.css">        <title>Hello Worldtitle>    head>    <body>        <div class="app">            <button onclick="showToast()">Toastbutton>            <button onclick="showDialog()">Dialogbutton>        div>        <script>            function showToast(){                      ToastDemo.toast("Hello World");            }            function showDialog(){                      ToastDemo.dialog("Hello world")            }        script>        <script type="text/javascript" src="cordova.js">script>        <script type="text/javascript" src="js/index.js">script>    body>html>

然后修改Java文件，这里依然可以在Android Studio中调试好了再拷贝回来

package cordova.plugin.toastdemo;import android.app.AlertDialog;import android.widget.Toast;import org.apache.cordova.CordovaPlugin;import org.apache.cordova.CallbackContext;import org.json.JSONArray;import org.json.JSONException;/** * This class echoes a string called from JavaScript. */public class ToastDemo extends CordovaPlugin {         @Override    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {             if (action.equals("toast")) {                 String message = args.getString(0);            this.showToast(message, callbackContext);            return true;        }else if ( action.equals("dialog")){                 String message = args.getString(0);            this.showDialog(message,callbackContext);            return true;        }        return false;    }    /**     * 展示Dialog     * @param message 消息内容     * @param callbackContext 回调上下文     */    private void showDialog(String message, CallbackContext callbackContext) {             if (message != null && message.length() > 0) {                 AlertDialog.Builder builder = new AlertDialog                    .Builder(cordova.getContext())                    .setTitle("提示")                    .setMessage(message);            builder.create().show();            callbackContext.success(message);        } else {                 callbackContext.error("Expected one non-empty string argument.");        }    }    /**     * 展示Toast     * @param message 消息内容     * @param callbackContext 回调上下文     */    private void showToast(String message, CallbackContext callbackContext) {             if (message != null && message.length() > 0) {                 Toast.makeText(cordova.getContext(), message, Toast.LENGTH_SHORT).show();            callbackContext.success(message);        } else {                 callbackContext.error("Expected one non-empty string argument.");        }    }}

最后我们移除插件再重新添加
最终效果

2、跳转到原生页面

我们用AndroidStudio在插件Java文件同级目录添加一个Activity

修改ToastDemo.java文件添加如下代码

如果运行程序报下面这个错误，请把DemoActivicy中的继承父类AppCompatActivity改为Activity

java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.demoproject/cordova.plugin.toastdemo.DemoActivity}: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.

调试通过后我们把刚才新建的java文件和布局文件都考回到插件项目中，目录结构如下：

最后修改plugin.xml文件,在platform节点下添加如下代码

                <config-file target="AndroidManifest.xml" parent="/manifest/application">                        <activity android:name="cordova.plugin.toastdemo.DemoActivity"/>        config-file>                                        <source-file src="src/android/ToastDemo.java" target-dir="src/cordova/plugin/toastdemo/" />                <source-file  src="src/android/DemoActivity.java" target-dir="src/cordova/plugin/toastdemo/"/>                <source-file src="src/android/layout/activity_demo.xml" target-dir="res/layout/"/>

再次移除插件并重新添加测试插件能否正常运行，在重新添加之前清理掉我们在Android平台中手动添加的activity文件和布局文件不然插件无法安装成功。

3、添加依赖

添加Jar包依赖

比如我们在插件中的libs下有一个modbus4j-3.0.3.ja文件，那么我们在plugin.xml中添加如下代码就可以了
```
<source-file src="src/android/libs/modbus4j-3.0.3.jar" target-dir="libs"/>
```
添加gradle依赖

我们可以在platform节点下添加如下代码
```
<framework src="com.amazonaws:aws-java-sdk:1.10.75" />
```

4、添加Marven和JCenter

我们可以在插件项目中自己建一个plugin.gradle(这里也可以添加依赖)

repositories {         jcenter()}dependencies {         compile 'com.nononsenseapps:filepicker:3.1.0'}

并在配置文件中添加如下代码：

<framework src="src/android/plugin.gradle" custom="true" type="gradleReference"/>

5、添加kotlin支持（插件依赖）

如果我们的插件中需要使用kotlin语言进行编写，那么我们需要给我们的插件依赖另一个cordova-support-kotlin插件。在plugin.xml根节点下添加如下代码：

 <dependency id="cordova-support-kotlin" />

这样我们在安装插件的时候kotlin插件也会被安装。

参考文档

如何向Android Cordova插件添加依赖项(Maven或JCenter)
Cordova自定义插件开发

Cordova插件编写流程（Android平台）

Cordova插件编写流程（Android平台）

一、Android环境准备

二、Cordova环境准备

三、搭建测试项目

四、插件代码调试

五、进阶

1、添加多个方法

2、跳转到原生页面

3、添加依赖

4、添加Marven和JCenter

5、添加kotlin支持（插件依赖）

参考文档

更多相关文章

随机推荐