How HTML5 packaged as an apk to encapsulate H5 as an Android app apk file

Source: Internet
Author: User

Methods provided directly using the programming software:

1, need to download and install Myeclipse2014,android sdk,eclipse (need to configure the Android development environment)

Installation and configuration of Java and Android environments.

2. Open MyEclipse2014, create a new HTML5 Mobile application Project, named, for example: Hello.

3, HTML5 program in the project www directory editing, editing good HTML5 program, the following will begin to learn to pack.

4. Here are two ways to pack:

4.1, PhoneGap Build Service package.

4.2, Android SDK +eclispe packaging.

5. Android SDK +eclispe Packaging (if configured, Android development environment):

STEP1, launch Eclipse, new Android Application project, Android project, named, for example: Hello.

6, STEP2, the Myeclipse2014 in front of the edited HTML5 program (www entire directory) Copy to just in Eclipse new Hello project corresponding assets directory.

7, STEP3, the next thing to do is how to start the HTML5 program in Android applications, here to use the Android system comes with the WebView control (specific information reference adroid development document)---under the project to find res->layout- >activity_main.xml and open, insert the WebView control inside, and edit the desired style.

8, STEP4, in the main program entrance, with just edit the good WebView control will HTML5 program introduced, at this time, the main function has been realized, compile the project can get apk.

Other easy ways:

More and more developers are keen to use Html5+javascript to develop mobile web apps.

On the one hand, users in the use of habits, do not like to enter complex URLs on the browser, on the other hand, HTML5 Web App stored on the server side, in each use of the need for data transfer, resulting in a waste of traffic. Some developers do not want to touch complex Java code, then, what is the way to use HTML5 to develop the application, but also can be simply encapsulated as an apk file it?


I. WebView in the Android SDK
1. Instantiate the WebView component in the activity to: WebView WebView = new WebView (this);
2. Call WebView's Loadurl () method to set the page to display Wevview:
Internet use: Webview.loadurl ("http://www.31358.com");
For local files: Webview.loadurl ("file:///android_asset/XX.html"); Local files are stored in the: Assets file
3. Call the activity's Setcontentview () method to display the page view
4. Use WebView point link to see a lot of pages later in order to let WebView support fallback function, need to overwrite the Activity class onkeydown () method, if do not do any processing, click the system fallback shear key, the entire browser will call finish () and end itself, Instead of retreating back to the previous page
5. You need to add permissions to the Androidmanifest.xml file, or the Web page not available error will occur.

<uses-permission android:name= "Android.permission.INTERNET"/>

Disadvantage: If the load is a normal web page, there is no problem, but if it is HTML5, encapsulated, in android2.3 above to normal access, android2.2 and below, the SDK WebView has not fully supported HTML5

Here is a concrete example:

Mainactivity.java

1 Package com.android.webview.activity; 2 import android.app.Activity; 3 import Android.os.Bundle; 4 import android.view.KeyEvent; 5 import Android.webkit.WebView; 6  Public classMainactivity extends Activity {7     PrivateWebView WebView; 8 @Override9      Public voidonCreate (Bundle savedinstancestate) {Ten super.oncreate (savedinstancestate);  One         //instantiating a WebView object AWebView =NewWebView ( This);  -         //set the WebView property to be able to execute JavaScript scripts -Webview.getsettings (). setjavascriptenabled (true);  the         //load Web pages that need to be displayed -Webview.loadurl ("http://www.31358.cn/");  -         //set up a Web view - Setcontentview (WebView);  +     }   - @Override +     //Set Fallback A     //onkeydown (int keycoder,keyevent event) method that overrides the activity class at      PublicBoolean OnKeyDown (intKeyCode, KeyEventEvent) {   -         if((keycode = = Keyevent.keycode_back) &&Webview.cangoback ()) {   -Webview.goback ();//GoBack () indicates that the previous page of the WebView is returned -             return true;  -         }   -         return false;  in}
View Code

Add permissions in the Androidmanifest.xml file

1 <?XML version= "1.0" encoding= "Utf-8"?> 2 <Manifestxmlns:android= "Http://schemas.android.com/apk/res/android" 3  Package= "Com.android.webview.activity" 4 Android:versioncode= "1" 5 Android:versionname= "1.0"> 6     <USES-SDKandroid:minsdkversion= "Ten" /> 7     <ApplicationAndroid:icon= "@drawable/icon"Android:label= "@string/app_name"> 8         <ActivityAndroid:name=". Mainactivity " 9 Android:label= "@string/app_name"> Ten             <Intent-filter>  One                 <ActionAndroid:name= "Android.intent.action.MAIN" />  A                 <categoryAndroid:name= "Android.intent.category.LAUNCHER" />  -             </Intent-filter>  -         </Activity>  the     </Application>  -     <uses-permissionAndroid:name= "Android.permission.INTERNET"/>  - </Manifest> 
View Code

Second, the use of PhoneGap
PhoneGap is a fast-developing platform for creating mobile cross-platform mobile applications using HTML,CSS and JavaScript. It enables developers to take advantage of the core features of Iphone,android,palm,symbian,wp7,bada and BlackBerry smartphones-including geolocation, accelerators, contacts, sounds and vibrations, and PhoneGap has a rich plug-in, You can extend unlimited functionality with this. PhoneGap is free, but it requires additional software from a specific platform, such as the iphone sdk,android Android SDK for iphones, etc.

For detailed methods, see: Http://phonegap.com/start#android

Pros: Add SDK in Eclipse, programming freedom, perfect fit for different device screen size, suitable for master use.

Cons: Without using layouts, loading pages directly and not adding ads.

Third, the use of Rexsee online generation

Rexsee is an open source Android development platform that enables developers to standardize web development patterns and quickly implement mobile applications using HTML5, CSS3, and JavaScript. Will HTML will be Android. All you have to do is upload the good HTML5 application to the Rexsee server, and soon it will be compiled into the standard APK installation file.

Website: http://www.rexsee.com

Advantages: One-click Generation, suitable for ordinary people to use

Cons: Direct encapsulation, unable to add ads.


Iv. Appmobi Html5 XDK online generation (using the PhoneGap plugin)

http://www.appmobi.com/

How HTML5 packaged as an apk to encapsulate H5 as an Android app apk file

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.