Cordova插件编写流程（Android平台）
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）
<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自定义插件开发