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

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