1. 程式人生 > >安卓 native 和 H5 的互動

安卓 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

clientaction0 actionid填為-1clientaction1 actionid填為正常的編號

params

TRUE

jsonobject

clientaction0 params填為null ; clientaction1 params正常填寫

登入:可選

h5給前段的整個資料示例如下


}
}
#myrainbowprams#

對上面的這些資訊前段接收到之後理解如下:
1
:前端需要自己處理,而不是簡單的利用webkit引擎去進行頁面跳轉
2
:前端需要執行編號為100的動作
3
執行編號為100的動作所需要的引數在params中,有 bugoodsid , url等。。請按照需求取。