使用 Ripple 在浏览器中测试 phonegap 应用程序答案

【问题标题】：Testing phonegap apps in the browser with Ripple使用 Ripple 在浏览器中测试 phonegap 应用程序
【发布时间】：2014-03-21 04:47:42
【问题描述】：

使用 Ripple 在浏览器中测试 PhoneGap 应用程序的正确方法是什么？我需要做任何配置吗？

我有一个使用 PhoneGap 制作的“hello world”应用程序，我想在浏览器中对其进行测试，而不是每次更改都启动手机模拟器。我在本地网络服务器上运行它。我使用http://emulate.phonegap.com 前往地址（例如localhost:8888/sites/hello/www）。该应用程序开始加载，但我得到了 phonegap.js 的 404。它检查的路径是localhost:8888/sites/hello/www/phonegap.js——这应该由模拟器提供吗？我需要挖掘文件吗？我正在使用股票 hello world 应用程序，所以我希望这些部件到位。

【问题讨论】：

也许这有帮助：stackoverflow.com/questions/17695875/…
还有一些关于涟漪的细节：raymondcamden.com/index.cfm/2013/2/6/…

标签： javascript cordova

【解决方案1】：

您需要提供 phonegap.js 以使 Ripple 工作 - 只需在 index.html 的 <head> 中插入一个脚本标签以指向它。注意 Ripple 无法与 Phonegap 3.x 一起正常工作，因此请使用 Phonegap 2.x 版本中的 JS - 我使用的是 Android 包中的 cordova-2.9.0.js。 Ripple 仅适用于 Google Chrome。

顺便说一句，如果您在启动 chrome 时使用 --allow-file-access-from-files 选项，您可以直接在 Chrome 中从文件系统打开 index.html 文件，而无需本地网络服务器 - 只需将其添加到快捷方式中，例如"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

【讨论】：

【解决方案2】：

以下是我如何设置机器以使用 Cordova 进行开发。这些步骤显示了需要下载的内容以及创建一个简单的 hello world 应用，最后几个步骤启动了涟漪模拟器来测试应用。

Linux Mint 15：如何为 Android 开发设置 nodejs、npm、Apache Cordova、Ripple、Android SDK

参考文献：

Cordova Android 指南： http://cordova.apache.org/docs/en/3.1.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide

NodeJS 指南： https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

NPM 科尔多瓦指南： https://npmjs.org/package/cordova

Prereqs - 文件夹名称和位置都是变量，这意味着它们可以是你想要的任何东西

-纹波模拟器必须使用chrome

下载安卓sdk-http://developer.android.com/sdk/index.html
解压文件夹
将文件夹重命名为 adt-bundle
将目录更改为您的主文件夹。例子。 cd /home/brian
创建一个名为 Development 的文件夹
将 adt-bundle 移至开发示例。 /home/brian/Development/adt-bundle
导出 PATH=${PATH}:/home/brian/Development/adt-bundle/sdk/platform-tools:/home/brian/Development/adt-bundle/sdk/tools
sudo apt-get install ant
输入android会弹出android sdk窗口检查api17并安装
sudo apt-get remove nodejs nodejs-dev npm
sudo apt-get install python-software-properties python g++ make
sudo apt-get install software-properties-common
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get 更新
sudo apt-get install nodejs
nodejs -v
npm -v
npm install -g 科尔多瓦
npm install -g 波纹模拟器
cd /home/brian/Development/
cordova 创建你好“HelloWorld”
cd 你好
cordova 平台添加 android
cordova 构建
cd /home/brian/Development/hello/platforms/android/assets/www
波纹模拟-端口 1234
打开铬
导航到 localhost:1234/index.html?enableripple=cordova-2.0.0-Nexus4
回到终端可以按Ctrl+c 杀死服务器

【讨论】：

要运行ripple，您应该在项目的根文件夹中。在我的项目根文件夹中，我有钩子、合并、平台、插件、.cordova 和 www 文件夹。然后运行命令ripple emulate -port 12345。它将在您的浏览器中打开您的应用程序（在我的情况下是 chrome:suggestion，将 chrome 设为默认浏览器）

【解决方案3】：

重要提示：先卸载ripple Chrome-Addon！！

解决方案 1：“修补它！”

要在ripple 中测试您的phonegap3 应用程序，您必须使用apache git repository 的最新版本(0.9.19) 并使用位于this git-repo 的ripple_phonegap3.patch 对其进行修补。按照位于同一存储库中的 README.md 文件中的说明进行操作。

新版本的涟漪不再是 chrome 扩展。它现在是一个 nodejs/expressjs 网络服务器，也支持其他浏览器。

解决方案 2：“逐步”（仅当您仅使用 phonegap3 时）

下载涟漪

git clone https://git-wip-us.apache.org/repos/asf/incubator-ripple.git

编辑lib/server/emulate/hosted.js

添加线条

    var PG3_SCRIPTTAG_OLD= /<script type="text\/javascript" src="phonegap.js"><\/script>/;
    var PG3_SCRIPTTAG_NEW= '<script type="text/javascript" src="cordova.js"></script>';
    doc = doc.replace(PG3_SCRIPTTAG_OLD, PG3_SCRIPTTAG_NEW);

在function localInjection()之间

        var doc = data.replace(HEAD_TAG,
                  '<head>' +
                    '<script>' +
                        BOOTSTRAP_FROM_IFRAME +
                    '</script>');

和

        res.send(doc);

运行./configure
运行jake
使用bin/riddle

快速

【讨论】：

第一个解决方案有帮助。谢谢！

【解决方案4】：

Icenium 有免费试用版，非常棒：http://www.icenium.com/

【讨论】：