cordova插件编写与使用

安装插件

npm install -g plugman

创建目录

plugman create --name EchoPlugin --plugin_id com.joker.cordova --plugin_version 1.0.0
创建成功后你将得到如下目录:

创建目录

plugin.xml内容

<?xml version='1.0' encoding='utf-8'?>
<plugin id="com.joker.cordova" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>EchoPlugin</name>
    <js-module name="EchoPlugin" src="www/EchoPlugin.js">
        <clobbers target="cordova.plugins.EchoPlugin" />
    </js-module>
</plugin>

id为plugman创建命令使用的--plugin_id
version为创建命令使用的--plugin_version

添加android平台(插件)

cd EchoPlugin/
plugman platform add --platform_name android
执行后你将得到如下目录:

添加android平台

EchoPlugin为默认插件,该插件返回调用的字符串参数。
EchoPlugin.java为继承CordovaPlugin插件的类,主要内容如下

public class EchoPlugin extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("coolMethod")) {
            String message = args.getString(0);
            this.coolMethod(message, callbackContext);
            return true;
        }
        return false;
    }

    private void coolMethod(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

核心方法execute执行JS的调用
接收参数:
action调用方法名,
args调用方法传递的参数
callbackContext异步回调函数,向JS返回执行结果

添加package.json

(插件安装需要)
添加后目录

添加package.json

package.json内容

{
    "name": "cordova-plugin-echo",
    "version": "1.0.0",
    "description": "A sample Apache Cordova application that responds to the deviceready event.",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Apache Cordova Team",
    "license": "Apache-2.0",
    "cordova": {
        "id": "cordova-plugin-echo",
        "platforms": [
            "android"
        ]
    }
}

文件内容根据自己使用调整

修改插件配置文件plugin.xml

配置解析

plugin.xml

<?xml version='1.0' encoding='utf-8'?>
<plugin 
    id="cordova-plugin-echo" 
    version="1.0.0" 
    xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>EchoPlugin</name>
    <js-module name="EchoPlugin" src="www/EchoPlugin.js">
        <clobbers target="EchoPlugin" />
    </js-module>
    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="EchoPlugin">
                <param name="android-package" value="com.joker.cordova.EchoPlugin" />
            </feature>
        </config-file>
        <config-file parent="/*" target="AndroidManifest.xml"></config-file>
        <source-file src="src/android/EchoPlugin.java" target-dir="src/com/joker/cordova" />
    </platform>
</plugin>

在Ionic中使用

安装插件
cordova plugin add /Users/joker/Workspace/ionic/cordova/EchoPlugin
插件调用

插件调用

cordova run android
顺利的话在APP中可以看到alert的信息。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言:用cordova开发hybrid app的过程中,由于是html5开发的app,在手机上很多权限受限制...
    京东内部优惠券阅读 5,453评论 5 65
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,909评论 25 708
  • Plugin.xml plugin.xml文件定义了你的插件所需的结构和设置。它有几个元素来提供有关你的插件的详细...
    葛高召阅读 1,222评论 0 1
  • 这几天一直被一个问题困扰着,再加上炎热的天气,更是让我烦上加烦,有瞬间被点爆的感觉。 其实问题的原因很简单,我的鼠...
    西云阅读 283评论 0 0
  • 广告,作为宣传手段,是广告主花费一定的广告费用通过广告媒介向广告对象介绍广告信息,促使广告对象购买其商品,最终使...
    呢程阅读 2,996评论 0 2