XX程序媛学习笔记--Cordova(PhoneGap)通过plugins调用Android Native并回调

最新推荐文章于 2022-09-14 17:51:23 发布

tangjiarao

最新推荐文章于 2022-09-14 17:51:23 发布

阅读量3k

点赞数

分类专栏： Android开发文章标签： android cordova plugins phonegap 代码

本文链接：https://blog.csdn.net/tangjiarao/article/details/48288875

版权

Android开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

最近在学cordova，发现网上好多PhoneGap的plugins使用方法，一开始以为cordova也可以这样使用，但是实际是i think too much。现在cordova就相当于PhoneGap，所以使用plugins调用Android java代码就使用现在cordova方法。

（1）配置cordova(phoneGap)参考下面两个链接：

http://www.zwlme.com/frontend/phonegap-getting-started-tutorial-1.html

http://blog.csdn.net/aaawqqq/article/details/19755179

注意：一定要配置好ANDROID_HOME及其他环境变量

如果用npm因为NetWork错误无法下载的话，请使用镜像

1.打开命令行输入 npm config set registry http://registry.cnpmjs.org

2.再输入 npm info underscore

3.编辑 ~/.npmrc 加入下面内容 registry = http://registry.cnpmjs.org

（2）导入项目结构如下

（3）实现html给android Activity传值

效果演示：

InputData.html显示三个输入框，并且输入数据

点击Enter按钮跳转到Activity——dataListActivity，显示了在html输入的内容，并且在EditText输出内容

点击sendback按钮，回调到html，并且用弹出框输出内容

实现步骤：

①在ivy.cordova.example包下有一个类MainActivity，其中的loadUrl方法就是加载了需要显示的html

public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        loadUrl("file:///android_asset/www/InputData.html");
    }
}

②所以先写需要加载的html文件——InputData.html，请将该文件放在assets/www/该目录下

通过效果演示可以看到有三个输入框，那怎么获取输入框内容并且传给Activity呢？

<script type="text/javascript" src="js/dataTransportJs.js"></script>
    <script type="text/javascript" charset="utf-8">
    document.addEventListener("deviceready", onDeviceReady, true);

    function onDeviceReady(){
    //获取输入框和按钮对象
        var text1 = document.getElementById("name");
        var text2 = document.getElementById("Number");
        var text3 = document.getElementById("Age");
        var btn =document.getElementById("Enter");

        //给对象加上监听
        btn.addEventListener('click', onClick);

        function onClick(){
        //获取输入框值
            var Name =text1.value;
            var Number =text2.value;
            var Age =text3.value;
            var success = function(message) { alert("Success" + message); };
            var error = function(message) { alert("Oopsie! " + message); };

            //用插件调用值
            dataTransportPlugins.createEvent(Name, Number, Age, success, error);
        }
    }
    </script>

以下代码就是调用了dataTransportPlugins这个插件里面的createEvent方法并且传递了五个参数：

            dataTransportPlugins.createEvent(Name, Number, Age, success, error);

参数：1,2,3都是输入框的值,而success,error分别是调用成功和失败的回调方法,且message是通过插件plugin返回的Activity值

            var success = function(message) { alert("Success" + message); };
            var error = function(message) { alert("Oopsie! " + message); };

③但是要用这个插件的话，就需要定义它引入它，它不会无缘无故就可以使用的吧，所以用下面一句代码引入这个插件，那就是说插件其实是一个js文件

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

完整html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <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" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>InputData</title>

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

    <script type="text/javascript" src="js/dataTransportJs.js"></script>
    <script type="text/javascript" charset="utf-8">
    document.addEventListener("deviceready", onDeviceReady, true);

    function onDeviceReady(){
    //获取输入框和按钮对象
        var text1 = document.getElementById("name");
        var text2 = document.getElementById("Number");
        var text3 = document.getElementById("Age");
        var btn =document.getElementById("Enter");

        //给对象加上监听
        btn.addEventListener('click', onClick);

        function onClick(){
        //获取输入框值
            var Name =text1.value;
            var Number =text2.value;
            var Age =text3.value;
            var success = function(message) { alert("Success" + message); };
            var error = function(message) { alert("Oopsie! " + message); };

            //用插件调用值
            dataTransportPlugins.createEvent(Name, Number, Age, success, error);
        }
    }
    </script>

</head>


<body>

<p>
    <label for="name"> Name: </label>
    <input type="text" name="input" id="name" value=""  />
</p>
<p>
    <label for="name"> Number: </label>
    <input type="text" name="input" id="Number" value="" />
</p>
<p>
    <label for="name"> Age: </label>
    <input type="text" name="input" id="Age" value="" />
</p>

<button id="Enter">Enter</button>
</body>
</html>

④js文件相当于一个html和android交互的一个接口，js代码如下：

//在html被调用的插件
var dataTransportPlugins = {

    //在html被调用的方法
    createEvent: function(Name, Number, Age, successCallback, errorCallback) {
    
        cordova.exec(
        
            //成功的回调
            successCallback,
            
            //失败的回调
            errorCallback,
            
            //java类插件名称
            'DataTransportPlugin',
            
            //执行插件的动作
            'dataTransport',
            
            //数据组这里以json形式
            [{
                "Name": Name,
                "Number": Number,
                "Age": Age,
            }]
        );
    }
}

参数1.2.略

参数3.js文件既然是一个接口，那就需要有一个实现接口的java类，这个参数就是实现类的名字

参数4.可以将java实现类想象成是一扇门，而这个参数就是一把钥匙，java实现类会通过对这个参数验证来判断有没有匹配的方法

参数5.html需要传给Activity的数据

数据组的写法是：

[参数1,参数2,……]

每个参数可以是以{}为一组的数据（代码例子），或者是单个值[name,number],他们获取的方法不同，但是都是以JSON的格式进行传递

⑤java实现类——DataTransportPlugin.java

public class DataTransportPlugin extends CordovaPlugin {

    //执行插件的动作，可以有多个动作
    public static final String ACTION_FLAG = "dataTransport";

    CallbackContext callbackContext;

    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        try {
            //判断接口传来的动作是否跟定义的动作一致
            if (ACTION_FLAG.equals(action)) {

                this.callbackContext = callbackContext;
                //获取json
                JSONObject argJson = args.getJSONObject(0);
                //解析json并且传递给Activity
                Intent mIntent = new Intent();
                mIntent.putExtra("Name",argJson.getString("Name"));
                mIntent.putExtra("Number",argJson.getString("Number"));
                mIntent.putExtra("Age",argJson.getString("Age"));
                mIntent.setClass(cordova.getActivity(), dataListActivity.class);
                this.cordova.startActivityForResult(this, mIntent, 1);
                return true;
            }
            else{
                callbackContext.error("Invalid action");
                return false;
            }

        } catch (Exception e) {

            callbackContext.error(e.getMessage());
            return false;
        }
    }

    /**
     * activity 的回调接收方法
     * @param requestCode   The request code originally supplied to startActivityForResult(),
     *                      allowing you to identify who this result came from.
     * @param resultCode    The integer result code returned by the child activity through its setResult().
     * @param intent        An Intent, which can return result data to the caller (various data can be
     */
    public void onActivityResult(int requestCode, int resultCode, Intent intent) {
        switch (resultCode) {
            case Activity.RESULT_OK:

                //获得从Activity传来的值
                Bundle b=intent.getExtras();
                String str=b.getString("flags");

                //通过PluginResult和callbackContext返回给js接口
                PluginResult pluginResults = new PluginResult(PluginResult.Status.OK, str);
                callbackContext.sendPluginResult(pluginResults);
                pluginResults.setKeepCallback(true);
                callbackContext.success();
                break;
            default:
                break;
        }
    }
}

通过下面的代码可以获取html传递过来的数据，例子中只有一个以{}包括的参数
                //获取json
                JSONObject argJson = args.getJSONObject(0);

通过以下代码解析了json并且跳转到Activity——dataListActivity（跳转方法用startActivityForResult，则说明需要有OnActivityResult方法来接收dataListActivity回传的数据）

 //解析json并且传递给Activity
                Intent mIntent = new Intent();
                mIntent.putExtra("Name",argJson.getString("Name"));
                mIntent.putExtra("Number",argJson.getString("Number"));
                mIntent.putExtra("Age",argJson.getString("Age"));
                mIntent.setClass(cordova.getActivity(), dataListActivity.class);
                this.cordova.startActivityForResult(this, mIntent, 1);

通过以下代码，将从dataListActivity回传的数据和一个成功的标识PluginResult.Status.OK包装成一个PluginResult对象，通过CallbackContext对象发送PluginResult

 //通过PluginResult和callbackContext返回给js接口
                PluginResult pluginResults = new PluginResult(PluginResult.Status.OK, str);
                callbackContext.sendPluginResult(pluginResults);
                pluginResults.setKeepCallback(true);
                callbackContext.success();

⑥dataListActivity.java

public class dataListActivity extends Activity {
        private Button bt;
        private EditText et;
        private TextView tv1,tv2,tv3;
        private Intent mIntent;
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);

            bt =(Button)findViewById(R.id.bt);
            et =(EditText)findViewById(R.id.et);
            tv1 =(TextView)findViewById(R.id.tv1);
            tv2 =(TextView)findViewById(R.id.tv2);
            tv3 =(TextView)findViewById(R.id.tv3);

            //获取Intent的值
            mIntent = this.getIntent();
            tv1.setText("Name: "+ mIntent.getStringExtra("Name"));
            tv2.setText("Number: "+ mIntent.getStringExtra("Number"));
            tv3.setText("Age: "+ mIntent.getStringExtra("Age"));

            bt.setOnClickListener(new View.OnClickListener() {

                public void onClick(View v) {

                    //回调值
                    String msg = et.getText().toString();
                    mIntent.putExtra("flags", "msg from Activity: " + msg);
                    setResult(RESULT_OK, mIntent);
                    finish();
                }
            });
        }
    }

⑦还需要在res/xml/config.xml文件中的widget标签下注册插件
<feature name="DataTransportPlugin">
        <param name="android-package" value="ivy.cordova.example.plugins.DataTransportPlugin" />
    </feature>


⑧在AndroidManifest.xml中注册dataListActivity页面
<activity android:name=".dataListActivity" android:theme="@style/AppTheme"/>

目录结构：

系列文章：XX程序媛学习笔记--Cordova(PhoneGap)通过plugins调用Android Native并回调

参考博客：

http://www.cnblogs.com/lee0oo0/archive/2012/06/07/2540059.html

http://www.tuicool.com/articles/6N3yie

http://blog.csdn.net/knxw0001/article/details/11219811

http://rensanning.iteye.com/blog/2163892

tangjiarao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
XX程序媛学习笔记--Cordova(PhoneGap)通过plugins调用Android Native并回调

最近在学cordova，发现网上好多PhoneGap的plugins使用方法，一开始以为cordova也可以这样使用，但是实际是i think too much。现在cordova就相当于PhoneGap，所以使用plugins调用Android java代码就使用现在cordova方法。（1）配置cordova(phoneGap)参考下面两个链接：http://www.zwl
复制链接

扫一扫