【前端】Cordova自定义插件开发步骤（基于Android）

最新推荐文章于 2024-03-17 09:59:50 发布

阏男秀

最新推荐文章于 2024-03-17 09:59:50 发布

阅读量2.2k

点赞数

分类专栏： Android 前端文章标签： Android 前端 Cordova JavaScript

本文链接：https://blog.csdn.net/yannanxiu/article/details/78252049

版权

Android 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

前言

Cordova概述

Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。应用在每个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能，比如说：传感器、数据、网络状态等。

由于项目需要，需要自己开发Cordova插件。下面查阅网上资料后的总结。

基本环境

首先需要确保拥有基本的环境，笔者的基本环境是这样的：

Windows 10 x64
npm v3.10.10
node v6.11.2
Android Studio 2.2.3

安装cordova

下面使用npm安装cordova

npm install -g cordova

创建一个测试项目

首先创建一个hello项目，下面步骤来自官网cordova的步骤

创建App

cordova create hello com.example.hello HelloWorld

添加平台

之后所有后续命令都在项目目录（hello目录）里执行

cd hello

添加Android平台

cordova platform add android --save

检查你当前平台设置状况

cordova platform ls

将工程导入Android Studio

打开Android Studio
选择菜单栏的「File」->「New」->「Import Project」
选择「…\hello\platforms\android」目录
导入完成

开发插件

安装pluman

npm install -g plugman

创建插件

创建一个插件的命令参数如下：

plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]

<pluginName>：插件名字
<pluginID>：插件id
<version>：版本
<directory>：可选。一个绝对或相对路径的目录，该目录将创建插件项目
variable NAME=VALUE：可选。额外的描述，如作者信息和相关描述

下面是一个示例：

plugman create --name HelloPlugin --plugin_id hello-plugin --plugin_version 0.0.1

运行上面示例后就会在当前目录下生成一个HelloPlugin文件夹。其目录结构如下：

│  plugin.xml
│
├─src
└─www
        HelloPlugin.js

编写Java

我们需要根据规范来开发一个插件，下面在HelloPlugin/src目录下创建android文件夹，再新建一个Hello.java文件，内容和如下：

package com.hello.toast;

import android.widget.Toast;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

public class HelloPlugin extends CordovaPlugin {
    private CallbackContext mCallbackContext;

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        this.mCallbackContext = callbackContext;
        if ("coolMethod".equals(action)) {
            String msg = args.getString(0);
            Toast.makeText(cordova.getActivity(), msg, Toast.LENGTH_SHORT).show();
            callbackContext.success("success");
            return true;
        }
        mCallbackContext.error("error");
        return false;
    }
}

要注意的是，if ("coolMethod".equals(action))对应HelloPlugin\www\HelloPlugin.js中的exports.coolMethod和exec()方法的第四个参数。

HelloPluginJava类对应HelloPlugin.js文件名称。

也就是说，改了Java中coolMethod或类名，也需要修改JS中对应的名称，否则可能会导致找不到Java类或方法。

HelloPlugin\www\HelloPlugin.js完整代码如下：

cordova.define("hello-plugin.HelloPlugin", function(require, exports, module) {
var exec = require('cordova/exec');

exports.coolMethod = function (arg0, success, error) {
    exec(success, error, 'HelloPlugin', 'coolMethod', [arg0]);
};

});

修改`plugin.xml`

打开HelloPlugin/plugin.xml文件，在标签<plugin>内添加下面代码

<plugin>
    ...

    <platform name="android">  
        <source-file src="src/android/HelloPlugin.java" target-dir="src/com/hello/toast"/>  

        <config-file target="res/xml/config.xml" parent="/*">  
            <feature name="HelloPlugin">  
                <param name="android-package" value="com.hello.toast.HelloPlugin"/>  
            </feature>  
        </config-file>  
    </platform>  
</plugin>

添加插件

之后就可以添加插件测试一下了

cordova plugin add HelloPlugin

如果需要移除插件则执行：

cordova plugin remove HelloPlugin

看下Android Studio，有文件添加进来了。

调用插件

在index.html下某个地方插入下面语句进行测试，index.html是创建项目时自动生成的。

<Button onclick="cordova.plugins.HelloPlugin.coolMethod('Toast', null, null)">Show Toast</Button>

比如在下面位置插入：

...

<body>
<div class="app">
    <h1>Apache Cordova</h1>
    <div id="deviceready" class="blink">
        <p class="event listening">Connecting to Device</p>
        <p class="event received">Device is Ready</p>
    </div>
    <Button onclick="cordova.plugins.HelloPlugin.coolMethod('Toast', null, null)">Show Toast</Button>
</div>

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>

...

点击按钮，即可弹出原生的Toast。

注意事项

如果出现下面错误

"Refused to execute inline event handler because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
                                                             ", source: file:///android_asset/www/index.html (47)

解决办法是注释掉index.html中的第一行<meta>。

<html>
    <head>
        <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        -->
    ...
</html>

参考资料