使用 PhoneGap 从 Android 调用 Javascript答案

【问题标题】：Javascript calls from Android using PhoneGap使用 PhoneGap 从 Android 调用 Javascript
【发布时间】：2013-04-06 15:07:40
【问题描述】：

我有一个使用PhoneGap 构建的应用程序，我正在尝试通过本机代码与Javascript 通信。

在我的DroidGap 扩展类中：

@Override
public void onCreate(Bundle savedInstanceState) {
    Logger.log("oncreate");
    super.onCreate(savedInstanceState);
    super.init();
    super.appView.getSettings().setJavaScriptEnabled(true);
    super.appView.getSettings().setSupportZoom(true);
    super.appView.getSettings().setBuiltInZoomControls(true);
    super.appView.getSettings().setDisplayZoomControls(false);
    jsinterface = new CommunicationInterface(this, appView);
    super.appView.addJavascriptInterface(jsinterface, "communicationinterface"); 
}

javascript接口：

public class CommunicationInterface {
    private WebView mAppView;
    private DroidGap mGap;

    public CommunicationInterface(DroidGap gap, WebView view)  {
        mAppView = view;
        mGap = gap;
    }

    public String getTestString() {
        return "teststring";
    }

    public void parse(Object o) {
        Logger.log(o);
    }
}

Javacript 位于一个外部文件中（我创建了一个 HTML 文件，它在 header:<script type="text/javascript" src="scripts.js"></script> 中有这一行）

Scripts.js：

function sendToInterface() {
    alert("alert");
    var map = new Object();
    (...)
    window.communicationinterface.parse(map); //communication js -> android seems to work.
}

我在其他帖子中读到可以在 PhoneGap 和 Android 之间进行通信，但到目前为止我还没有取得任何成功。我确实设法创建了一个警报，但那是loadUrl("javascript:alert('Alert');")，但我也读到你不应该这样做，因为这就是sendJavascript() 的用途（它会导致泄漏、重新加载页面等）。我尝试通过sendJavascript() 方法拍摄几个字符串，但无济于事：

sendJavascript("javascript:alert('Alert');")
sendJavascript("javascript:sendToInterface();")
sendJavascript("sendToInterface();")
sendJavascript("window.sendToInterface();")

如何从原生通信 -> PhoneGap（或者我已经拥有的有什么问题）？到目前为止，其他帖子和问题并没有帮助我解决这个特定问题。

阅读：

编辑

我写了一个工作项目：

Java部分

import org.apache.cordova.DroidGap;
import org.json.JSONException;
import org.json.JSONObject;

import android.os.Bundle;
import android.util.Log;

public class App extends DroidGap {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.loadUrl("file:///sdcard/ds/index.html");
    System.out.println("loading from sdcard");
    Thread t = new Thread() {
      public void run() {
        try {
          for (int i = 0; i < 3; i++) {
            sleep(2000);
            sendValue("value " + i, "another vlaue " + i);
          }
        } catch (Exception e) {
          e.printStackTrace();
        }
      };
    };
    t.start();
  }

  public void sendValue(String value1, String value2) {

    System.out.println("sendvalue in app");
    JSONObject data = new JSONObject();
    try {
      data.put("value1", value1);
      data.put("value2", value2);
    } catch (JSONException e) {
      Log.e("CommTest", e.getMessage());
    }
    String js = String.format("window.plugins.appcomm.updateValues('%s');",
        data.toString());
    this.sendJavascript(js);
  }
}

import org.apache.cordova.api.Plugin;
import org.apache.cordova.api.PluginResult;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.util.Log;

public class AppComm extends Plugin{

  private static AppComm instance;

  public AppComm () {
    instance = this;
  }

  public static AppComm getInstance() {
    return instance;
  }

  @Override
  public PluginResult execute(String action, JSONArray args, String callbackId) {
    System.out.println("in execute from appcomm");


    return null;
  }

  public void sendValue(String value1, String value2) {
    System.out.println("sendvalue in appComm");
    JSONObject data = new JSONObject();
    try {
      data.put("value1", value1);
      data.put("value2", value2);
    } catch (JSONException e) {
      Log.e("CommTest", e.getMessage());
    }
    String js = String.format(
        "window.plugins.commtest.updateValues('%s');",
        data.toString());
    this.sendJavascript(js);
  }
}

res/xml/plugins.xml

<plugins>
    <plugin name="App" value="org.apache.cordova.App"/>
    <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
    <plugin name="Device" value="org.apache.cordova.Device"/>
    <plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
    <plugin name="Compass" value="org.apache.cordova.CompassListener"/>
    <plugin name="Media" value="org.apache.cordova.AudioHandler"/>
    <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
    <plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
    <plugin name="File" value="org.apache.cordova.FileUtils"/>
    <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
    <plugin name="Notification" value="org.apache.cordova.Notification"/>
    <plugin name="Storage" value="org.apache.cordova.Storage"/>
    <plugin name="Temperature" value="org.apache.cordova.TempListener"/>
    <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
    <plugin name="Capture" value="org.apache.cordova.Capture"/>
    <plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
    <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>

    <plugin name="AppComm" value="com.example.plugin.AppComm"/>
</plugins>

cordova.xml

<?xml version="1.0" encoding="utf-8"?>
<cordova>
    <access origin=".*"/> <!-- allow local pages -->
    <log level="DEBUG"/>
    <preference name="classicRender" value="true" />
</cordova>

Index.html 标头

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
    <title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
    </script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>   
    <script type="text/javascript" charset="utf-8">
    var AppComm=function(){};

    AppComm.prototype.updateValues=function(a){
    var map = new Object();
    map["X1"] = "hallo";
    map["X2"] = "hi";
    cordova.exec(null, null, null);
    };

    cordova.addConstructor(function(){cordova.addPlugin("appcomm",new AppComm)});
    </script>
</head>

其中一个问题是 javascript 位于一个单独的文件中（我认为这是问题之一）。如果问的不多，我怎样才能正确地调用 java，以及使用什么值？如何实现execute方法以及如何调用它（我JQuery真的很差）？

【问题讨论】：

您使用的是哪个版本的 PhoneGap？
@Shade 我使用的是cordova 2.5.0

标签： javascript android cordova

【解决方案1】：

首先，您使用的是Plugin 子类。 Plugin 已被弃用，并已替换为 CordovaPlugin。如果您使用的是旧版本的 PhoneGap，我建议您升级。

其次，您的 exec 调用是错误的。插件开发的文档清楚地说明您必须传递 5 个参数，而您要传递 3 个空值。您希望如何处理？

cordova.exec(function(winParam) {}, function(error) {}, "service",
             "action", ["firstArgument", "secondArgument", 42,
             false]);

在这里，service、action 和参数数组决定了 Java 代码中会发生什么。前两个决定了在特定条件下 JavaScript 会发生什么。因此，虽然您可以对前两个使用 null，但您必须指定后三个。

我有一个适用于 PhoneGap 2.3.0 的示例插件。请看下面的代码：

public class ExampleJSCommunicator extends CordovaPlugin {

    public boolean execute (final String action, final JSONArray args, CallbackContext callbackContext) throws JSONException {
        PluginResult.Status status = PluginResult.Status.OK;
        String result = "";

        cordova.getActivity ().runOnUiThread (new Runnable () {
            @Override
            public void run() {
                try {
                    String displayText = "";
                    if (action.equals ("buttonClicked")) {
                        displayText = args.getString(0) + " was clicked";
                    }

                    else if (action.equals ("animationRunning")) {
                        displayText = args.getBoolean(0) ? "Animation started running" : "Animation stopped running";
                    }

                    TextView label = (TextView) cordova.getActivity().findViewById (R.id.textView);
                    label.setText (displayText + " and the Activity knows it!");
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        });

        return true;
    }
}

使用上面的代码，您的 Java 端插件能够处理两个自定义“操作” - buttonClicked 和 animationRunning。这些操作符合我的目的，但您可以以其他方式命名。

现在，您仍然需要注册您的插件，以便 Cordova 知道它。这是在xml/config.xml 文件中完成的。在plugins 下，您必须添加以下内容：

<plugin name="ExampleJSCommunicator" value="com.example.phonegap.ExampleJSCommunicator"/>

然后您可以从 JavaScript 传递数据（或“动作”），如下所示。注意参数（which.id和animationRunning是在数组中传递的）：

cordova.exec (null, null, "ExampleJSCommunicator", "buttonClicked", [which.id]);  // my first action
cordova.exec (null, null, "ExampleJSCommunicator", "animationRunning", [animationRunning]);  // my second action

这两个exec 调用将触发ExampleJSCommunicator 类中的execute 方法，并将在各自的if 块中进行处理。调用 exec 的位置无关紧要，只要在包含 cordova.js 文件后声明 JavaScript 代码即可。我的 JavaScript 包含在一个单独的 main.js 文件中，它工作得很好：

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>

【讨论】：

对不起，花了一段时间，但我一直忙于其他事情，但你的例子给了我最后的推动力，让它双向工作。这让我很困惑，尤其是放在哪里的部分（IE phonegap 1.7.1 有 2 个 xml、插件和 cordova，你在谈论 config.xml 等等）。所以，谢谢。
是的，这可能有点令人困惑 - 我花了几个小时才让它正常工作。很高兴我能提供帮助并感谢您的赏金:)
如何从 CordovaActivity 与 webview 通信？
@dazza5000 您有一个名为appView 的属性，它是运行您的JS 代码的CordovaWebView。在此处查看源代码 - github.com/apache/cordova-android/blob/master/framework/src/org/…
这对我不起作用，文档说 sendJavascript 方法已被弃用。

【解决方案2】：

到目前为止，您实际上并没有使用 Apache Cordova 为您提供的任何工具来制作插件，而只是尝试使用标准 Android SDK 加入一个类。如果您正在寻找添加功能，我建议您编写一个插件，原因如下：

Apache Cordova 在 WebView 和 Java 之间有备用通信方式，因此即使 addJavascriptInterface 失败，它仍然可以工作
您不需要覆盖任何东西

我强烈建议您阅读本文并将您的自定义 Java 代码移至插件：http://docs.phonegap.com/en/2.5.0/guide_plugin-development_android_index.md.html

但是，您示例中的主要错误是在您的类中使用 WebView 而不是 CordovaWebView。 WebView 没有有效的 sendJavascript 方法，发送 Javascript 的唯一简单方法是使用 loadUrl。

【讨论】：

谢谢，您能详细说明一下吗？见我的补充。将示例代码放在一起最麻烦，尤其是插件中的execute() 方法。
@ChristiaandeJong 文档的描述性已经足够了。就读吧。不要尝试在没有阅读文档的情况下拼凑一些示例。
@Shade 我已经读过它（多次）。在我的代码中，您会看到它接近指南。我使用文档将它拼凑在一起，但我无法制作完整的指南。