【前端】Cordova自定义插件开发步骤（基于Android）
前言
Cordova概述
Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能，比如说：传感器、数据、网络状态等。
由于项目需要，需要自己开发Cordova插件。下面查阅网上资料后的总结。
基本环境
首先需要确保拥有基本的环境，笔者的基本环境是这样的：
- Windows 10 x64
- npm v3.10.10
- node v6.11.2
- Android Studio 2.2.3
安装cordova
下面使用npm安装cordova
npm install -g cordova创建一个测试项目
首先创建一个hello项目，下面步骤来自官网cordova的步骤
创建App
cordova create hello com.example.hello HelloWorld添加平台
之后所有后续命令都在项目目录（hello目录）里执行
cd hello添加Android平台
cordova platform add android --save检查你当前平台设置状况
cordova platform ls将工程导入Android Studio
- 打开Android Studio
- 选择菜单栏的「File」->「New」->「Import Project」
- 选择「…\hello\platforms\android」目录
- 导入完成
开发插件
安装pluman
npm install -g plugman创建插件
创建一个插件的命令参数如下：
plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]variable NAME=VALUE：可选。额外的描述，如作者信息和相关描述
下面是一个示例：
plugman create --name HelloPlugin --plugin_id hello-plugin --plugin_version 0.0.1运行上面示例后就会在当前目录下生成一个HelloPlugin文件夹。其目录结构如下：
│ plugin.xml
│
├─src
└─www
HelloPlugin.js编写Java
我们需要根据规范来开发一个插件，下面在HelloPlugin/src目录下创建android文件夹，再新建一个Hello.java文件，内容和如下：
package com.hello.toast;
import android.widget.Toast;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;
public class HelloPlugin extends CordovaPlugin {
private CallbackContext mCallbackContext;
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
this.mCallbackContext = callbackContext;
if ("coolMethod".equals(action)) {
String msg = args.getString(0);
Toast.makeText(cordova.getActivity(), msg, Toast.LENGTH_SHORT).show();
callbackContext.success("success");
return true;
}
mCallbackContext.error("error");
return false;
}
}
要注意的是，if ("coolMethod".equals(action))对应HelloPlugin\www\HelloPlugin.js中的exports.coolMethod和exec()方法的第四个参数。
HelloPluginJava类对应HelloPlugin.js文件名称。
也就是说，改了Java中coolMethod或类名，也需要修改JS中对应的名称，否则可能会导致找不到Java类或方法。
HelloPlugin\www\HelloPlugin.js完整代码如下：
cordova.define("hello-plugin.HelloPlugin", function(require, exports, module) {
var exec = require('cordova/exec');
exports.coolMethod = function (arg0, success, error) {
exec(success, error, 'HelloPlugin', 'coolMethod', [arg0]);
};
});
修改plugin.xml
打开HelloPlugin/plugin.xml文件，在标签
...
"android">
<source-file src="src/android/HelloPlugin.java" target-dir="src/com/hello/toast"/>
"res/xml/config.xml" parent="/*">
"HelloPlugin">
"android-package" value="com.hello.toast.HelloPlugin"/>
添加插件
之后就可以添加插件测试一下了
cordova plugin add HelloPlugin如果需要移除插件则执行：
cordova plugin remove HelloPlugin看下Android Studio，有文件添加进来了。
调用插件
在index.html下某个地方插入下面语句进行测试，index.html是创建项目时自动生成的。
<Button onclick="cordova.plugins.HelloPlugin.coolMethod('Toast', null, null)">Show ToastButton>比如在下面位置插入：
...
<body>
<div class="app">
<h1>Apache Cordovah1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Devicep>
<p class="event received">Device is Readyp>
div>
<Button onclick="cordova.plugins.HelloPlugin.coolMethod('Toast', null, null)">Show ToastButton>
div>
<script type="text/javascript" src="cordova.js">script>
<script type="text/javascript" src="js/index.js">script>
body>
...点击按钮，即可弹出原生的Toast。
注意事项
如果出现下面错误
"Refused to execute inline event handler because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
", source: file:///android_asset/www/index.html (47)解决办法是注释掉index.html中的第一行。
<html>
<head>
...
html>参考资料
- 创建你的第一个App