Build an HTML5 app development environment framework

Build an HTML5 app development environment framework

Reprinted: Orange blog

HTML5 app development requires a development framework and compiling environment. After reading the relevant materials, select the open-source phonegap. Phonegap is an open-source development framework that uses HTML5, css3, and JavaScript to build cross-platform mobile applications.

The following describes how to build the phonegap environment and the first web app.

1. Select the platform you are using. phonegap supports the development and compilation of six platforms: IOS, Android, WebOS (HP), BlackBerry, and Symbian.

I am familiar with the development process of Android, so I chose android as the building environment.

2. Install eclipse 3.4 +

Eclipse 3.4 +: http://www.eclipse.org/downloads/

Select the appropriate version based on your PC environment. My computer is win7 x64. Download: Eclipse IDE for Java EE developers x64

3. download and install the android SDK. Latest: android-sdk_r20-windows. : Http://developer.android.com/sdk/index.html

4. Download and install ADT plugin, the latest version is: ADT-20.0.0.zip. : Http://developer.android.com/tools/sdk/eclipse-adt.html#installing

PS: Eclipse builds an android development environment, which should be widely used by Google.

5. download the latest version of phonegap and decompress it. We will use the android directory. : Https://github.com/phonegap/phonegap/zipball/1.0.0

6. Write the first HTML5 app

• Start eclipse and select"New> Android Project".
• • Under the project root directory, create two new directories:
    • /Libs
    • /Assets/WWW
  • Copy phonegap. js to/assets/www.
  • Copy phonegap. Jar (from the android directory after phonegap decompression, change the decompressed JAR file name with version number to phonegap. Jar) to/libs.
  • Copy the entire XML directory (from the android directory decompressed by phonegap, including a plugins. XML) to/Res. [V1.0 RC2 or above]
  • Make a few adjustments to the main java files in the SRC folder of Eclipse: (for example)
    • Inherit the class fromActivityChangeDroidgap
    • SetSetcontentview ()ReplaceSuper. loadurl ("file: // android_asset/www/index.html ");
    • AddImport com. phonegap .*;
    • RemoveImport Android. App. activity;

• Here you may encounter errors where eclipse cannot find the phonegap-1.0.0.jar. In this case, right-click the/libs folder and find build paths/> Configure build paths. Then add the phonegap-1.0.0.jar to the project on the libraries tab. If eclipse is not very stable, you need to click F5 to refresh the project.
• Right-click androidmanifest. xml and selectOpen with> Text Editor.
• Copy the following permission settings to versionname (this can be determined based on the specific situation of the APP ):

<Supports-screens
Android: largescreens = "true"
Android: normalscreens = "true"
Android: smallscreens = "true"
Android: resizeable = "true"
Android: anydensity = "true"
/>
<Uses-Permission Android: Name = "android. Permission. Camera"/>
<Uses-Permission Android: Name = "android. Permission. Vibrate"/>
<Uses-Permission Android: Name = "android. Permission. access_coarse_location"/>
<Uses-Permission Android: Name = "android. Permission. access_fine_location"/>
<Uses-Permission Android: Name = "android. Permission. access_location_extra_commands"/>
<Uses-Permission Android: Name = "android. Permission. read_phone_state"/>
<Uses-Permission Android: Name = "android. Permission. Internet"/>
<Uses-Permission Android: Name = "android. Permission. receive_sms"/>
<Uses-Permission Android: Name = "android. Permission. record_audio"/>
<Uses-Permission Android: Name = "android. Permission. modify_audio_settings"/>
<Uses-Permission Android: Name = "android. Permission. read_contacts"/>
<Uses-Permission Android: Name = "android. Permission. write_contacts"/>
<Uses-Permission Android: Name = "android. Permission. write_external_storage"/>
<Uses-Permission Android: Name = "android. Permission. access_network_state"/>

-----------------------------------------

Add the following content to the androidmanifest activity Tag:android:configChanges="orientation|keyboardHidden".

7. Hello orange blog

In"/Assets/www"Create a file in the directory“Index.html"And paste the following code:

<! Doctype HTML>
<HTML>
<Head>
<Title> orange blog </title>
<SCRIPT type = "text/JavaScript" charset = "UTF-8" src = "phonegap. js"> </SCRIPT>
</Head>
<Body>
<H1> hello, orange blog. </H1>
</Body>
</Html>

8. Deploy to the simulator

• Right-click a project node and selectRunAnd then clickAndroid Application.
• Eclipse requires you to select an appropriate AVD. If not set, you need to create an AVD.

9. Deploy to a device

Set the USB debugging option on your phone and connect the device to your computer. (Settings> Applications> development ). Or directly install it on your phone to view the effect.

Build an HTML5 app development environment framework

Reprinted: Orange blog

HTML5 app development requires a development framework and compiling environment. After reading the relevant materials, select the open-source phonegap. Phonegap is an open-source development framework that uses HTML5, css3, and JavaScript to build cross-platform mobile applications.

The following describes how to build the phonegap environment and the first web app.

1. Select the platform you are using. phonegap supports the development and compilation of six platforms: IOS, Android, WebOS (HP), BlackBerry, and Symbian.

I am familiar with the development process of Android, so I chose android as the building environment.

2. Install eclipse 3.4 +

Eclipse 3.4 +: http://www.eclipse.org/downloads/

Select the appropriate version based on your PC environment. My computer is win7 x64. Download: Eclipse IDE for Java EE developers x64

3. download and install the android SDK. Latest: android-sdk_r20-windows. : Http://developer.android.com/sdk/index.html

4. Download and install ADT plugin, the latest version is: ADT-20.0.0.zip. : Http://developer.android.com/tools/sdk/eclipse-adt.html#installing

PS: Eclipse builds an android development environment, which should be widely used by Google.

5. download the latest version of phonegap and decompress it. We will use the android directory. : Https://github.com/phonegap/phonegap/zipball/1.0.0

6. Write the first HTML5 app

• Start eclipse and select"New> Android Project".
• • Under the project root directory, create two new directories:
    • /Libs
    • /Assets/WWW
  • Copy phonegap. js to/assets/www.
  • Copy phonegap. Jar (from the android directory after phonegap decompression, change the decompressed JAR file name with version number to phonegap. Jar) to/libs.
  • Copy the entire XML directory (from the android directory decompressed by phonegap, including a plugins. XML) to/Res. [V1.0 RC2 or above]
  • Make a few adjustments to the main java files in the SRC folder of Eclipse: (for example)
    • Inherit the class fromActivityChangeDroidgap
    • SetSetcontentview ()ReplaceSuper. loadurl ("file: // android_asset/www/index.html ");
    • AddImport com. phonegap .*;
    • RemoveImport Android. App. activity;

• Here you may encounter errors where eclipse cannot find the phonegap-1.0.0.jar. In this case, right-click the/libs folder and find build paths/> Configure build paths. Then add the phonegap-1.0.0.jar to the project on the libraries tab. If eclipse is not very stable, you need to click F5 to refresh the project.
• Right-click androidmanifest. xml and selectOpen with> Text Editor.
• Copy the following permission settings to versionname (this can be determined based on the specific situation of the APP ):

<Supports-screens
Android: largescreens = "true"
Android: normalscreens = "true"
Android: smallscreens = "true"
Android: resizeable = "true"
Android: anydensity = "true"
/>
<Uses-Permission Android: Name = "android. Permission. Camera"/>
<Uses-Permission Android: Name = "android. Permission. Vibrate"/>
<Uses-Permission Android: Name = "android. Permission. access_coarse_location"/>
<Uses-Permission Android: Name = "android. Permission. access_fine_location"/>
<Uses-Permission Android: Name = "android. Permission. access_location_extra_commands"/>
<Uses-Permission Android: Name = "android. Permission. read_phone_state"/>
<Uses-Permission Android: Name = "android. Permission. Internet"/>
<Uses-Permission Android: Name = "android. Permission. receive_sms"/>
<Uses-Permission Android: Name = "android. Permission. record_audio"/>
<Uses-Permission Android: Name = "android. Permission. modify_audio_settings"/>
<Uses-Permission Android: Name = "android. Permission. read_contacts"/>
<Uses-Permission Android: Name = "android. Permission. write_contacts"/>
<Uses-Permission Android: Name = "android. Permission. write_external_storage"/>
<Uses-Permission Android: Name = "android. Permission. access_network_state"/>

-----------------------------------------

Add the following content to the androidmanifest activity Tag:android:configChanges="orientation|keyboardHidden".

7. Hello orange blog

In"/Assets/www"Create a file in the directory“Index.html"And paste the following code:

<! Doctype HTML>
<HTML>
<Head>
<Title> orange blog </title>
<SCRIPT type = "text/JavaScript" charset = "UTF-8" src = "phonegap. js"> </SCRIPT>
</Head>
<Body>
<H1> hello, orange blog. </H1>
</Body>
</Html>

8. Deploy to the simulator

• Right-click a project node and selectRunAnd then clickAndroid Application.
• Eclipse requires you to select an appropriate AVD. If not set, you need to create an AVD.

9. Deploy to a device

Set the USB debugging option on your phone and connect the device to your computer. (Settings> Applications> development ). Or directly install it on your phone to view the effect.