Android與Web原生互調經驗總結
隨着手機移動端的日益成熟，爲了節省開發時間，以及節約成本，以及正值HTML5火爆，很多公司都選擇在一些頁面使用HTML5的頁面來替換原生頁面，特別是電商購物或者一些新聞閱讀類的app更是大量的使用HTML5頁面，因爲這些頁面會經常性的改變頁面以及沒有複雜性的功能，只需要一些炫酷的網頁效果就行，比如之前雙11來臨時，淘寶推出的搶包活動等，無需更新應用即可在雙11那天顯示出雙11活動的頁面，並且還有一系列比較炫酷的搶寶特效，不僅如此而且這些HTML頁面更是跨平臺的極大的減少了開發時間以及人員，這是web之所以在手機app上也如此流行的很大原因。既然app中內嵌HTML網頁如此的火爆那麼我們作爲Android開發就更應該及時的掌握如何在Android原生的基礎上和web進行互相調用。
首先說一下使用的步驟這裏只是簡單的說一下，參考智慧易居js的調用方法我們分析一下。
1.js調用Android本地的方法
第一步：先編寫給JavaScript調用的接口，我們這裏先在Android端代碼中寫一個類用於專門接收和調用js代碼的類。這裏我們貼出demo的代碼；
可以看到我們在Android端註冊了一個webAppInterface類用於js調用我們Android的代碼，比如方法sendCarMsg是js在調用我們方法sendCarMsg時它會傳回一個String類型的strCarInfoJson的字符串給我們Android本地接收，而getCarMsg方法是js在調用我們方法getCarMsg時會自己收到Android端傳遞給web的參數也就是String類型的字符串data。
第二步：在webView初始化時進行註冊js調用接口的註冊：
WebAppInterface mWebAppInterface =newWebAppInterface(mActivity);
webview.addJavascriptInterface(mWebAppInterface,WebAppInterface. PARK_LIB_ANDROID);
這裏我們將我們之前編寫的js調用的類進行註冊，其中PARK_LIB_ANDROID代表js代碼中調用Android這個類時我們事先定義好的名稱；
第三步：其實在第二步時我們就已經完成了Android端需要做的事情，之所以寫第三步是爲了能讓大家更好的理解，這裏把js端調用Android的方法也寫出來便於大家理解整個互調的流程；
//調用app的接口
if (isAPP && isAndroid) {
window.PARK_LIB_ANDROID.sendCarMsg(JSON.stringify(params));
}
這裏可以看見通過和Android原生約定傳入的PARK_LIB_ANDROID來調用Android本地的方法，通過sendCarMsg(JSON.Stringify(parms))將數據傳給Android本地。這裏需要注意的一點是被js調用的Android本地方法前面最好要加上@JavascriptInterface註解，不然可能存在高版本不兼容問題導致js調不到Android接口的問題然後使用webview的addJavascriptInterface添加這個類的對象，取一個名字。
2.android調用js的方法
這裏說的都是js調用Android的方法，我們也簡單的介紹一下Android調用js的方法。
第一步：在Android代碼中設置一些模板化的初始化操作，這裏不管是Android調用js還是js調用Android都需要這些設置。
webView.getSetting().setJavaScriptEnabled(true);
webView.getSetting().setDefaultTextEncodingName("UTF-8");
webView.setWebChromeClient(newWebChromeClient());
第二步：在已知js代碼中的方法時比如知道js代碼中有方法叫做showInfoFromJava()直接調用；
webView.loadUrl("javascript:showInfoFromJava()");
如果需要在調用js代碼時給它傳參我們可以直接拼接字符串來實現，舉例如下。
webView.loadUrl(String.format("javascript:loadMap('%s')", url)
)
可以看到這樣我們就可以調用帶有參數方法的js代碼了，這裏是將12345這個參數傳給了js。
以上這些就是Android和js的互調的基本方法以及步驟，都是固定的模式和方法很容易就能掌握可以看到藉助現有接口技術，js 可以執行原生java代碼中的方法，可以得到方法的返回值，可以讓原生java代碼在主線程中動態的操作UI；但是藉助該接口，原生java代碼，採用webview.loadUrl("javascript:loadMap()")，只能做到執行js中的方法，如果想獲取js中定義的全局變量，或者獲取某個js函數的返回值，這種方式無法做到，webview也沒有提供別的函數來可供使用。
既然這裏寫到了原生和web的交互那麼在此比較一下原生和web各自的優缺點：
- 在用戶體驗和表現上，原生APP勝出。在這個方面，HTML5仍然面臨着不同移動終端設備本地瀏覽器的功能接入問題，同時在提供用戶展示圖形界面和數據展現的豐富性方面還有不足。畢竟不是手機原有系統上的所以不會像原生一樣的流暢。
- 在跨平臺開發成本上，HTML5勝出。HTML5採用網絡通用語言，不用考慮終端設備或者操作系統的不同。目前，W3C(萬維網聯盟World Wide Web Consortium，簡稱W3C)正在與汽車業、出版業、電視業進行討論，將web引入新的設備平臺中。隨着平臺逐漸豐富，這方面的成本問題將會日益凸顯。
- 在更快速的更新和更強的發佈控制方面，HTML5勝出。與HTML5相比，原生APP不具備的一個優勢就是開放性。HTML5是基於Web的，這就意味着沒有一家公司可以成爲市場的“看門人”，各大應用市場沒辦法。
- 在變現能力方面，原生APP勝出。原生應用的分發平臺，如App Store和Google Play，以及國內的應用寶，華爲應用商店等，目前是獲得收入的較爲成熟的商業模式;而HTML5應用，除了付費下載以外，還沒有形成其他成熟的商業模式。
- 在技術人才儲備上，HTML5勝出。HTML5、JavaScript和CSS都是Web常用語言;然而，Android和ios都是新出的技術所以人才是沒有十幾年技術積累的web人才多。