1 交互原理
1.1 webview如何加載H5頁(yè)面
????????我們都知道在Android中是通過(guò)webView來(lái)加載html頁(yè)面的,根據(jù)HTML文件所在的位置不同寫(xiě)法也不同:
*//加載assets文件夾下的test.html頁(yè)面图柏,文件截圖如圖1*
mWebView.loadUrl("file:///android_asset/test.html");
*//加載網(wǎng)頁(yè)*
mWebView.loadUrl("http://www.baidu.com");
1.2 Android如何調(diào)用H5中的方法
1.2.1 設(shè)置JavaScriptEnabled
????????想要調(diào)用js方法那么就必須讓webView支持:
WebSettings webSettings = mWebView.getSettings();
*//設(shè)置為可調(diào)用js方法*
webSettings.setJavaScriptEnabled(true);
1.2.2 調(diào)用H5中無(wú)參無(wú)返回值的方法
如何調(diào)用序六?
Android調(diào)用H5中的方法,其實(shí)很簡(jiǎn)單蚤吹,直接調(diào)用就可以了例诀,不需要額外的操作。
①調(diào)用H5中無(wú)參無(wú)返回值的方法
? ??直接可以調(diào)用mWebView.loadUrl("JavaScript:show()");圖2為H5中show()方法裁着。
mWebView.loadUrl("JavaScript:show()");
1.2.3 調(diào)用H5中帶返回值的方法
②調(diào)用H5中帶返回值的方法
? ??可以調(diào)用mWebView.evaluateJavascript()方法,該方法只在安卓4.4以上版本適用二驰,圖3為Android調(diào)用H5中帶返回值的方法扔罪。
mWebView.evaluateJavascript("sum(1,2)",newValueCallback() {? ? ? ?
?????? @Override
?????? public void on ReceiveValue(Stringvalue) {??????????
??????????? Log.e(TAG,"onReceiveValuevalue=" + value);??????
?????? }??
?});
1.2.4 調(diào)用H5中帶參數(shù)的方法
③調(diào)用H5中帶參數(shù)的方法
? ??????當(dāng)調(diào)用H5中帶參數(shù)的方法時(shí),勢(shì)必要傳入一個(gè)字符串诸蚕,當(dāng)傳入固定字符串時(shí)步势,用單引號(hào)括起來(lái)即可;當(dāng)傳入變量名時(shí)背犯,需要用到轉(zhuǎn)義符(這里我也是花費(fèi)半個(gè)小時(shí)才搞懂的坏瘩,嘿嘿)。兩種情況代碼漠魏,分別在下面貼出倔矾,應(yīng)用截圖如圖4。
mWebView.loadUrl("javascript:alertMessage('哈哈')");
String? content="9880";
mWebView.loadUrl(? "javascript:alertMessage(\""???? +content+???? "\")"???? ?);
1.3 h5調(diào)用Android原生方法
1.3.1 @JavascriptInterface注解使用
??? 在Android4.2以上可以直接使用@JavascriptInterface注解來(lái)聲明,下面是在一個(gè)本地Java方法
?public class JsInteration {
??? @JavascriptInterface
??? public String back() {
??????? return "hello world";
??? }
}
定義完這個(gè)方法后再調(diào)用mWebView.addJavascriptInterface()方法:
?mWebView.addJavascriptInterface(new JsInteration(), "android");
那么在js中怎么來(lái)調(diào)用呢哪自?
function s(){
? ? //調(diào)用Java的back()方法
??? var result = window.android.back();
? ? document.getElementById("p").innerHTML=result;
}
1.3.2注意事項(xiàng)
????1丰包、當(dāng)自己寫(xiě)html文件時(shí),可能會(huì)出現(xiàn)顯示亂碼壤巷,我們需要指定格式
? ? 2、當(dāng)H5調(diào)用我們的方法時(shí)胧华,我們需要把規(guī)定的別名傳給H5(切記一定不能錯(cuò))寄症,而且我們要在自己的方法里執(zhí)行H5想要的操作。
????3矩动、給H5調(diào)用的方法一定要加@JavascriptInterface有巧,不然H5調(diào)不到我們的方法
? ? 4、 調(diào)用js有參數(shù)有返回值的函數(shù)時(shí)悲没,只有安卓4.4以上才能用webView.evaluateJavascript方法直接拿到返回值篮迎;當(dāng)版本低于4.4的時(shí)候,常用的思路是 java調(diào)用js方法示姿,js方法執(zhí)行完畢甜橱,再次調(diào)用java代碼將值返回。
①.Java調(diào)用js代碼
String call = "javascript: sumToJava(1, 2)";
webView.loadUrl(call);
②.js函數(shù)處理峻凫,并將結(jié)果通過(guò)調(diào)用java方法返回
function sumToJava(number1, number2){
?????? window.control.onSumResult(number1 + number2)
}
③.Java在回調(diào)方法中獲取js函數(shù)返回值
@JavascriptInterface
public void onSumResult(int result) {
? Log.i(LOGTAG, "onSumResult result="+ result);
}
5渗鬼、加載本地assets里的H5界面,要寫(xiě)成android_asset, 而不是assets荧琼,不然加載不到
1.4 攔截HTML頁(yè)面中的點(diǎn)擊事件
mWebView.setWebViewClient(newWebViewClient() {
??????? @Override
??????? public boolean shouldOverrideUrlLoading(WebView view, String url) {
??????????? //判斷url攔截事件
??????????? if(url.equals("file:///android_asset/test2.html")) {
??????????????? Log.e(TAG,"shouldOverrideUrlLoading: " + url);
??????????????? startActivity(newIntent(MainActivity.this,Main2Activity.class));
??????????????? return true;
??????????? } else {
??????????????? mWebView.loadUrl(url);
??????????????? return false;
??????????? }
??????? }
??? });
2 參考鏈接
Android和H5交互-基礎(chǔ)篇
http://www.reibang.com/p/a25907862523
安卓混合開(kāi)發(fā)——原生Java和H5交互譬胎,保證你一看就懂!
http://www.reibang.com/p/0b986d6e2e17
Android和H5之間的交互
https://blog.csdn.net/cs15229216584/article/details/53321750