Simple interaction between Android and JS

Let's take a look at the graphical analysis of the Web app Hybrid app Native app
Web App

Web app refers to the app written in HTML5 language, does not need to download installation, similar to what is now said light application, survival in the browser application, basically can be said to touch screen version of the Web application.

Advantages:
(1) Low cost of development
(2), update fast
(3) No need to notify users of updates, no manual upgrades required
(4), able to cross multiple platforms and terminals

Disadvantages:
(1), temporary entrance
(2), unable to obtain system-level notifications, reminders, special effects ...
(3), the user retention rate is low
(4), the design is limited by many
(5), the experience of poor Hybrid App

Hybrid app refers to a hybrid app that needs to be downloaded, installed, and looks similar to native app, but has very little UI Web View that accesses web

Hybrid app tries to create a similar experience with native app, but it's limited by technology, speed, etc. Native App

Native app refers to the native program, generally relying on the operating system, there is a strong interaction, is a complete app, can expand the line strong, users need to download and install use

Advantages:
(1), to create a perfect user experience
(2), stable performance
(3), fast operation and smooth
(4), access to local resources (Communications records, albums)
(5), the design of excellent animation effects, transitions
(6), with the system level of intimate notice or reminder
(7), the user retention rate is high

Disadvantages:
(1), the development of high cost, different platforms have different development language and interface adaptation
(2), maintenance costs high, (for example, an app, has been updated to the V5 version, but still have users to use the V3,V4 version, need more developers to maintain the previous version)
(3), update slowly, according to different platforms, submit – Audit – on-line and so on through the process is more complex

because the native app is an intersection of web apps and native apps, it's the equivalent of inheriting two of the benefits.

Comparison of advantages and disadvantages between the three:

Android for HTML interaction

two ways to interact:
1. Android calls HTML

2. HTML calls Android

steps:

1, set the allowed to execute the JS script

Mwebview.getsettings (). Setjavascriptenabled (True);

2. Add Communication interface

Mwebview.addjavascriptinterface (Minterface, "app");

3. JS calls Android

Minterface.showname ("Hello JavaScript");

4, Android Call JS

Mwebview.loadurl ("Javascript:showname" (' +name+ ")");

Three ways to load WebView:

Open the index.html file
    mwebview.loadurl ("file:///android_asset/index.html") under the Assers directory in this package;

Open the index.html file
    mwebview.loadurl ("content://com.android.thmlfileprovider/sdcard/index.html") in the local SD card;

Opens the HTML file Mwebview.loadurl for the specified URL
    ("html://www.baidu.com (i.e. address)");

project to illustrate the use of:

* * First we'll create a module
The layout file is simple: * *

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
    "http://schemas.android.com/" Apk/res/android "
    xmlns:tools=" Http://schemas.android.com/tools "
    android:layout_width=" Match_parent "
    android:orientation= "vertical"
    android:layout_height= "match_parent"
    tools:context= ". Mainactivity ">

    <button
        android:id=" @+id/button "
        android:text=" Call js "
        Android:layout_ Width= "Match_parent"
        android:layout_height= "wrap_content"/> <webview android:id=
        "@+id/" WebView "
        android:layout_width=" match_parent "
        android:layout_height=" match_parent "></webview" >

</LinearLayout>

Create a assets package that creates an HTML file under this package:

<! DOCTYPE html>
 
then activities activity code:

Here to write the code piece
 
Package Com.example.ruolan.hybridapp;
Import Android.content.Context;
Import Android.os.Bundle;
Import android.support.v7.app.AppCompatActivity;
Import Android.view.View;
Import Android.webkit.JavascriptInterface;
Import Android.webkit.WebView;
Import Android.widget.Button;

Import Android.widget.Toast;

    public class Mainactivity extends Appcompatactivity implements View.onclicklistener {private WebView Mwebview;

    Private Button Mbutton;

    Private Webappinterface Minterface;
        @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);

        Setcontentview (R.layout.activity_main);
        Mwebview = (webview) Findviewbyid (R.id.webview);
        Open the index.html file Mwebview.loadurl ("file:///android_asset/index.html") under the assets directory in this package;
        1, set the allowed to execute the JS script mwebview.getsettings (). Setjavascriptenabled (True);
        Minterface = new Webappinterface (this); 2, add the communication interface Mwebview.addjavascriptinterFace (Minterface, "app");
        Mbutton = (Button) Findviewbyid (R.id.button);
    Mbutton.setonclicklistener (this);
    @Override public void OnClick (View v) {//js calls as Minterface.showname ("Hello JavaScript");

        Class Webappinterface {public context mcontext;
        Public Webappinterface {this.mcontext = context;
            //js Call as @JavascriptInterface//Add this sentence, otherwise it is possible to error in the high version of the public void SayHello (String name) {
        Toast.maketext (Mcontext, "name=" + Name, Toast.length_short). Show ();
            //as calls js public void ShowName (final String name) {//To update the UI in a child thread, where we used the Runonuithread () thread
                    Runonuithread (New Runnable () {@Override public void run () {
                Mwebview.loadurl ("Javascript:showname (' + name + ')");
        }
            });
 }
    }

}
 
Of course, if it's Android, then we just write the code on the front of the Android, and the HTML call provides a packaged interface, and if it's HTML, it encapsulates the interface that Android calls JS.

Okay, let's get some effect graphs:
Graphics that are just starting to run:

Click on the Call JS button (realize Android call JS):

Finally click the Say hello button:

Of course, here is just a particularly simple example where we can define or write more complex code in our interface to achieve the results we need.