22

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

要么我在做一些非常糟糕的事情，要么 Ripple 在这样的环境中根本无法工作。

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

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

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

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

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

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

4

2 回答 2

29

tl;dr：与 PGB 文档中所说的相反，您必须在应用程序的根目录中保留一份cordova.js文件副本，并且该文件必须取自 PhoneGap 的 2.0 版，因为最新版本的 Ripple Emulator 不适用于两者其他版本也没有这个文件。

解决方案

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

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

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

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

一步步

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

  1. 将cordova.js文件放回文件夹根目录并检查对它的引用。lib\android\example\assets\www\您可以从任何可下载版本的 PhoneGap的文件夹中获取它（您应该使用phonegap-2.0.0.zip，见上文）。

  2. Ripple Emulator使用 Chrome 商店为您的 Chrome 浏览器安装扩展程序。启用它。

  3. 启动您的本地网络服务器并通过它运行您的移动应用程序的 HTML 代码（在 Ripple Emulator 中主要可以通过直接文件访问进行测试，但非常不建议这样做，并且可能会产生不可预测的结果）。

  4. 单击 Chrome 多功能栏右侧的 Ripple Emulator 图标，然后单击Enable（或从上下文菜单中选择适当的选项，右键单击页面）。

  5. 接受许可协议并选择合适的平台 ( Cordova 2.0.0)。

  6. 再次单击 Ripple Emulator 图标，Start Ripple Services如果它们没有自动启动，请单击。

  7. 设置目标平台（设备）并在本地享受工作的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，这样我们就可以放弃这些东西。

于 2013-07-17T10:23:31.590 回答
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>
于 2013-07-17T10:17:37.017 回答