javascript 使用 Ripple 在浏览器中测试 phonegap 应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19730429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Testing phonegap apps in the browser with Ripple
提问by Matt Hampel
What's the proper way to test a PhoneGap app in the browser using Ripple? Is there any configuration I need to do?
使用 Ripple 在浏览器中测试 PhoneGap 应用程序的正确方法是什么？有什么我需要做的配置吗？
I've got a "hello world" app made with PhoneGap and I'd like to test it in the browser instead of firing up a phone emulator for every change. I'm running it on a local webserver. I used http://emulate.phonegap.comto head to the address (eg, localhost:8888/sites/hello/www). The app starts to load, but I get a 404 for phonegap.js. The path it's checking is localhost:8888/sites/hello/www/phonegap.js-- should this be provided by the emulator? Do I need to dig up the file? I'm using the stock hello world app, so I expected the pieces to be in place.
我有一个用 PhoneGap 制作的“hello world”应用程序，我想在浏览器中测试它，而不是每次更改时都启动电话模拟器。我在本地网络服务器上运行它。我使用http://emulate.phonegap.com前往地址（例如，localhost:8888/sites/hello/www）。该应用程序开始加载，但我收到 404 for phonegap.js. 它正在检查的路径是localhost:8888/sites/hello/www/phonegap.js——这应该由模拟器提供吗？我需要挖掘文件吗？我正在使用股票 hello world 应用程序，所以我希望这些部分就位。
回答by DaveAlden
You need to provide phonegap.js for Ripple to work - just insert a script tag in the <head>of your index.html to point at it. Note Ripple will not work properly with Phonegap 3.x, so use the JS from a Phonegap 2.x release - I'm using cordova-2.9.0.js from the Android package. Ripple will only work in Google Chrome.
您需要为 Ripple 提供 phonegap.js 才能工作 - 只需在<head>您的 index.html 中插入一个脚本标记以指向它。注意 Ripple 无法与 Phonegap 3.x 一起正常工作，因此请使用 Phonegap 2.x 版本中的 JS - 我使用的是 Android 包中的cordova-2.9.0.js。Ripple 仅适用于 Google Chrome。
Incidentally, you can open the index.html file directly in Chrome from the filesystem, without needing a local webserver, if you use the --allow-file-access-from-filesoption when you start chrome - just add it to the shortcut, e.g. "C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
顺便说一句，您可以直接在 Chrome 中从文件系统打开 index.html 文件，而无需本地网络服务器，如果您--allow-file-access-from-files在启动 chrome 时使用该选项 - 只需将其添加到快捷方式，例如"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
回答by Brian Boyd
Here's how I setup a machine for development with Cordova. These steps show what needs to be downloaded as well as creating a simple hello world app with the last couple steps launching the ripple emulator to test the app.
下面是我如何设置一台机器以使用 Cordova 进行开发。这些步骤显示了需要下载的内容以及创建一个简单的 hello world 应用程序，最后几个步骤启动涟漪模拟器来测试应用程序。
Linux Mint 15: How to setup nodejs, npm, Apache Cordova, Ripple, Android SDK for Android Development
Linux Mint 15：如何为 Android 开发设置 nodejs、npm、Apache Cordova、Ripple、Android SDK
References:
参考：
Cordova Android Guide: http://cordova.apache.org/docs/en/3.1.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide
Cordova Android 指南：http: //cordova.apache.org/docs/en/3.1.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide
NodeJS Guide: https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager
NodeJS 指南：https: //github.com/joyent/node/wiki/Installing-Node.js-via-package-manager
NPM Cordova Guide: https://npmjs.org/package/cordova
NPM Cordova 指南：https: //npmjs.org/package/cordova
Prereqs - folder names and locations are all variables meaning they can be whatever you want
先决条件 - 文件夹名称和位置都是变量，这意味着它们可以是您想要的任何内容
-Must use chrome for ripple emulator
- 波纹模拟器必须使用镀铬
- Download android sdk - http://developer.android.com/sdk/index.html
- Unzip folder
- Rename folder to adt-bundle
- change directories to your home folder. example. cd /home/brian
- create a folder named Development
- Move adt-bundle to Development example. /home/brian/Development/adt-bundle
- export PATH=${PATH}:/home/brian/Development/adt-bundle/sdk/platform-tools:/home/brian/Development/adt-bundle/sdk/tools
- sudo apt-get install ant
type android the android sdk window will pop up check api17 and install
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 update
- sudo apt-get install nodejs
- nodejs -v
- npm -v
- npm install -g cordova
npm install -g ripple-emulator
cd /home/brian/Development/
- cordova create hello "HelloWorld"
- cd hello
- cordova platform add android
- cordova build
- cd /home/brian/Development/hello/platforms/android/assets/www
- ripple emulate -port 1234
- open chrome
- navigate to localhost:1234/index.html?enableripple=cordova-2.0.0-Nexus4
- Back at the terminal you can press Ctrl+c to kill the server
- 下载 android sdk - http://developer.android.com/sdk/index.html
- 解压文件夹
- 将文件夹重命名为 adt-bundle
- 将目录更改为您的主文件夹。例子。CD /家/布赖恩
- 创建一个名为 Development 的文件夹
- 将 adt-bundle 移至开发示例。/home/brian/Development/adt-bundle
- 导出路径=${PATH}:/home/brian/Development/adt-bundle/sdk/platform-tools:/home/brian/Development/adt-bundle/sdk/tools
- sudo apt-get 安装蚂蚁
输入android android sdk窗口会弹出检查api17并安装
sudo apt-get 删除 nodejs nodejs-dev npm
- sudo apt-get install python-software-properties python g++ make
- sudo apt-get install software-properties-common
- 须藤添加-apt-repository ppa:chris-lea/node.js
- sudo apt-get 更新
- sudo apt-get 安装 nodejs
- nodejs -v
- npm -v
- npm install -g 科尔多瓦
npm install -g 波纹模拟器
cd /home/brian/开发/
- 科尔多瓦创建你好“HelloWorld”
- 你好
- 科尔多瓦平台添加android
- 科尔多瓦建造
- cd /home/brian/Development/hello/platforms/android/assets/www
- 波纹仿真 - 端口 1234
- 开铬
- 导航到 localhost:1234/index.html?enableripple=cordova-2.0.0-Nexus4
- 回到终端，您可以按 Ctrl+c 杀死服务器
回答by fastr.de
Important:uninstall ripple Chrome-Addon first!!
重要提示：首先卸载涟漪Chrome-Addon！！
Solution 1: 'patch it!'
解决方案 1：“修补它！”
To test your phonegap3 applications in ripple you have to use the latest version (0.9.19) from the apache git repositoryand patch it with the ripple_phonegap3.patchlocated at this git-repo. Follow the instructions in the README.md file located in the same repository.
要在涟漪中测试您的 phonegap3 应用程序，您必须使用来自apache git 存储库的最新版本 (0.9.19)并使用ripple_phonegap3.patch位于此 git-repo 的补丁对其进行修补。按照位于同一存储库中的 README.md 文件中的说明进行操作。
The new version of ripple is not longer a chrome extension. It's now a nodejs/expressjs webserver to support other browsers as well.
新版本的涟漪不再是一个 chrome 扩展。它现在是一个 nodejs/expressjs 网络服务器，也支持其他浏览器。
Solution 2: 'step-by-step' (only when you use phonegap3 exclusively)
解决方案 2：“逐步”（仅当您只使用 phonegap3 时）
Download ripple
git clone https://git-wip-us.apache.org/repos/asf/incubator-ripple.gitEdit
lib/server/emulate/hosted.js
下载涟漪
git clone https://git-wip-us.apache.org/repos/asf/incubator-ripple.git编辑
lib/server/emulate/hosted.js
Add lines
添加行
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);
in function localInjection()between
在function localInjection()之间
var doc = data.replace(HEAD_TAG,
'<head>' +
'<script>' +
BOOTSTRAP_FROM_IFRAME +
'</script>');
and
和
res.send(doc);
- run
./configure - run
jake - use
bin/riddle
- 跑
./configure - 跑
jake - 利用
bin/riddle
lg
lg
fastrde
快车
回答by Nathan Prather
Icenium has a free trial and it's pretty awesome: http://www.icenium.com/
Icenium 有免费试用版，非常棒：http: //www.icenium.com/
