A preliminary study on the development of Hybrid App: Using WebView to load pages

Source: Internet
Author: User

Hybrid App is short for mixed-mode applications. It has advantages in both Native apps and Web apps, and has low development costs andWebCross-platform features. Currently, all of the middleware-based mobile development frameworks use Hybrid development models, suchPhoneGapTitanium, Sencha, and domestic AppCan and Rexsee. The Hybrid App development model is being recognized by more and more companies and developers. I believe it will become the mainstream mobile application development model in the future.

 

The principle of integrating Hybrid App with Web App is to embed a WebView component that can load pages, which is equivalent to an embedded browser. The Code is as follows:

Import android. app. activity; import android. OS. bundle; import android. webkit. webSettings; import android. webkit. webView; public class AActivity extends Activity {@ Overridepublic void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); // create WebViewWebView webView = new WebView (this); // switch to the content view setContentView (webView); // obtain WebView configuration WebSettings ws = webView. getSettings (); // enable JavaScriptws. setJavaScriptEnabled (true); // load a page webView under the assets Directory. loadUrl ("file: // android_asset/www/BoBox/index.html ");}}

Another method is to add the WebView component to the layout file. The Code is as follows:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <WebView      android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:id="@+id/webview"    />    </LinearLayout>
Import android. app. activity; import android. OS. bundle; import android. webkit. webSettings; import android. webkit. webView; public class BActivity extends Activity {@ Overridepublic void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. webview); // find WebViewWebView webView = (WebView) findViewById (R. id. webview); // obtain the WebView configuration WebSettings ws = webView. getSettings (); // enable JavaScriptws. setJavaScriptEnabled (true); // A webView of the page under the loaded assets Directory. loadUrl ("file: // android_asset/www/index.html ");}}

WebView also has an important method-addJavascriptInterface, which can be used to call Java and JavaScript programs. The Code is as follows:

webView.addJavascriptInterface(new Object(){public void clickOnAndroid(){mHandler.post(new Runnable(){public void run(){webView.loadUrl("javascript:wave()");}});}}, "demo");

The page code is as follows:

<script>function wave() {document.getElementById("id").innerHTML = "Hello World!";}</script>

In this way, when you Click the Me button on the page, the clickOnAndroid function in Java code is called, and the clickOnAndroid function calls the wave method on the page. It should be noted that this interface runs in the Android 2.3 simulator, causing WebView to crash and has not been fixed yet. This is a simple example of how Java and JavaScript call each other. In actual applications, you can call the clickOnAndroid function called on the page to call the camera, Address Book, notification reminder, and other device functions.

 

You may also like

 

  • Exquisite mobile development PSD material resources for free download
  • 10 excellent mobile Web application development frameworks
  • Very useful Android development tools and toolkit
  • 25 outstanding iPad application website design cases
  • 30 exquisite Web and mobile development UI material packages

 

Link to this article: A Preliminary Study of Hybrid App development: Using WebView to load web pages

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

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.