平台无关的 JS->Native Bridge？答案

【问题标题】：Platform-Independent JS->Native Bridge?平台无关的 JS->Native Bridge？
【发布时间】：2012-10-29 20:04:08
【问题描述】：

我目前正在开发一个应用程序，该应用程序在 iOS 和 Android 上都积极使用 webviews 来呈现内容，并使用原生 chrome 围绕它。我希望能够通过 javascript 方法控制这个 chrome。

Android Webview 有addJavascriptInterface 允许这种情况发生，但iOS 没有这个功能。我已经在iOS JavaScript bridge 上查看了 SO 答案，这有一些有用的信息，但它仅适用于 iOS；最好是相同的底层网络代码可以为 Andorid 和 iOS 设备上的回调提供动力。

我想知道 PhoneGap 或 Appcelerator 之类的东西是否提供了一种简单的方法；但是我不需要他们的核心产品（通过底层 html/css/js 提供原生体验），我什至不知道我需要的东西是否包含在他们的包中。

感谢您提供任何信息！

【问题讨论】：

标签： javascript android ios mobile-website

【解决方案1】：

我会说最好的方法是自己做，结合这两个例子：

function nativeDoStuff() {
  if (androidbridge != null {
    androidbridge.doStuff();
  }
  else {
    //construct url
    window.location = "myiphonescheme://dostuff";
  }

想一想，如果你有雄心壮志，你可以编写一个快速的 javascript 对象来为你做这件事：

function NativeAppBridge () {
  function runMethod(methodName, params) {
    if (androidbridge != null {
      // If the android bridge and the method you're trying to call exists,
      // we'll just call the method directly:
      if (androidbridge[methodName] != null) {
        androidbridge[methodName].apply(this, params);
      }
    }
    else {
      // building the url is more complicated; best I can think
      // of is something like this:
      var url = "myiphonescheme://" + methodName;
      if (params.length > 0) {
        url += "?"
        var i = 0;
        for (param in params) {
          url += "param" + i + "=" + param;
          ++i;
          if (i < params.length) {
            url += "&";
          } 
        }
      }
    }
  }
}

使用它就像这样简单：

var bridge = new NativeAppBridge();

function onClick() {
  bridge.runMethod("doStuff", null);
}

请注意，我是在头脑中编写了这个代码，目前没有时间进行测试 - 但我认为它应该可以很好地工作，前提是我没有犯任何重大错误

【讨论】：

【解决方案2】：

如果你打算使用 WKWebView，你可以试试XWebView 项目

【讨论】：

【解决方案3】：

您可以使用 phonegap 插件来做到这一点。它们提供了一种在 webview 和您的本地层之间进行通信的绝佳方式。

Here you can see how to create one!

我个人对此主题的看法：我使用 phonegap 已经有一段时间了，如果您使用 webviews，我强烈建议您重新考虑您做事的方式并转移到移动 web 平台。您可能可以节省很多时间。

在我看来，使用它的最大缺点是您创建的是网页而不是移动应用程序。您不能使用本机组件，并且您的应用程序的响应速度会降低。由于您已经在 webviews 上，我相信您只能在这些平台上找到好处。

【讨论】：