您好,登錄后才能下訂單哦!
Android中webview與JS交互、互調(diào)方法實(shí)例詳解
前言:
對(duì)于試水的功能,一般公司都會(huì)采用H5的方式來(lái)開(kāi)發(fā),可以用很少的資源與很短的項(xiàng)目工期來(lái)完成。
但許多情況下,H5頁(yè)面會(huì)需要一些原生持有的一些如用戶(hù)信息之類(lèi)的數(shù)據(jù),一些交互也需要調(diào)用原生的,如toast之類(lèi)要保持同一個(gè)手機(jī)風(fēng)格一致的交互行為。這個(gè)時(shí)候就需要能夠讓JS主動(dòng)調(diào)用原生的方法來(lái)進(jìn)行操作或者獲取數(shù)據(jù)。或者是原生調(diào)用JS的方法在H5加載的時(shí)候傳遞一些參數(shù)。
對(duì)于原生調(diào)用JS的方法
我們需要實(shí)現(xiàn)一個(gè)WebViewClient,在這個(gè)WebViewClient里面進(jìn)行JS方法加載的替換
如
webView_.setWebViewClient(new WebViewClient() { public void onPageFinished(WebView view, String url) { view.loadUrl(MessageFormat.format("javascript:initEvaluationPage({0})", Util.wrapGetParameter(json) )); } });
這里的initEvaluationPage必須要和JS的方法名一致
建議傳遞json格式數(shù)據(jù)作為參數(shù)。
不要忘了允許WebView執(zhí)行JS代碼
webView_.getSettings()s.setJavaScriptEnabled(true);
對(duì)于JS調(diào)用原生方法,稍微復(fù)雜一些
首先,需要本地定義一個(gè)接口,接口名需要和JS內(nèi)寫(xiě)的一致
比如JS需要客戶(hù)端保存的用戶(hù)信息
JS中代碼是這樣的
var userInfo = JSON.parse(window.JSUserInfoInterface.getUserInfo());
那么我們本地也需要定義一個(gè)對(duì)應(yīng)的接口
public interface JSUserInfoInterface { @JavascriptInterface String getUserInfo(); }
接口名方法名一致
實(shí)例化這個(gè)接口,在實(shí)例方法內(nèi)返回我們的用戶(hù)信息
JSUserInfoInterface method3 = new JSUserInfoInterface() { @Override @JavascriptInterface public String getUserInfo() { SharedPreferences sharedPreferences = getActivity().getApplicationContext().getSharedPreferences( "share", Context.MODE_PRIVATE); String tel = sharedPreferences.getString(Constant.KEY_USERNAME, ""); String userid = sharedPreferences.getString("userid", ""); return "{\"user_id\":\"" + userid + "\",\"user_tel\":\"" + tel + "\"}"; } };
注意不能忘了 @JavascriptInterface注解
然后將這個(gè)接口方法加入到webView_中,注意第二個(gè)參數(shù)就是接口名,需要和JS中的一致。
webView_.addJavascriptInterface(method3, "JSUserInfoInterface");
這樣就可以在JS調(diào)用window.JSUserInfoInterface.getUserInfo()的時(shí)候返回我們實(shí)例里面給的數(shù)據(jù)
同樣的,我們也可以不返回?cái)?shù)據(jù)直接執(zhí)行。比如彈一個(gè)原生的Dialog。
需要注意的是JS里面是沒(méi)有主線程子線程的概念的,當(dāng)JS進(jìn)行網(wǎng)絡(luò)請(qǐng)求的時(shí)候,webview會(huì)默認(rèn)給他開(kāi)子線程。具體機(jī)制大家感興趣可以去了解。不過(guò)這也就意味著你不能直接在給JS掉的原生方法中進(jìn)行UI操作。你可以選擇發(fā)送給主線程執(zhí)行。
比如下面的代碼我是用rxjava來(lái)切換線程的
JSDialogInterface method2 = new JSDialogInterface() { @Override @JavascriptInterface public void changeDialog(String arg0) { Observable.just(arg0) .observeOn(AndroidSchedulers.mainThread()) .subscribe(mess -> { if (mess.equals("show")) { ld_.show(); } else { ld_.dismiss(); } }); } };
最后
一點(diǎn)小建議
如果你的項(xiàng)目中有很多或者一定數(shù)量的JS交互,建議寫(xiě)一個(gè)有返回值的接口。然后通過(guò)JSON參數(shù)來(lái)進(jìn)行控制。內(nèi)部制定一個(gè)解析協(xié)議,根據(jù)JSON的數(shù)據(jù)來(lái)決定要做什么事,避免大量定義接口 ,也避免構(gòu)建太多的實(shí)例消耗資源
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。