PhoneGap之自定义插件

最新推荐文章于 2021-05-26 16:32:10 发布

longduyuan

最新推荐文章于 2021-05-26 16:32:10 发布

阅读量111

点赞数

文章标签： javascript java 移动开发 ViewUI

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 οnlοad="onLoaded()">
        <label for="inputName">请输入名字: </label>
		<input type="text" id="inputName">
        <input type="button" οnclick="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的学习到处是坑，大家学习的时候细心点。