源生代碼和H5的交互 android：

時間 2019-12-07

標籤代碼 h5 交互 android 欄目 Android 简体版

原文原文鏈接

1：默認的事情：

Android 經過內置的UI控件WebView來加載網頁。
網頁是用一個網絡地址來表示的：
其整個使用方法很簡單以下：(android不關心實際的html5代碼)javascript

String mUrl ="http://www.baidu.com";    //表明了某個網頁的網址
       WebView mWebView = newWebView();    //用來家在網址的UI控件
       mWebView.loadUrl(mUrl);                         //加載指定網址html

2：Html5 調用 android 本地方法

2.1 Html5 調用 android 本地方法一

a: android 本地將被Html5調用的方法都定義在一個Object中。【假定這個Object 叫 JavaScriptInterface1 】（暴露給html5的方法）前端

b：WebView經過addJavascriptInterface(new JavaScriptInterface1(), "robot");
將定義了回調方法的對象注入WebView中，這樣html5就能經過注入的這個對象調用本地方法。【注入的對象的引用叫「robot」】html5

c: 在html5中，以下書寫，就能調用android本地的方法java

<p>
<button onclick="robot. callAndroidMethod()">點擊我調用android 方法</button>
</p>android

<p>
<button onclick="interface.callFromJSBasicDataType(100,100,'a',true)">callnative method to test basic datatype through javascriptInterface</button>
</p>web

d：要是須要帶參數交互那麼android 本地代碼和 JS中定義的方法能夠以下書寫：json

//------android 代碼示例------
     public voidcallFromJSBasicDataType(int x,float y,char c,boolean result){
            String str ="-"+(x+1)+"-"+(y+1)+"-"+c+"-"+result;
        }後端

public void callAndroidMethod(){
AppUtils.showDialog();
}網絡

//------JS配合上面的android示例以下------
<p>
<buttononclick="robot.callFromJSBasicDataType(100,100,'a',true)">點擊我調用android 方法</button>
</p>

2.2 Html5 調用 android 本地方法二

在網頁跳轉的時候【必須有跳轉】，截獲跳轉地址Url，分析Url從而得知意圖。

android 本地經過自定義WebView中使用到的WebClent對象，從而截獲跳轉地址：

private class CustomWebViewClient extendsWebViewClient {
//重寫webclient，從而截獲跳轉的地址
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//注意，下面的判斷就是意圖分析
if (url.contains("www.mystore.com.cn")) {
String msg = url;
AppUtils.showAlertDialog(Html5CallNativeFromSelfWebClient.this,msg);
return true;
}
return false;
}
}

3 android 本地方法調用html5

android主要是經過WebView的webView.loadUrl("JavaScript:xxmethod();"); 來調用嵌入html5中的方法。例子以下：

a:html5 中定義一個方法，名叫 "noParamFunction()"

<html>
<head>
<script>
function noParamFunction() {
var component = document.getElementById("noparam_ta");
component.value = component.value + "native button clicked,call js with noparams\n";
}
</script>
</head>
</html>

b: 在android本地：想調用javascript中的noParamFunction方法，以下便可

webView.loadUrl("javascript:noParamFunction();");

4: 再往下就是URL中附加的私有協議了

後端給前端發送數據的約定

1:後端給前端發送的數據整個就是一個網頁地址 + ？#myrainbowparams#+ json串 +#myrainbowparams# 的組合結構。
（好比：
http://mystore.com.cn/v1/page/goods_info?#myrainbowprams#{"clientaction":"1","actionid": "100","params": {"bugoodsid": "1000"}}#myrainbowprams#

2：注意：
只有知足下面2個條件前端纔會根acitonid 去執行動做
a：h5給的數據中包含#myrainbowprams#
b: clientaction = 1

3:參數說明

參數	必選	類型及範圍	說明	備註
clientaction	TRUE	string	是否須要app本身處理H5給的數據。" 0->不須要處理" ; "1-->須要處理"
actionid	true	string	clientaction爲0 actionid 填爲-1；clientaction爲1 actionid填爲正常的編號
params	TRUE	jsonobject	clientaction爲0 params 填爲null ; clientaction爲1 params 正常填寫

登陸：可選

h5給前段的整個數據示例以下：

http://mystore.com.cn/v1/page/goods_info?#myrainbowprams#{
"clientaction": "1",
"actionid": "100",
"params": {
"bugoodsid": "1000"
}
}
#myrainbowprams#

對上面的這些信息前段接收到以後理解以下：1：前端須要本身處理，而不是簡單的利用webkit引擎去進行頁面跳轉2：前端須要執行編號爲100的動做3：執行編號爲100的動做所須要的參數在params中，有 bugoodsid , 有url 等。。請按照需求取。