自定义cordova插件步骤

系统管理员 2022-05-23 01:19 206阅读 0赞

1、首先安装plugman :

npm install -g plugman

2、创建一个插件/Create A Plugin

plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]
    	 
    	 Parameters:
    	 - <pluginName>: The name of the plugin
    	 - <pluginID>: An ID for the plugin, ex: org.bar.foo
    	 - <version>: A version for the plugin, ex: 0.0.1
    	 - <directory>: An absolute or relative path for the directory where the plugin project will be created
    	 - variable NAME=VALUE: Extra variables such as description or Author
    	 
    	 eg: plugin create --name test --plugin_id org.apache.test --plugin_version 0.0.1 /path/to/project

创建后的目录结构如下:(一个简单的插件目录)

![70][]

后续为了插件能正常发布，以及可以被其他npm注册的文件使用该插件，需要创建package.json文件

plugman createpackagejson <directory>
    eg:plugman createpackagejson c:/path/to/plugin

以上步骤建立在安装了plugman之后：

npm install -g plugman

3、插件plugin.xml说明及配置

js-module标签指定了通用JavaScript接口的路径。

如下：

<js-module name="test" src="www/test.js">
        <clobbers target="test" />
    </js-module>

name：即为插件接口名称；  
clobbers：用于指定module.exports被插入在window对象的命名空间。你可以有很多的clobbers只要你喜欢。创建window上的任何对象不可用；  
这里module.exports被插入到window对象window.test，即调用时用widow.test

platform标签指定插件所支持的平台

如下：

【官方解释】：config-file标签封装了一个注入到平台特定的config.xml文件中的特征标签，以使平台知道附加的代码库。 header-file和source-file标签指定了库的组件文件的路径  
【翻译】：config-file标签把该插件注入到对应的平台（Android、IOS..）内部,以便正常使用  
feature标签指定插件对应的JAVA类名称；  
feature内部的param如上定义即可，修改下value的最后一个值为对应的JAVA类名即可，方便区分  
source-file标签中src为JAVA类路径，target-dir为插件导入的目标位置（此处说明可能不标准）；

以上为Android示例，IOS下配置类似，只是貌似多了header-file标签（具体以官方为准）；

Android Permissions

如若该插件需要访问手机对应权限，则需要添加如下配置，加上所需要的权限即可：

<config-file target="AndroidManifest.xml" parent="/*">
    	
    	<uses-permission android:name="android.permission.READ_CONTACTS" />
    </config-file>

其他的一些核心Activity或者Service需要的也可以配置；(以下两种头部声明方式貌似都行，具体使用只能使用其中一种)

<config-file target="AndroidManifest.xml" parent="application">
    	<config-file target="AndroidManifest.xml" parent="/manifest/application">
    		 <service android:name="com.xxx.xxx"
                   android:enabled="true"
                   android:exported="false">
                </service>
    	</config-file>

4、插件代码示例

config.xml定义，省略头尾以及js-module

接着添加JAVA文件

Then add the following to the src/android/Echo.java file:

package org.apache.cordova.plugin;
    
    	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 Echo extends CordovaPlugin {
    
    	@Override
    	public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    		if (action.equals("echo")) {
    			String message = args.getString(0);
    			this.echo(message, callbackContext);
    			return true;
    		}
    		return false;
    	}
    
    	private void echo(String message, CallbackContext callbackContext) {
    		if (message != null && message.length() > 0) {
    			callbackContext.success(message);
    		} else {
    			callbackContext.error("Expected one non-empty string argument.");
    		}
    	}
    	}

[70]: /images/20220523/8e972d15370e46febcd052ee5e8bddf7.png