安卓 native 和 H5 的互動
源生程式碼和H5的互動
android:
1: 預設的事情:
android 通過內建的UI控制元件WebView來載入網頁。
網頁是用一個網路地址來表示的:
其整個使用方法很簡單如下:(android不關心實際的html5程式碼)
String mUrl ="http://www.baidu.com"; //代表了某個網頁的網址
WebView mWebView = newWebView(); //用來家在網址的UI控制元件
mWebView.loadUrl(mUrl); //載入指定網址
2:Html5 呼叫 android 本地方法
2.1 Html5 呼叫 android 本地方法一
a: android 本地將被Html5呼叫的方法都定義在一個Object中。【假定這個Object 叫 JavaScriptInterface1 】(暴露給html5的方法)
b:WebView通過addJavascriptInterface(new JavaScriptInterface1(), "robot");
將定義了回撥方法的物件注入WebView中,這樣html5就能通過注入的這個物件呼叫本地方法。【注入的物件的引用叫 “robot”】
c: 在html5中,如下書寫 ,就能呼叫android本地的方法
<p>
<button onclick="robot. callAndroidMethod()">點選我呼叫android 方法</button>
</p>
<p>
<button onclick="interface.callFromJSBasicDataType(100,100,'a',true)">callnative method to test basic datatype through javascriptInterface</button>
</p>
d: 要是需要帶引數互動那麼android 原生代碼和 JS中定義的方法可以如下書寫:
//------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#的組合結構。(比如:
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給前段的整個資料示例如下:
}
}
#myrainbowprams#
對上面的這些資訊前段接收到之後理解如下:
1:前端需要自己處理,而不是簡單的利用webkit引擎去進行頁面跳轉
2:前端需要執行編號為100的動作
3:執行編號為100的動作所需要的引數在params中,有
bugoodsid , 有url等。。請按照需求取。