Phonegap-environment-setup

提供:Dev Guides
移動先:案内検索

PhoneGap-環境設定

この章では、アプリを簡単に作成するための基本的な環境の設定方法を学びます。 PhoneGapは、http://www.finddevguides.com/cordova/cordova_environment_setup [Cordova command line]インターフェースとhttp://www.finddevguides.com/git/git_environment[Github repository]メカニズムを使用したアプリのオフライン作成をサポートしていますが、ここでは集中します。最小労力の手順。

Webテクノロジーに精通しており、Webアプリケーションをアプリとして出荷する準備ができていることを前提としています。 PhoneGapはHTML、CSS、およびJavaScriptのみをサポートするため、これらのテクノロジのみを使用してアプリケーションを作成する必要があります。

開発者の観点から見ると、アプリのパッケージには次のアイテムが含まれている必要があります-

  • 構成ファイル
  • アプリのアイコン *情報またはコンテンツ(Webテクノロジーを使用して構築)

設定

Webアプリに必要な設定ファイルは1つだけで、必要なすべての設定を構成するのに十分なはずです。 その名前はconfig.xmlです。 このファイルには、アプリのコンパイルに必要なすべての情報が含まれています。

私たちの例のconfig.xmlを見てみましょう-

<?xml version = "1.0" encoding = "UTF-8"?>

<widget xmlns = "http://www.w3.org/ns/widgets"
   xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.finddevguides.onlineviewer" version = "1.0">

   <name>Tutorials Point</name>

   <description>
      Tutorials Point Online Viewer
   </description>

   <author href = "http://finddevguides.com" email = "[email protected]">
      Tutorials Point
   </author>

   <preference name = "permissions" value = "none"/>

   <icon src = "res/icon/android/drawable-ldpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "ldpi"/>

   <icon src = "res/icon/android/drawable-mdpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "mdpi"/>

   <icon src = "res/icon/android/drawable-hdpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "hdpi"/>

   <icon src = "res/icon/android/drawable-xhdpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "xhdpi"/>

   <icon src = "res/icon/android/drawable-xxhdpi/tp_icon.png"
      gap:platform = "android" gap:qualifier = "xxhdpi"/>

   <icon src = "res/icon/ios/Icon-72.png" gap:platform = "ios" gap:qualifier = ""/>
   <icon src = "res/icon/ios/icon-57.png" gap:platform = "ios" width = "57" height = "57"/>
   <icon src = "res/icon/ios/icon-72.png" gap:platform = "ios" width = "72" height = "72"/>
   <icon src = "res/icon/ios/icon-57-2x.png" gap:platform = "ios" width = "114" height = "114"/>
   <icon src = "res/icon/ios/icon-72-2x.png" gap:platform = "ios" width = "144" height = "144"/>

</widget>

すべての構成コンテンツは<widget>タグでラップされます。 これらの簡単な説明は次のとおりです-

<widget id = ”app_id”>

idは、さまざまなアプリストアで予約されているapp-idです。 これは、逆ドメイン名スタイルです。 com.finddevguides.onlineviewerなど

<widget version = "x.y.z">

これは、x.y.z形式のアプリのバージョン番号です。(x、y、z)は正の整数です。 1.0.0、major.minor.patchバージョンシステムを表します。

<name> App Name</name>

これはアプリの名前で、モバイル画面のアプリアイコンの下に表示されます。 この名前を使用してアプリを検索できます。

<description> My First Web App </description>

これは、アプリの内容と内容を簡単に説明したものです。

<author> Author_Name </author>

このフィールドには、作成者またはプログラマの名前が含まれ、通常、このアプリを起動する組織の名前に設定されます。

<preferences name = "permissions" value = "none">

設定タグは、アプリのFullScreen、BackgroundColor、Orientationなどのさまざまなオプションを設定するために使用されます。 これらのオプションは、名前と値のペアです。 例:name = "FullScreen" value = "true"など。 これらの事前設定は必要ないため、アクセス許可は何も設定しません。

<icon>

アプリにアイコンを追加できます。 さまざまな方法でコーディングできますが、すべてのショートカットを学習しているため、ここにあります。* .src は、アイコン画像のパスを決定します。 *gap:platform は、このアイコンを使用するOSプラットフォームを決定します。 gap:qualifier は、Androidデバイスで使用される密度です。 iOSデバイスは width&height パラメーターを使用します。

アイコン

同じモバイルオペレーティングシステムを搭載したさまざまなサイズのデバイスがあるため、1つのプラットフォームの視聴者をターゲットにするには、すべてのモバイルタイプのアイコンも用意する必要があります。 特定のモバイルオペレーティングシステムに必要な正確な形状とサイズのアイコンを用意することが重要です。

ここでは、フォルダー res/icon/ios および* res/icon/android/drawable-xxxx。*を使用しています。

この作業を迅速に行うには、サイズ1024x1024のロゴを作成し、makeappicon.comにログオンします。 このWebサイトは、AndroidプラットフォームとiOSプラットフォームの両方のあらゆるサイズのロゴを即座に作成するのに役立ちます。

アプリアイコン

サイズ1024x1024のアイコン画像を提供した後、makeappicon.comは以下を提供する必要があります-

  • iOS用アイコン*

IOS

  • Android用アイコン*

Android

このWebサイトでは、すべてのロゴをzip形式で玄関口(a.k.a. もちろん、メール!)