您的位置：首页 > 移动开发 > Android开发

PhoneGap(Cordova) ：js调用native（2） ------Android篇

2014-11-30 16:10 567 查看
本文讲解如何使用PhoneGap(Cordova) 调用Android中的方法

1. 使用原生的方法

在演示前介绍下不使用PhoneGap前是如何实现的
http://blog.csdn.net/qqgrid/article/details/41623621

2.使用PhoneGap的方法

注意，例子使用的是cordova-2.6.0.js

(1)创建自定义的Plugin

action：动作的标记
args: js端提交的参数

public class MyPlugin extends CordovaPlugin {
    public static final String ACTION_TEST = "test";

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {

        Log.e("execute","action:"+action);
        try {
            if (ACTION_TEST.equals(action)) {
                String message = args.getString(0);
                callbackContext.success("message :"+message);
                return true;
            }

            callbackContext.error("Invalid action");
            return false;
        } catch(Exception e) {
            System.err.println("Exception: " + e.getMessage());
            callbackContext.error(e.getMessage());
            return false;
        }
    }
}


(2)配置config.xml

在res/xml/config.xml中配置Plugin

<plugins>
        <plugin name="MyPlugin" value="com.phonegapdemo.MyPlugin"/>
</plugins>


(3)创建myPlugin.js

var MyPlugin = {
             CalendarPlugin: function (success, fail, message) //message为调用的参数，可按实际添加在下面[]中
             {
                  return  PhoneGap.exec(
                        function (args) {success(args);}, //返回成功调用function
                        function (args) {fail(args);},   //返回失败调用的function
                        'CalendarPlugin', //java类
                        'test',//action
                        [message]   //传给android端excute的args参数
                        );
             }

             ,test:function(){  //多个funcion添加方法
                    alert("test");
             }
};


（4）index.html代码

导入cordova-2.6.0.js
导入myPlugin.js
思路：通过onclick调用clickAction（）方法，获得message的value后，调用前面myPlugin中定义的方法里面CalendarPlugin()方法，并传入参数，包括successFunction，failFunction，message

<!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-2.6.0.js"></script>
        <script type="text/javascript" src="js/myPlugin.js"></script>
        <script type="text/javascript">

            function clickAction(){
                var str =  document.getElementById("message").value;
                MyPlugin.CalendarPlugin(
                    function(r){alert("success  | " +r);},
                    function(e){alert(e+" | error");},
                    str
        );
            }
        </script>

        <title>Hello World</title>
    </head>
    <body>
    <input type="text" id="message"/>
    <input type="button" onclick="javaScript:clickAction();"  value="click">
    <span id="content"></span>
    </body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航