ホームページ  >  記事  >  ウェブフロントエンド  >  初めてのPhoneGap(cordova)_html5チュートリアルスキルに基づくアプリの詳細説明

初めてのPhoneGap(cordova)_html5チュートリアルスキルに基づくアプリの詳細説明

WBOY
WBOYオリジナル
2016-05-16 15:49:351579ブラウズ

PhoneGap は、HTML5 を使用してローカル API インターフェイスを簡単に呼び出し、アプリケーションをストアに公開できるアプリケーション開発プラットフォームです。関係者は、低コスト、短い開発サイクル、軽量などの利点があると言っていますが、これらはまだ証明できないため、無視します。ただし、クロスプラットフォームがあることは明らかな利点です。アプリケーションの開発に HTML5 JavaScript モードを使用するためです。 PhoneGap は JavaScript を使用して、いくつかの主要なプラットフォーム (Andriod、IOS、WP8/7、WINRT) などのローカル API を均一にカプセル化します。 。この場合、あるプラットフォームから別のプラットフォームに移植するときは、HTML コードと JS をそのまま取り出してパッケージ化するだけで済みます。 PhoneGap は後に Adob​​e に買収され、オープンソース コミュニティに貢献し、現在は Apache によって管理され、cordova と名前変更されました。

昨日の html5 描画ボードをモバイル デバイスに移植するために、片面だけを書いて実行するだけで済むように、phoneGap プラットフォームを使用することにしました。

今日はAndriod上にphoneGap環境をセットアップします。

1.phoneGap をダウンロードします

http://phonegap.com/download/#autodownload

それを解凍し、lib/android ディレクトリを見つけます。

2. 通常のプロジェクトと同じように、Eclipse 上で新しい Andriod プロジェクトを作成します。

3. アセットディレクトリ

に新しいフォルダー「www」を作成します。

lib/android ディレクトリにあるcordova-2.6.0.js をこのディレクトリにコピーします。 Cordova-2.6.0.jar を libs ディレクトリにコピーします。

初めてのPhoneGap(cordova)_html5チュートリアルスキルに基づくアプリの詳細説明

4. www ディレクトリに新しい HTML ファイルindex.html を作成します。ここでインターフェースを作成します。

初めてのPhoneGap(cordova)_html5チュートリアルスキルに基づくアプリの詳細説明

index のコードは次のとおりです:

コードをコピーします
コードは次のとおりです:

< ;!doctype html>



HTML5Paint


HTML5Paint





5. lib/android ディレクトリをコピーします。 xml フォルダー全体を res

初めてのPhoneGap(cordova)_html5チュートリアルスキルに基づくアプリの詳細説明

6. AndroidManifest.xml を変更してユーザー権限を追加します

次のコードを タグの先頭に追加します

コードをコピーします
コードは次のとおりです以下のように:

android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:xlargeScreens="true "
android:resizeable="true"
android:anyDensity="true"
/>

















7.修改MainActivity.java

复制代码
代码如下:

public class MainActivity extends DroidGap {

@Override
public void onCreate(Bundle SavedInstanceState)
{
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}

}


8.build では、前述のcordova-2.6.0.jar が buildpath に追加されていないため、次のエラーが発生する可能性があります。

初めてのPhoneGap(cordova)_html5チュートリアルスキルに基づくアプリの詳細説明

ビルドが完了しました。

最後に実行する一下:

初めてのPhoneGap(cordova)_html5チュートリアルスキルに基づくアプリの詳細説明初めてのPhoneGap(cordova)_html5チュートリアルスキルに基づくアプリの詳細説明

このようなフォンギャップの Andriod プログラムが決定されています。明天は昨日の日のものの HTML5 画板を移行します。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。