android was developed using the example of Hybrid App to load the page using webwiew

2020-05-30 21:00:47
OfStack

Hybrid App is short for mixed mode application. It combines the advantages of Native App and Web App. It has low development cost and cross-platform features of Web technology. At present, all known mobile development frameworks based on middleware adopt Hybrid development mode, such as PhoneGap, Titanium, Sencha in foreign countries, AppCan, Rexsee in China, and so on. The Hybrid App development model is being recognized by more and more companies and developers, and it is believed that it will become the mainstream mobile application development model in the future.

Hybrid App fuses Web App by embedding an WebView component into which a page can be loaded, 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{

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //  create WebView
        WebView webView= new WebView(this);
        //  Switch to the content view 
        setContentView(webView);
        //  To obtain WebView configuration 
        WebSettings ws = webView.getSettings();
        //  To enable the JavaScript
        ws.setJavaScriptEnabled(true);
        //  load assets In the directory 1 A page 
        webView.loadUrl("file:///android_asset/www/BoBox/index.html");
    }
}

Another way to introduce WebView 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{

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);
        //  To find the WebView
        WebView webView = (WebView) findViewById(R.id.webview);
        //  To obtain WebView configuration 
        WebSettings ws = webView.getSettings();
        //  To enable the JavaScript
        ws.setJavaScriptEnabled(true);
        //  In the load assets In the directory 1 A page 
        webView.loadUrl("file:///android_asset/www/index.html");
    }
}

WebView also has a very important method -- addJavascriptInterface, which can be used to realize the mutual call between Java program and JavaScript program. 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>
</head>
<body>
    <div>
        <a href="#" id="demo" onclick="window.demo.clickOnAndroid()">Click Me</a>
    </div>
</body>
</html>

In this way, when you click the Click Me button on the page, the clickOnAndroid function in the Java code will be called, and the clickOnAndroid function will call the wave method on the page. Note: this interface running in Android version 2.3 emulator will cause WebView to crash, which has not been fixed. This is a very simple example of how Java and JavaScript call each other. In practice, you can call the camera, address book, notification and reminder functions in the clickOnAndroid function called by the page.