插件分为三部分,原生java 类 ,中间件(.js .xml),h5(前端)
第一步 创建 插件
第一次使用 pluman 需要安装
npm install -g plugman
创建插件命令
plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variableNAME=VALUE]
参数:
pluginName: 插件名字
pluginID: 插件id, egg : coolPlugin
oversion: 版本, egg : 0.0.1
directory:一个绝对或相对路径的目录,该目录将创建插件项目
variable NAME=VALUE: 额外的描述,如作者信息和相关描述
例:
plugman create --name firstCordovaPlugin --plugin_id firstCordovaPlugin --plugin_version 0.0.1
生成插件初始的目录文件结构
第二步配置关联,配置中间件
打开配置文件 plugin.xml
打开firstCordovaPlugin.js文件
开始配置
plugin.xml
<?xml version='1.0' encoding='utf-8'?>
<!--id:插件id,version:插件版本号 -->
<plugin id="firstCordovaPlugin" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<!--name:插件名称-->
<name>firstCordovaPlugin</name>
<!--src:js中间件相对目录地址-->
<js-module name="firstCordovaPlugin" src="www/firstCordovaPlugin.js">
<!--target:H5通过它调用js中间件方法,可以配置多个-->
<clobbers target="cordovaMin" />
</js-module>
<!--name:配置平台 android -->
<platform name="android">
<!--src: 插件原生java的类名-->
<!-- tartget-dir: src/包类"**会复制进项目包中-->
<source-file src="src/android/FirstCordova.java" target-dir="src/com/szzt/min"/>
<!-- target:"res/xml/config.xml", parent:"/*"-->
<config-file target="res/xml/config.xml" parent="/*">
<!-- name:"js中间件通过它调用java方法 -->
<feature name="loga">
<!-- value:原生插件类的包类路径** -->
<param name="android-package" value="com.szzt.min.FirstCordova"/>
</feature>
</config-file>
</platform>
</plugin>
firstCordovaPlugin.js
var exec = require('cordova/exec');
<!--第二个参数为.xml配置文件feature的name属性值 ,第三个 参数为原生java类中的action-->
exports.coolMethod = function(arg0, success, error) {
exec(success, error, "loga", "coolMethod", [arg0]);
};
在src文件下 创建 android/ FirstCordova.java 文件
FirstCordova.java
package com.szzt.min;
import android.util.Log;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;
public class FirstCordova extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if("coolMethod".equals(action)){
Log.i("--------->","success");
return true;
}
return false;
}
}
具体实现可以安装到项目编写
第三步 插件安装
行插件安装命令
cordova plugin add firstCordovaPlugin
查看目录
插件添加成功 后会在相应的目录出现1、2号文件
打开配置文件(6号)
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.szzt.min" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<feature name="Whitelist">
<param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
<param name="onload" value="true" />
</feature>
<name>sdnx</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-intent href="market:*" />
<preference name="loglevel" value="DEBUG" />
<feature name="ShowToast">
<param name="android-package" value="com.hand.toast.ShowToast" />
</feature>
<!-- 自动添加的 plugin.xml 中 feature 元素的内容到这里-->
<feature name="loga">
<param name="android-package" value="com.szzt.min.FirstCordova" />
</feature>
</widget>
打开4号文件
查看到//自动添加内容到 module.exports
并且clobber:cordovaMin 已经注册为内置对象
cordova.define('cordova/plugin_list', function(require, exports, module) {
//自动添加引用
module.exports = [
{
"id": "coolPlugin.CoolPlugin",
"file": "plugins/coolPlugin/www/CoolPlugin.js",
"pluginId": "coolPlugin",
"clobbers": [
"cordova.plugins.CoolPlugin"
]
},
{
"id": "firstCordovaPlugin.firstCordovaPlugin",
"file": "plugins/firstCordovaPlugin/www/firstCordovaPlugin.js",
"pluginId": "firstCordovaPlugin",
"clobbers": [
"cordovaMin"
]
}
];
module.exports.metadata =
// TOP OF METADATA
{
"cordova-plugin-whitelist": "1.3.2",
"coolPlugin": "0.0.1",
"firstCordovaPlugin": "0.0.1"
};
// BOTTOM OF METADATA
});
查看2号文件
cordova.define("firstCordovaPlugin.firstCordovaPlugin", function(require, exports, module) {
var exec = require('cordova/exec');
//coolMethod为action 的值 ;loga 为feature 的name值 关联原生java类
exports.coolMethod = function(arg0, success, error) {
exec(success, error, "loga", "coolMethod", [arg0]);
};
});
打开 FirstCordova.java
package com.szzt.min;
import android.util.Log;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;
public class FirstCordova extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
//coolMethod action的值js中间件里一致
if("coolMethod".equals(action)){
Log.i("--------->","success");
return true;
}
return false;
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<button class="amazing" onclick="logl()" >click</button>
</body>
<!--必须引入cordova.js /插件初始化过程-->
<script type="text/javascript" src="cordova.js"></script>
<script >
// 直接用cordovaMin对象(在cordova_plugins.js 里有介绍) 调用插件js中的coolMethod方法
function logl(){
cordovaMin.coolMethod();
}
</script>
</html>
运行程序,点击按钮