Cordova插件开发

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u013003052/article/details/85142558

Cordova 插件开发

Getting Start

安装

$ npm install -g cordova
$ npm install -g plugman

创建HelloWorld

$ cordova create hello com.example.hello HelloWorld
$ cordova platform add ios
$ cordova platform add android

步骤

1. 编译项目,确定app可以运行

$ cordova build android

2. 进入plugins目录创建插件

$ cd plugins
$ plugman create --name MyPlugin --plugin_id com.demo.myplugin --plugin_version 0.1.0

3. 添加安卓平台支持,进入刚刚创建的插件目录

$ cd MyPlugin
$ plugman platform add --platform_name android

4. 修改plugin.xml

<source-file src="src/android/MyPlugin.java" target-dir="src/plugin_id/MyPlugin" />
改为:
<source-file src="src/android/MyPlugin.java" target-dir="src/plugin_id" />

5. 编写可被JavaScript调用的Java代码,进入插件目录src/android/MyPlugin.java

package com.qdc.myplugin;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.widget.Toast;
import android.util.Log;

/**
 * This class echoes a string called from JavaScript.
 */
public class MyPlugin extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("showToast")) {
            Log.d("execute", args.toString());
            Toast.makeText(cordova.getContext(), args.toString(), Toast.LENGTH_SHORT).show();
            return true;
        }
        return false;
    }
}

6. 编写调用该Java代码的JavaScript方法。进入插件目录下www/MyPlugin.js

var exec = require('cordova/exec');

exports.showToast = function (args, success, error) {
    exec(success, error, 'MyPlugin', 'showToast', args);
};

当执行exec方法时,需要传入几个参数,success和error都为function,
'MyPlugin’为java类名,'showToast’为action name,args为数组参数如[1,2,3]。
执行该方法后,会回调到Java中的execute(String action, JSONArray args, CallbackContext callbackContext)方法,上述Java代码里接收到action为"showToast"弹出一个吐司。

7. 将插件MyPlugin添加至Android项目当中。

注意!进入项目根目录

cd ../../

plugman install -d --platform android --project platforms/android --plugin [这个插件的全路径]

8. 然后就可以在js去调用了。

进入项目根目录下,www/js/index.js,编写调用方法:

var app = {
    // Application Constructor
    initialize: function () {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function () {
        document.getElementById('btn_show_toast').addEventListener('click', function () {
            cordova.plugins.MyPlugin.showToast("hi", null, null);
        })
    }
};

cordova.plugins.MyPlugin是在plugin.xml定义的,在插件目录下plugin.xml中有如下定义:

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

其中,标签clobbers中定义的cordova.plugins.MyPlugin即为js调用的方法名称。
在工程项目根目录 www/js/index.js,可以在生命周期回调中去调用。生命周期可以在官方文档中去查看具体定义。

showToast()方法即为在插件目录下www/xxx.js定义的模块导出方法:

var exec = require('cordova/exec');

exports.showToast = function (args, success, error) {
    exec(success, error, 'MyPlugin', 'showToast', args);
};

更新插件

每次修改了插件代码,都需要将原有插件卸载,然后重新安装。进入项目根目录。

卸载插件:

plugman uninstall --platform android --project platforms/android --plugin [这个插件的id,可在plugin.xml中查看]

重新安装:

plugman install -d --platform android --project platforms/android --plugin [这个插件的全路径]

配置中出现的问题:

1

  • What went wrong:
    A problem occurred configuring project ‘:CordovaLib’.

Could not resolve all files for configuration ‘:CordovaLib:classpath’.
Could not find intellij-core.jar (com.android.tools.external.com-intellij:intellij-core:26.0.1).
Searched in the following locations:
https://jcenter.bintray.com/com/android/tools/external/com-intellij/intellij-core/26.0.1/intellij-core-26.0.1.jar

解决办法:

找到 platforms\android\CordovaLib\build.gradle文件,将jcenter()
与maven换位置:

buildscript {
    repositories {
        maven {
            url "https://maven.google.com"
        }
        jcenter()
    }

2

m-c02x2218jg5m:hello vn0ld1q$ plugman install -d --platform android --project platforms/android --plugin plugins/MyPlugin
Cannot read property ‘fail’ of undefined TypeError: Cannot read property ‘fail’ of undefined

解决办法:

使用plugman来安装,需要定义自定义插件的全路径,例如这样:
$ plugman install -d --platform android --project platforms/android --plugin ~/Documents/CordovaProjects/hello/plugins/MyPlugin

展开阅读全文

没有更多推荐了,返回首页