javascript - 如何为 Windows 8 和 Android 平板电脑制作 D3js 应用程序的 Web 应用程序

Question

我有一个 javascript/html/css Web“应用程序”，它利用 D3 可视化库通过 Bootstrap 来可视化文件系统，该文件系统在台式机/笔记本电脑上运行良好。

我现在需要将此应用程序移至平板电脑，并且需要同时支持 Windows 8 和 Android。但我对做到这一点的最佳方法感到非常困惑。

D3 是基于 JavaScript 的，因此我无法为每个支持的操作系统制作 native 应用程序。我应该通过每个 SDK 将代码转换为移动 Web 应用程序还是使用其他方法(例如 Phonegap(或替代方案))来执行此操作？

如果我使用 SDK，那么我需要处理单独版本的代码来更新任何更改，但我不确定 Phonegap 是否是我正在寻找的，因为它似乎很难开始使用。我只需要支持 Windows 8 和 Android - 有没有更简单的方法？

最后，如果我使用 Phonegap 创建应用程序，我可以访问位于云中的数据库还是不可能？

Answer 1

为此，您实际上并不需要 Phonegap。您可以构建仅包含填充整个屏幕的 WebView 的 native 应用程序。 WebView 将托管您的“Web 应用程序”。然后，(这是有趣的部分)您编写接口(interface)来访问 native 对象。

在 Android 中，您将 JavaScript 接口(interface)编写为一个类，其中的公共(public)方法用 @JavascriptInterface 注释。

class MyJsInterface{
  @JavascriptInterface
  public String doStuff() { return "hello" ; }
}

您使用 addJavascriptInterface 方法在 webview 上注册您的 javascript 接口(interface):

webView.addJavascriptInterface(new MyJsInterface(), "MyInterface");

从 javascript 中，您可以使用作为上述方法的第二个参数提供的名称来访问界面的方法(在本例中为 MyInterface):

var message = window.MyInterface.doStuff();
// message is 'hello'

返回字符串 (JSON) 的方法可以很好地与 JavaScript 配合使用。
了解更多关于 Android WebView and javascript interfaces .

使用 Windows，您可以使用以下方法实现类似的功能:

• WebView(或浏览器控件)的 InvokeScript 方法，允许您将数据从 C# 传递到 javascript
• Notify 方法 (window.external.notify)，允许您将数据从 javascript 发送到 C# 并在控件上引发 ScriptNotify 事件。

好文章:Windows Phone 8 native and Javascript interop
MSDN链接:WebBrowser.ScriptNotify Event

不要忘记在您的 WebView 上启用 JavaScript。