Source code and H5 interactive android:

1: The default thing:

Android uses the built-in UI control WebView to load Web pages.
A Web page is represented by a network address:
Its entire use is simple as follows: (Android does not care about the actual HTML5 code)

String Murl = "http://www.baidu.com"; Represents the URL of a Web page
WebView Mwebview = Newwebview (); UI Controls for Home URLs
Mwebview.loadurl (Murl); Load the specified URL

2:HTML5 Call Android Local method 2.1 Html5 call Android native method one

A:android local methods that are called by HTML5 are defined in an object. "Suppose this object is called JavaScriptInterface1" (method exposed to HTML5)

B:webview through Addjavascriptinterface (new JavaScriptInterface1 (), "robot");
The object that defines the callback method is injected into the webview so that the HTML5 can invoke the local method through the injected object. "The reference to the injected object is called" Robot ""

C: In HTML5, the following writing, you can call the Android local method

<p>
<button onclick= "robot. Callandroidmethod () "> click on my call to Android method </button>
</p>

<p>
<button onclick= "Interface.callfromjsbasicdatatype (100,100, ' a ', true)" >callnative method to test basic datatype Through javascriptinterface</button>
</p>

D: If you need to interact with parameters then the methods defined in the Android native code and JS can be written as follows:

------Android Code sample------
Public voidcallfromjsbasicdatatype (int x,float Y,char C,boolean result) {
String str = "-" + (x+1) + "-" + (y+1) + "-" +c+ "-" +result;
}

public void Callandroidmethod () {
Apputils.showdialog ();
}

------JS mate above with Android example below------
<p>
<buttononclick= "Robot.callfromjsbasicdatatype (100,100, ' a ', True)" > Click I call Android method </button>
</p>

2.2 HTML5 Call Android Local method two

When the page jumps "must have the jump", intercepts the jump address URL, analyzes the URL to know the intention.

Android locally intercepts the jump address by customizing the Webclent object used in the WebView:

Private class Customwebviewclient Extendswebviewclient {
Rewrite the WebClient to intercept the address of the jump
public boolean shouldoverrideurlloading (WebView view, String URL) {
Note that the following judgment is the intent analysis
if (Url.contains ("www.mystore.com.cn")) {
String msg = URL;
Apputils.showalertdialog (HTML5CALLNATIVEFROMSELFWEBCLIENT.THIS,MSG);
return true;
}
return false;
}
}

3 Android Native method call HTML5

Android is mainly through WebView's Webview.loadurl ("Javascript:xxmethod ();"); To invoke the method in the embedded HTML5. Examples are as follows:

A method named "Noparamfunction ()" is defined in A:HTML5.

<script>
function Noparamfunction () {
var component = document.getElementById ("Noparam_ta");
Component.value = Component.value + "native button Clicked,call js with noparams\n";
}
</script>

B: On Android Local: Want to invoke the Noparamfunction method in JavaScript, as follows

Webview.loadurl ("javascript:noparamfunction ();");

4: Further down is the private protocol attached to the URL.

The contract that the backend sends data to the front end

1: Back end to the front end of the data sent to the whole is a Web address +? #myrainbowparams the combined structure of the #+ JSON string + #myrainbowparams #.
such as
Http://mystore.com.cn/v1/page/goods_info? #myrainbowprams #{"Clientaction": "1", "ActionId": "", "" params ": {" Bugoodsid ":" "£"}} #myrainbowprams #

2: Note:
Only the following 2 conditions are met the front end will root Acitonid to perform the action
The data given by A:H5 contains #myrainbowprams#
B:clientaction = 1

3: Parameter description

Parameters	Must-Choose	Type and Range	Description	Note
Clientaction	TRUE	String	Do you need the app to process the H5 data yourself? "0-> no need to deal with"; "1--> needs to be dealt with."
ActionId	True	String	Clientaction for 0 ActionId fill in -1;clientaction for 1 ActionId fill in the normal number
Params	TRUE	Jsonobject	Clientaction is null for 0 params; Clientaction for 1 params normal fill

Login: Optional

An example of the entire data H5 to the previous paragraph is as follows:

Http://mystore.com.cn/v1/page/goods_info? #myrainbowprams #{
"Clientaction": "1",
"ActionId": "100",
"Params": {
"Bugoodsid": "1000"
}
}
#myrainbowprams #

The preceding paragraph of this information is received after the following comprehension:
1: The front end needs to be handled by itself, rather than simply using the WebKit engine for page jumps
2: The front end needs to perform an action numbered 100
3: The parameters required to perform the action numbered 100 are in the params, there are bugoodsid, URLs, and so on. Please take it as required.

Source code and H5 interactive android: