如何使用Windows版Ripple模拟器测试PhoneGap应用程序？

Question

如何使用Windows版Ripple模拟器测试PhoneGap应用程序？

22

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

我可能做错了什么，或许Ripple根本不适用于这种环境。

我已经从Chrome商店安装了Chrome的Ripple模拟器扩展。我将Chrome导航到我的移动应用程序（通过XAMPP本地服务）。我单击了位于Chrome Omnibar旁边的Ripple图标，然后在打开的窗口中单击了启用。我选择了正确的平台（Cordova 2.0）。

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

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

基本的PhoneGap对象怎么会未定义？我错过了什么？我能在Windows中使用Ripple模拟器测试PhoneGap应用程序吗，还是我完全不理解Ripple的想法？

我试图通过Ripple文档来帮助自己，但章节“启用Ripple模拟器”是一堆垃圾。我甚至没有看到Ripple图标中的启动Ripple服务选项（只有启用和禁用），当我单击启用时，没有任何许可协议的迹象，我也无法查看和接受该协议。我觉得这篇文档谈论的是与我使用的完全不同的东西。

如何在Chrome中使用Ripple测试PhoneGap应用程序？我还缺少什么？

- trejder

2个回答

1

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>

- DaveAlden

谢谢，我刚刚发现了同样的问题--缺少cordova.js文件（在PhoneGap Build中不需要）。我还发现，在Ripple中使用它从版本2.9.0开始会导致许多奇怪的错误，因此我将其还原回版本2.0.0。 - trejder

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- trejder · Accepted Answer

tl;dr: 与PGB文档中说的相反，你必须在应用程序的根目录中保留cordova.js文件副本，并且此文件必须来自PhoneGap的确切版本2.0，因为最新版本的Ripple模拟器既不与其他版本一起使用也不使用没有此文件。

解决方案

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

自从我将那个文件放回去（实际上是从phonegap-2.0.0.zip的lib\android\example\assets\www\文件夹中的cordova.js），我就能够看到许可证，启动Ripple服务并在本地测试工作的PhoneGap应用程序。

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

始终确保您正在使用与Ripple后面的电话间隔符匹配的PhoneGap JS文件版本。

步骤

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

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

版本和API差异

您还需要注意PhoneGap API的变化，并仔细检查在PhoneGap 2.0.0中可用的内容及其访问方式。例如，简单的连接类型检查自那以后已经改变。在2.9.0 API中，它是通过navigator.connection完成的，而在2.0.0 API中，则是通过navigator.network界面进行访问。

由于Ripple模拟器使用的是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;

如何使用Windows版Ripple模拟器测试PhoneGap应用程序？

解决方案

步骤

版本和API差异

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