PhoneGap之自定义插件

2023-08-10 12:52:46

PhoneGap：作为原生App，Java（这里面是指Android的）与JavaScript 的通信桥梁，使得我们的混合开发更加得心应手，我是与Android结合的混合开发。

但在这里不得不吐槽一下PhoneGap这个坑：更新速度很快，但是学习资料的更新却远远跟不上节奏。而且必须按照它的套路走，而且就算按着套路走也可能会出错，

最后还是得靠自己摸索。。。。

好了，不说那么多了，下面介绍PhoneGap自定义插件的使用（也可以说是CordovaPlugin），主要分以下步骤：

1）下载最新版的cordova.jar，我在使用的是cordova3.5.0.jar 版本的，把下载的 cordova-x.x.x.jar导入到工程的libs目录下来。

说明：这个cordova.jar 是用于Android原生Java语言这边使用的，有了这个架包就可以在Android这边编写自定义的插件。

2）把cordova.js，cordova_plugin.js 这两个JavaScript文件复制到www文件目录下面。

说明：这两个js文件是用于JavaScript调用插件中方法使用。

3）在www文件目录下新建一个 plugins 文件夹目录。

说明：用于存放自定义插件的JavaScript文件

4）编写自定义插件中的 java 代码部分：FirstPlugin.java

<span style="font-size:14px;">package com.customcordovaplugin.plugin;

import org.apache.cordova.CallbackContext;

import org.apache.cordova.CordovaPlugin;

import org.json.JSONArray;

import org.json.JSONException;

/**

 * Created by long on 2016/5/10.

 */

public class FirstPlugin extends CordovaPlugin {

    @Override

    public boolean execute(String action, JSONArray args, CallbackContext callbackContext)

            throws JSONException {

        //检查方法名，例如我们定义一个名为sayHello的方法

        if("sayHello".equals(action)){

            /**

             * 关于回调函数

             * 成功就执行 callbackContext.success(param)，从而触发成功回调函数

             * 失败就执行 callbackContext.error(param)，从而触发失败回调函数

             * 如果不需要回调函数，那么就没必要调用这两个方法

             */

            //获取第一个参数，如果有多个参数的话可以使用索引号分别获取

            String message = args.getString(0);

            //检查输入值是否为空，如果为空值就会调用 callbackContext.error()方法

            //这会导致失败回调函数被调用

            if(message!=null && message.length()>0){

                callbackContext.success("Hello: "+message+"!");

            }else{

                callbackContext.error("输入值为空！");

            }

            //最后还需要返回逻辑值 true 来表明方法存在

            return true;

        }

        //否则，如果方法名不符，那么就返回false

        //在网页的 JavaScript 程序中调用时就会导致“MethodNotFound”错误

        return false;

    }

}

</span>

5）编写自定义插件中的 JavaScript 部分：firstplugin.js

<span style="font-size:14px;">cordova.define("firstplugin_id",

    function(require, exports, module) {

    	//引入必要的类

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

        //创建一个JavaScript类

        function FirstPlugin(){};

        //为其添加一个方法，在方法中调用exec()方法

        FirstPlugin.prototype.sayHello = function(name,successCallback,failureCallback){

        	exec(successCallback, failureCallback,

        				'FirstPlugin', 'sayHello', [name]);

        };

        //公共的对象是 FirstPlugin 实例

        module.exports = new FirstPlugin();

    }

);</span>

6）编写程序入口html文件：index.html

<span style="font-size:14px;"><!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="format-detection" content="telephone=no" />

        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

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

		<script type="text/javascript" src="plugins/firstplugin.js"></script>

        <title>Simple</title>

    </head>

    <body onload="onLoaded()">

        <label for="inputName">请输入名字: </label>

		<input type="text" id="inputName">

        <input type="button" onclick="clickHandler()" value="sayHello" />

        <script>

        	//当DOM加载完毕，注册deviceready事件

        	function onLoaded(){

        		//注册deviceready事件监听，指定deviceready事件处理函数

        		document.addEventListener("deviceready",onDeviceReady,false);

        	}

        	//成功回调函数

        	function onSuccess(data){

        		alert(data);

        	}

        	//失败回调函数

        	function onError(err){

        		alert(err);

        	}

        	//deviceready 事件处理函数，PhoneGap 完成加载后调用该函数

        	function onDeviceReady(){

        		//启动所有input元素

        		var nodelist = document.getElementsByTagName('input');

        		var nodeLen = nodelist.length;

        		for(var i=0;i<nodeLen;i++){

        			nodelist[i].disabled = false;

        		}

        	}

        	//按钮单击事件处理函数

        	function clickHandler(){

        		//获取输入文本框中的字符，并将其作为参数传递给sayHello()方法

        		inputName = document.getElementById("inputName");

        		var dialog = com.mine.FirstPlugin;

        		dialog.sayHello(inputName.value, onSuccess, onError);

        	}

        </script>

    </body>

</html></span>

说明：

<span style="font-size:14px;">        		var dialog = com.mine.FirstPlugin;    <span style="font-family: Arial, Helvetica, sans-serif;">是在后面讲到的cordova_plugins.js文件中配置的</span>

        		dialog.sayHello(inputName.value, onSuccess, onError);</span>

<span style="font-size:14px;">调用的这个sayHello方法就是调用了 firstplugin.js 文件中的这个方法：</span>

<span style="font-size:14px;"><pre name="code" class="javascript">        //为其添加一个方法，在方法中调用exec()方法

        FirstPlugin.prototype.sayHello = function(name,successCallback,failureCallback){

        	exec(successCallback, failureCallback,

        				'FirstPlugin', 'sayHello', [name]);

        };</span>

7）接下来就是配置config.xml文件，在res下面新建xml文件夹，并且将config.xml 放到该文件夹下面，config.xml 代码如下：

<span style="font-size:14px;"><widget xmlns     = "http://www.w3.org/ns/widgets"

        id        = "io.cordova.helloCordova"

        version   = "2.0.0">

    <feature name="FirstPlugin">

        <param name="android-package" value="com.customcordovaplugin.plugin.FirstPlugin"/>

    </feature>

</widget></span>

说明：value的值就是 FirstPlugin.java 文件的路径及名称

8）配置cordova_plugin.js 文件，cordova_plugins.js代码如下：

<span style="font-size:14px;">cordova.define('cordova/plugin_list',function(require, exports, module){

	module.exports = [{

		"file": "plugins/firstplugin.js",       //表示注册和连接JavaScript文件的位置

		"id": "firstplugin_id",                 //表示唯一的标示

		"clobbers": ["com.mine.FirstPlugin"]    //表示可以引用的接口(用于html中调用JavaScript的方法（自定义）)

	}

	module.exports.metadata = {

		"firstplugin_id": "1.0",          //插件的版本号

	}

});

</span>

到这里，PhoneGap自定义插件的工作完成了，PhoneGap的学习到处是坑，大家学习的时候细心点。

码农公寓

相关文章