Question

可以使用Ripple仿真器在Windows下测试PhoneGap应用程序吗？

要么我做的事情非常糟糕，要么Ripple在这样的环境中根本不起作用。

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

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

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

如何定义基本的PhoneGap对象？我错过了什么？我可以使用Ripple Emulator在Chrome下的Windows下测试PhoneGap应用程序吗？或者我错过了Ripple的全部想法？

我试图用Ripple文档来帮助自己，但“Enable the Ripple emulator”这一章完全是垃圾。我在Ripple图标中只显示Start Ripple Services选项的标记（仅Enable和Disable），当我点击Enable时，没有许可协议的迹象，我可以审查并接受。我觉得这篇文章讲的是与我使用的完全不同的东西。

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

Answer 1

tl; dr：与PGB文档中的内容相反，您必须在应用根目录中保留cordova.js文件的副本目录和此文件必须从PhoneGap的2.0版本中获取，因为最新版本的Ripple Emulator既不适用于其他版本也不适用于此文件。

解决方案

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

自从我放回该文件（实际cordova.js来自lib\android\example\assets\www\ phonegap-2.0.0.zip文件夹后，我设法看到许可证，启动Ripple服务并在本地测试PhoneGap应用程序。

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

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

一步一步

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

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

版本和API差异

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

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

var networkState = navigator.network.connection.type;

会失败。你必须这样使用它：

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

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

在这种情况下，您必须使用“安全”方法，它将同时适用于Ripple和PhoneGap：

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

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

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

并将其用作开关：

{{1}}

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

Answer 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>

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

2 个答案:

解决方案

一步一步

版本和API差异