Several Methods for encapsulating HTML5 into an android app APK file-

Source: Internet
Author: User
More and more developers are keen to use html5 + JavaScript to develop mobile webapps. However, it is still unknown whether the emergence of HTML5WebAPP can replace mobile apps in the future .,. More and more developers are keen to use html5 + JavaScript to develop mobile Web apps. However, it is still unknown whether HTML5 Web apps can replace mobile apps in the future. On the one hand, users do not like to enter complex URLs in their browsers. On the other hand, Html5 Web apps are stored on the server and data transmission is required for each use, this will cause a waste of traffic. Some developers do not want to be familiar with complex JAVA code. So, how can we use HTMl5 for development and simply encapsulate it into an APK file?


1. WebView in Android SDK


1. instantiate the WebView component in the Activity: WebView webView = new WebView (this );
2. Call the WebView loadUrl () method to set the web page to be displayed in WevView:
For Internet: webView. loadUrl ("http://www.31358.com ");
Local file: webView. loadUrl ("file: // android_asset/XX.html"); local files are stored in the assets file.
3. Call the setContentView () method of Activity to display the webpage view.
4. after reading many pages through the WebView link, in order to allow WebView to support the rollback function, we need to overwrite the onKeyDown () method of the Activity class. If no processing is done, click the system rollback scissors, the entire browser calls finish () instead of rolling back to the previous page.
5. You must add permissions to the AndroidManifest. xml file. Otherwise, the Web page not available error may occur.



Disadvantages: If the webpage is loaded, there is no problem, but if it is html5, after encapsulation, it can be accessed normally at or above android2.3, android2.2 and below, the WebView In the SDK does not fully support HTML5.

The following is an 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 class MainActivity extends Activity {
  7. Private WebView webview;
  8. @ Override
  9. Public void onCreate (Bundle savedInstanceState ){
  10. Super. onCreate (savedInstanceState );
  11. // Instantiate a WebView object
  12. Webview = new WebView (this );
  13. // Set WebView attributes to execute Javascript scripts
  14. Webview. getSettings (). setJavaScriptEnabled (true );
  15. // Load the webpage to be displayed
  16. Webview. loadUrl ("http://www.31358.cn /");
  17. // Set the Web View
  18. SetContentView (webview );
  19. }
  20. @ Override
  21. // Set rollback
  22. // Override the onKeyDown (int keyCoder, KeyEvent event) method of the Activity class
  23. Public boolean onKeyDown (int keyCode, KeyEvent event ){
  24. If (keyCode = KeyEvent. KEYCODE_BACK) & webview. canGoBack ()){
  25. Webview. goBack (); // goBack () indicates that the previous page of WebView is returned.
  26. Return true;
  27. }
  28. Return false;
  29. }


Add permissions to the AndroidManifest. xml file


  1. Package = "com. android. webview. activity"
  2. Android: versionCode = "1"
  3. Android: versionName = "1.0" type = "codeph" text = "/codeph">


  4. Android: label = "@ string/app_name">








Ii. Use PhoneGap

PhoneGap is a fast development platform that uses HTML, CSS, and JavaScript to create mobile cross-platform mobile apps. It allows developers to take advantage of the core features of iPhone, Android, Palm, Symbian, WP7, Bada, and Blackberry smartphones-including geographic positioning, accelerators, contacts, sounds, and vibrations, in addition, PhoneGap has a variety of plug-ins, which can be used to expand unlimited functions. PhoneGap is free of charge, but it requires additional software provided by a specific platform, such as the iPhone SDK for iPhone and Android SDK for Android,

See http://phonegap.com/start#android for details

Advantages: the SDK is added to Eclipse, which allows you to program freely and perfectly adapt to the screen sizes of different devices. It is suitable for use by experts.

Disadvantage: webpage loading without layout, and advertisement cannot be added.

3. Online generation using Rexsee

Rexsee is an open-source Android development platform that allows developers to quickly implement mobile applications using HTML5, CSS3, and Javascript in a standardized Web development mode. HTML and Android. All you need to do is upload the HTML5 application to the Rexsee server. Soon, it will be compiled into a standard APK Installation File.

Website: http://www.rexsee.com

Advantages: one-click generation, suitable for common users

Disadvantage: you cannot add an advertisement because it is directly encapsulated.

Iv. Online generation of appMobi Html5 XDK (using the PhoneGap plug-in)

Http://www.appmobi.com/

Author: lingyu drifting
Source: http://www.cnblogs.com/kingboy2008/
The copyright of this article is shared by the author and the blog and CSDN. You are welcome to reprint this article. However, you must keep this statement without the author's consent and provide the original article connection clearly on the article page, otherwise, you are entitled to pursue legal liability. This article is also published in my independent blog-blog garden-ling Yu and CSDN-ling Yu.

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.