22

Ripple エミュレーターを使用して、Windows で PhoneGap アプリケーションをテストできますか?

私が本当に悪いことをしている、またはリップルがそのような環境でまったく機能していないかのどちらかです。

Chrome ストアから Chrome 用の Ripple Emulator 拡張機能をインストールしました。Chrome をモバイル アプリ (XAMPP 経由でローカルに提供) に移動しました。Chrome オムニバーの横にある Ripple アイコンをクリックEnableし、開いたウィンドウをクリックしました。適切なプラットフォーム ( Cordova 2.0) を選択しました。

私のアプリケーションは、モバイル デバイスをシミュレートして、モバイルのような外観でリロードされました。Ripple は私の設定をconfig.xmlファイルから読み取ることができませんでしたが、これはよく知られたバグです (こことここで報告されています)。これが Ripple の使用をまったく妨げない問題ではないことを願っています。

デバイス ( Samsung Nexus) を選択し、モバイル デバイスのテストを開始しました。PhoneGap API への最初の呼び出しでさえ失敗しました。コンパスを試してみましたが、得られたのは だけでしたCannot call method 'watchHeading' of undefined。

基本的な PhoneGap オブジェクトを未定義にするにはどうすればよいですか? 私は何が欠けていますか？Windows で PhoneGap アプリケーションを Ripple Emulator を使用して Chrome でテストできますか、それとも Ripple とは何かについてのアイデア全体を見逃していますか?

私は Ripple のドキュメントで自分を助けようとしましたが、章「Ripple エミュレーターを有効にする」は完全なゴミです。Ripple アイコン (とStart Ripple Servicesのみ) にはオプションのサインさえありません。クリックしても、確認して同意できる使用許諾契約のサインはありません。このドキュメントは、私が使用するものとはまったく異なることについて話しているように感じます。EnableDisableEnable

Chrome で Ripple を使用して PhoneGap アプリケーションをテストする方法は? 私は何が欠けていますか？

4

2 に答える 2

29

tl;dr: PGB のドキュメントに記載されていることとは反対に、アプリのルート ディレクトリにファイルのコピーを保持する必要cordova.jsがあります。このファイルは、PhoneGap のバージョン 2.0 から取得する必要があります。最新バージョンの Ripple Emulator はどちらでも動作しないためです。他のバージョンまたはこのファイルなし。

解決

ローカルの PhoneGap 環境ではなく、PhoneGap Build を使用して PhoneGap アプリを開発しています。そのため、指示に従ってphonegap.js、アプリケーションの webroot からファイルを削除し、ファイルへの参照のみを に残しましたindex.html。これは PhoneGap Build では問題ありませんが、Ripple Emulator ではまったく問題ありません。

そのファイルを元に戻して以来 (実際にcordova.jsはlib\android\example\assets\www\フォルダーからphonegap-2.0.0.zipライセンスを確認し、Ripple Services を起動して、動作中の PhoneGap アプリケーションをローカルでテストしました。

同様の問題に苦しんでいる人への通知: Ripple Emulator の現在のバージョンは を使用していCordova 2.0ます。正しいバージョンの PhoneGapをダウンロードして取得するようcordova.jsにしてください。cordova.js新しいバージョン (現在は ) から使用しようとしないでください。3.0.0多くの奇妙なalert()が表示されたり、オーバーロードされた Chrome がハングアップしたりするなど、検出できない状況に遭遇する可能性があります。

Ripple の背後にあるバージョンと一致する PhoneGap の JS ファイル バージョンを使用していることを常に確認してください。

一歩一歩

Chrome と Ripple Emulator を使用して Windows で PhoneGap アプリケーションをテストできるようにするための主な手順:

  1. ファイルをフォルダーcordova.jsのルートに戻し、それへの参照を確認します。lib\android\example\assets\www\ダウンロード可能なバージョンのPhoneGapのフォルダーから取得できます（phonegap-2.0.0.zipただし、使用する必要があります。上記を参照してください）。

  2. Ripple EmulatorChrome ストアを使用して、Chrome ブラウザーの拡張機能をインストールします。有効にします。

  3. ローカル Web サーバーを起動し、それを介してモバイル アプリケーションの HTML コードを実行します (直接ファイル アクセスによるテストは主に Ripple Emulator で可能ですが、あまりお勧めできず、予測できない結果が生じる可能性があります)。

  4. Ripple Emulator アイコンをクリックし、Chrome オムニバーの右にあるので、クリックします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 APInavigator.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 に答える