Android原生與H5通信
如今，混合開發(fā)似乎成為了主流。H5擁有跨平臺(tái)的優(yōu)勢，卻存在性能上的問題正好可以用搭建原生殼承載H5代碼的方式去解決。
如何理解這種方式，就好像說Android原生代碼封裝外殼，內(nèi)部包含H5代碼作為核心內(nèi)容。更細(xì)節(jié)一點(diǎn)，我們把引導(dǎo)頁、登錄頁、首頁等等與業(yè)務(wù)關(guān)聯(lián)打不并且與用戶交互較多的頁面用原生去寫，而業(yè)務(wù)頁面，邏輯代碼由H5處理，將他們結(jié)合就形成了混合開發(fā)的由原生殼承載的H5APP。
這么做有什么好處呢?組個(gè)例子，我們利用這種方式做好了一個(gè)Android原生APP，現(xiàn)在需要做一個(gè)IOS原生APP，我們可以直接簡單搭建一個(gè)IOS殼，復(fù)用H5代碼，完成IOS原生APP。同時(shí)我們需要在釘釘、微信小程序等等平臺(tái)搭建，可以直接復(fù)用我們已有的H5代碼。
而這樣的搭建方式比純H5搭建的APP的優(yōu)勢在于因?yàn)橛性鷼さ拇嬖?，可以自由的使用原生API。保證了交互上的流暢性。
如何實(shí)現(xiàn)原生與H5的通信呢?
關(guān)于通訊我們需要解決兩個(gè)問題：
- 原生向H5通訊
- H5向原生通訊
第一個(gè)問題很好解決，以Android為例，WebView提供特有的方法，當(dāng)你打開一個(gè)Html，你可以去調(diào)用這個(gè)Html中包含的JS。例如：
- webview.loadUrl("javascript:callH5('Android ok')");
第二個(gè)問題我們采用發(fā)送指令的方式來處理。同樣以Android為例，WebView可以攔截html跳轉(zhuǎn)時(shí)的url地址，我們可以利用這個(gè)地址，約定一個(gè)規(guī)則，如果符合規(guī)則，則攔截后不執(zhí)行跳轉(zhuǎn)，通過這個(gè)url獲取我們需要的信息，執(zhí)行對應(yīng)的操作。
- window.location.href=protocol://android?code=toast&data=+Json.stringify(config)
上述是一段JS的頁面跳轉(zhuǎn)方法。我們規(guī)定規(guī)則PRE=protocol://android?，當(dāng)我們攔截的url包含PRE時(shí)，則我們認(rèn)為這是一條指令，不需要跳轉(zhuǎn)頁面，應(yīng)該執(zhí)行對應(yīng)操作。而參數(shù)code則是我們的指令內(nèi)容，data為通信時(shí)的傳參。
接下來是原生這邊處理。首先我們攔截url。這里筆者還處理由于Http攻擊導(dǎo)致H5頁面出現(xiàn)廣告的問題。我們主要是第一個(gè)if。
- webView.setWebViewClient(new WebViewClient() {
- // Load opened URL in the application instead of standard browser
- // application
- public boolean shouldOverrideUrlLoading(WebView view, String url) {
- showLogInfo("攔截到的url----"+url);
- String advertising="http://"+sharedPreferencesUtil.getData(Constant.IP, RequestConfig.IP)
- +":"+sharedPreferencesUtil.getData(Constant.PORT,RequestConfig.IPPORT);
- if (url.contains(pre)) {
- Map map = getParamsMap(url, pre);
- String code = map.get("code");
- String data = map.get("data");
- parseCode(code, data);
- return true;
- }else if(!url.contains(advertising)){
- showLogError("攔截到植入廣告，廣告的url——"+url);
- return true;
- } else{
- return false;
- }
- }
- });
return 為ture表示攔截成功，不執(zhí)行后面的跳轉(zhuǎn)操作。而false表示按正常流程執(zhí)行。攔截成功后我們從url中獲取code和data，接著就可以按照我們自己的需求去處理了。
