天天看点

(2)cordova android自定义插件开发

插件分为三部分,原生java 类 ,中间件(.js .xml),h5(前端)

第一步 创建 插件

第一次使用 pluman 需要安装

npm install -g plugman

创建插件命令

参数:

pluginName: 插件名字

pluginID: 插件id, egg : coolPlugin

oversion: 版本, egg : 0.0.1

directory:一个绝对或相对路径的目录,该目录将创建插件项目

variable NAME=VALUE: 额外的描述,如作者信息和相关描述

例:

生成插件初始的目录文件结构

(2)cordova android自定义插件开发

第二步配置关联,配置中间件

打开配置文件 plugin.xml

(2)cordova android自定义插件开发

打开firstCordovaPlugin.js文件

(2)cordova android自定义插件开发

开始配置

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
           
(2)cordova android自定义插件开发

查看目录

(2)cordova android自定义插件开发

插件添加成功 后会在相应的目录出现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="[email protected]" 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>
           

运行程序,点击按钮

(2)cordova android自定义插件开发