如何使用 Ripple Emulator for Windows 测试 PhoneGap 应用程序？答案

【问题标题】：How to use Ripple Emulator for Windows to test PhoneGap application?如何使用 Ripple Emulator for Windows 测试 PhoneGap 应用程序？
【发布时间】：2013-07-17 09:18:32
【问题描述】：

Ripple emulator能否用于Windows下测试PhoneGap应用？

要么我做的很糟糕，要么 Ripple 在这样的环境中根本无法工作。

我已从 Chrome 商店安装了适用于 Chrome 的 Ripple Emulator 扩展程序。我将 Chrome 导航到我的移动应用程序（通过 XAMPP 在本地提供）。我点击了 Chrome 多功能栏旁边的波纹图标，然后在打开的窗口中点击了Enable。我选择了合适的平台 (Cordova 2.0)。

我的应用程序以类似移动设备的外观重新加载，模拟移动设备。 Ripple 无法从config.xml 文件中读取我的配置，但这是一个众所周知的错误（报告了here 和here）。我希望，这不是阻止我使用 Ripple 的问题吗？

我已选择我的设备 (Samsung Nexus) 并开始测试我的移动设备。即使是第一次调用 PhoneGap API 也失败了。我试过指南针，但我得到的只是Cannot call method 'watchHeading' of undefined。

基本的PhoneGap对象怎么可能是未定义的？我错过了什么？我可以在 Windows 下使用 Ripple Emulator 在 Chrome 中测试 PhoneGap 应用程序吗？或者我错过了关于 Ripple 是什么的整个想法？

我试图帮助自己编写 Ripple 文档，但“Enable the Ripple emulator”一章完全是垃圾。我在波纹图标中甚至没有Start Ripple Services 选项的迹象（只有Enable 和Disable），当我单击Enable 时，没有任何许可协议的迹象，我可以查看并接受。我感觉这个文档谈论的东西与我使用的完全不同。

如何在 Chrome 中使用 Ripple 来测试 PhoneGap 应用程序？我错过了什么？

【问题讨论】：

标签： cordova ripple

【解决方案1】：

tl;dr: 与 PGB 文档中所说的相反，您必须在应用的根目录中保留 cordova.js 文件的副本，并且此文件必须取自 PhoneGap 的 2.0 版本，因为最新版本的 Ripple Emulator 不适用于其他版本或没有此文件。

解决方案

我正在使用 PhoneGap Build 开发我的 PhoneGap 应用程序，而不是本地 PhoneGap 环境。所以——按照我的指示——我已经从我的应用程序的 webroot 中删除了phonegap.js 文件，并且只在index.html 中留下了对它的引用。这对于 PhoneGap Build 来说没问题，但对于 Ripple Emulator 绝对不没问题。

自从我放回那个文件（实际上是来自lib\android\example\assets\www\ 的lib\android\example\assets\www\ 文件夹中的phonegap-2.0.0.zip 的cordova.js 之后，我设法查看了许可证，启动了Ripple Services 并在本地测试了PhoneGap 应用程序。

对于遇到类似问题的人的注意事项：当前版本的 Ripple Emulator 使用 Cordova 2.0。确保您下载了正确版本的PhoneGap并从中获取cordova.js！不要尝试使用较新版本的cordova.js（当前为3.0.0），因为您可能会遇到无法检测到的情况，包括看到许多奇怪的alert()，甚至挂断过载的Chrome。

始终确保您使用的是 PhoneGap 的 JS 文件版本，它与 Ripple 背后的版本相匹配。

一步一步

能够在 Windows 下使用 Chrome 和 Ripple Emulator 测试 PhoneGap 应用程序的关键步骤：

将cordova.js 文件放回文件夹根目录并检查对它的引用。您可以从任何可下载的 PhoneGap 版本的 lib\android\example\assets\www\ 文件夹中获取它（不过，您应该使用 phonegap-2.0.0.zip，见上文）。
使用 Chrome 商店为您的 Chrome 浏览器安装 Ripple Emulator 扩展程序。启用它。
启动您的本地网络服务器并通过它运行您的移动应用程序的 HTML 代码（在 Ripple Emulator 中主要可以通过直接文件访问进行测试，但非常不建议这样做，并且可能会产生不可预测的结果）。
单击 Chrome 多功能栏右侧的 Ripple Emulator 图标，然后单击 Enable（或从上下文菜单中选择适当的选项，右键单击页面）。
接受许可协议并选择合适的平台 (Cordova 2.0.0)。
如果没有自动启动，请再次单击 Ripple Emulator 图标并单击 Start Ripple Services。
设置目标平台（设备），享受本地工作的PhoneGap应用程序。

版本和 API 差异

您还必须密切关注PhoneGap API 并仔细检查PhoneGap 2.0.0 中可用的内容以及访问方式？例如，从那时起，简单的连接类型检查就发生了变化。在2.9.0 API 中通过navigator.connection 完成，而在2.0.0 API 中通过navigator.network 接口访问。

由于 Ripple Emulator 使用 PhoneGap 2.0.0，目前支持调用该对象的方式：

var networkState = navigator.connection.type;

会失败。您必须以这种方式使用它：

var networkState = navigator.network.connection.type;

虽然您可以选择 PhoneGap 版本，但在 PhoneGap Build 中编译时（您可以强制它使用 2.0.0 版本，尽管以不变的方式编译此代码），您很可能希望使用最新版本来开发您的应用程序的PhoneGap。

在这种情况下，您必须使用一种“安全”的方法，该方法适用于 Ripple 和 PhoneGap：

var networkState = ((navigator.connection) ? navigator.connection.type : ((navigator.network && navigator.network.connection) ? navigator.network.connection.type : 'unknown'));

或者你可以声明一些特殊的变量：

var debugMode = typeof(window.tinyHippos) !== 'undefined';

并将其用作开关：

var networkState = (debugMode) ? navigator.network.connection.type : navigator.connection.type;

希望 Ripple 很快会更新到最新的 PhoneGap，这样我们就可以放弃这些东西了。

【讨论】：

这是很棒的信息，谢谢！我想知道为什么我会收到各种各样的错误。只有 1.0 似乎“工作”，而 2.0 一直失败，这是因为 phonegap.js 版本差异。
我遇到了这个问题：解决方案包括执行以上所有操作 + 从某处下载 cordovra.js + 在这里执行：stackoverflow.com/questions/13196130/… 然后最后修复选择我在波纹模拟器 1.00 中实际使用的版本（如果您使用） 2.00 和 1.00 配置不好的事情会发生。

【解决方案2】：

Ripple 应该适用于最新版本的 Phonegap，尽管您可能会在页面加载期间弹出一些虚假的错误消息，这是由于 Ripple 与最新的 Phonegap 版本不完全一致。确保您已将 Phonegap JS 包含到您的页面中。试试下面的例子——它在 Ripple 中对我来说很好用：

<html>
    <head>
        <script type="text/javascript" charset="utf-8" src="cordova-2.8.0.js"></script>
        <script type="text/javascript">
        function deviceready() {
            console.log("Device ready");
            navigator.compass.watchHeading(function(heading){
                document.getElementById("heading").innerHTML = heading.trueHeading;
            },function(error){
                var errorType;
                switch(error.code){
                    case CompassError.COMPASS_NOT_SUPPORTED:
                        errorType = "Compass not supported";
                        break;
                    case CompassError.COMPASS_INTERNAL_ERR:
                        errorType = "Compass internal error";
                        break;
                    default:
                        errorType = "Unknown compass error";
                }
                document.getElementById("heading").innerHTML = errorType;
            });
        }
        document.addEventListener("deviceready", deviceready, true);
        </script>
    </head>
    <body>
        <h1>Test</h1>
        <p>Heading: <span id="heading"></span></p>
    </body>
</html>

【讨论】：

谢谢，我刚刚发现了同样的问题——缺少cordova.js 文件（PhoneGap Build 不需要）。我还发现，从版本 2.9.0 使用它在 Ripple 中失败并出现许多奇怪的错误，所以我将它恢复到版本 2.0.0。