cordova是一套跨平台的移动端框架，基于H5的同时又允许调用原生代码的特性使得开发和运行都能高效地运作。
官方：
A plugin is a package of injected code that allows the Cordova webview within which the app renders to communicate with the native platform on which it runs. Plugins provide access to device and platform functionality that is ordinarily unavailable to web-based apps.
简单地说插件是提供了webview访问原生平台的入口,cordova提供了一系列最常用的插件用于获取设备信息，访问通讯录、文件系统等。你也可以在插件搜索平台上找到你需要的插件 @插件库
有时候无论是官方提供还是插件库都没有满足你需要的插件，那么你可以尝试以下面的方式自定义个性化插件
Android
我通常使用Android Studio来开发插件，那么开发的前提就是把cordova集成到IDE中，可以参考《将cordova集成到Android studio的最佳方法》
或者可以尝试下面的方式让IDE具备最基本的自动补全功能
- 从github上下载开发源码并解压
- Android Studio下新建一个空的工程，将解压目录下的framework/src/org全部拷贝到工程目录下app/src/main目录下
- 将cordova-js-src拷贝到WebIDE下(我用的是PhpStorm)
1.创建目录结构
在WebIDE根目录下我创建了一个目录cordoin,那么目录结构应该如下：(Cordoin是我自定义的名称)
cordoin
├── src # 插件原生实现的源码目录
| ├── android
| | └── Cordoin.java # Android平台下实现类
| ├── ios
| └── ...
├── www
| └── Cordoin.js # Javascript 调用接口
└── plugin.xml # 插件的清单文件
2.创建清单文件
以下面的plugin.xml为例
<?xml version="1.0" encoding="utf-8"?>
<plugin id="win.wshore.cordo.plugin" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<name>Cordoin</name>
<author>Linzh</author>
<description>This is a demo plugin for cordova</description>
<js-module name="Cordoin" src="www/Cordoin.js">
<clobbers target="Cordoin"/>
</js-module>
<platform name="android">
<config-file parent="/*" target="res/xml/config.xml">
<feature name="Cordoin">
<param name="android-package" value="win.wshore.cordo.plugin.Cordoin"/>
</feature>
</config-file>
<source-file src="src/android/Cordoin.java" target-dir="src/win/wshore/cordo/plugin"/>
</platform>
</plugin>
plugin标签的id属性定义了插件的唯一标识符，那么以后就可以通过命令cordova plugin rm win.wshore.cordo.plugin删除这个插件，version定义了这个插件的版本号用于更新插件
plugin标签下的name,author和description分别定义了插件的名称，作者和插件描述
js-module标签定义了js接口的存放位置，name属性指的是这个功能模块的名称，src只想这个js接口的源码文件位置，clobbers属性表示访问对象的名称，这个对象可以直接通过窗口对象window调用
platform定义了对应平台的配置，如android下config-file表示将feature元素放到res/xml/config.xml文件中，source-file表示就爱嗯源码从src/android/Cordoin.java拷贝到src/win/wshore/cordo/plugin目录下
3.创建 JavaScript 接口
js接口决定了该插件的功能需求和调用方式，编辑Cordoin.js如下：
var exec = require('cordova/exec');
var CORDOIN_SERVICE = "Cordoin";
var CORDOIN_ACTION = "test";
/**
* Cordoin.test方法
* @param params {[]} 参数列表
* @param success {function} 成功时回调
* @param error {function} 错误时候回调
*/
exports.test = function (params, success, error) {
exec(success, error, CORDOIN_SERVICE, CORDOIN_ACTION, params || []);
};
上面的代码表示为window.Cordoin对象创建test方法，CORDOIN_SERVICE表示之前加到res/xml/config.xml中的feature的名称，CORDOIN_ACTION表示操作名称
4.原生实现
先上示例代码如下：
package win.wshore.cordo.plugin;
import android.app.Activity;
import android.content.Intent;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;
public class Cordoin extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("test")) {
if (args.length() > 0) {
String params = args.toString();
callbackContext.success(params);
} else {
callbackContext.error("no params");
}
return true;
}
return false;
}
}
参数说明：
- action 表示这个操作的名称，对应于js接口中CORDOIN_ACTION变量
- args 表示这个操作的参数列表，也就是js接口中的param参数
- callbackContext 变量设置js接口的success和error的回调，通过原生的调用结果可以通过它返回给webview
原生实现的功能很简单，就是如果操作名称是"test"的时候，有参数时返回参数的json字符串，否则返回“no params”错误提示
到次为止Android平台的插件算是完毕了，但是还不能直接用，还需要创建package.json文件
进入到插件目录下执行命令
plugman createpackagejson ./
一路回车之后这个插件便可以使用了
因为插件的位置是在本地，所以可以通过绝对路径(或者相对路径)添加到cordova项目中
cd cordova_project && cordova plugin add /path-to-you-plugin-parent-dir/cordoin
看到下面的输出时可以说是安装成功了
Installing "win.wshore.cordo.plugin" for android
ANDROID_HOME=/home/mint/soft/sdk
JAVA_HOME=/home/mint/soft/jdk
Subproject Path: CordovaLib
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.
at build_dg1xzarrrmkc1xymj1x40eddf.run(/home/mint/workspace/wshore/cordo/platforms/android/build.gradle:138)
Incremental java compilation is an incubating feature.
:clean
:CordovaLib:clean
BUILD SUCCESSFUL
Total time: 1.507 secs
Adding win.wshore.cordo.plugin to package.json
Saved plugin info for "win.wshore.cordo.plugin" to config.xml
如果你修改了插件，那么可以通过删除+安装来使修改生效
页面调用demo：
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport"content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
</head>
<body>
<script src="cordova.js"></script>
<script>
document.addEventListener('deviceready', function () {
// 获取Cordoin对象
var Cordoin = cordova.require('win.wshore.cordo.plugin.Cordoin');
// 传递参数时弹出调用成功
Cordoin.test(["hello world"], function (message) {
alert("success:" + message);
}, function (message) {});
// 传递空参数时弹出调用失败
Cordoin.test([], function (message) {[]}, function (message) {
alert("failure:" + message);
});
});
</script>
</body>
</html>
网友评论