Android-webview和js互相調(diào)用

Android 和 H5 都是移動(dòng)開發(fā)應(yīng)用的非常廣泛。市面上很多App都是使用Android開發(fā)的，但使用Android來(lái)開發(fā)一些比較復(fù)雜附屬類，提示性的頁(yè)面是得不償失的。而H5具有開發(fā)速度快，更新不用依賴于App的更新，只需要服務(wù)端更新相應(yīng)的頁(yè)面即可，所以，App和H5頁(yè)面相結(jié)合就顯得尤為重要。而android和H5都不可能每次都是獨(dú)立存在的，而是相互影響也相互的調(diào)用，獲取信息等，例如，H5頁(yè)面要獲取App中的用戶的基本信息，或者App端要操作H5頁(yè)面等，下面來(lái)看看這兩是怎么交互的。

先來(lái)看一下項(xiàng)目的整體架構(gòu)（Android studio中的項(xiàng)目）

整個(gè)項(xiàng)目的結(jié)構(gòu)就是這樣的，里面最主要的就是assets下面的js_webView.html文件和代碼中的WebViewJsActivity，其中項(xiàng)目里面的MainActivity只是做了個(gè)跳轉(zhuǎn)而已，跳轉(zhuǎn)到WebViewJsActivity。就這樣。

下面上代碼：(js_webView.html)

html里面的代碼也比較簡(jiǎn)單，整個(gè)html中就一個(gè)Button，點(diǎn)擊這個(gè)Button的時(shí)候去執(zhí)行javascript中的 jsCallAndroid() 方法。

網(wǎng)頁(yè)中有關(guān) javascript 的代碼也比較簡(jiǎn)單，整個(gè) js 就2個(gè)方法，一個(gè)是 jsCallAndroid() ，一個(gè)是 androidCallJs() ?？捶椒椭懒?，分別是 js 調(diào)用 Android 的和 Android 調(diào)用 js 的。

先不要去管 jsCallAndroid() 里面做的是什么，待會(huì)會(huì)解釋，來(lái)看看 androidCallJs() 這個(gè)方法里面做的就是彈出一個(gè)信息提示框，具體提示什么信息都不重要了，隨便。

再來(lái)看看代碼部分（WebViewActivity的布局文件）： 

整個(gè)布局文件也很簡(jiǎn)單，一個(gè)按鈕和一個(gè)WebView，按鈕是用來(lái)測(cè)試 Android 調(diào)用 js 用的，js 調(diào)用 Android 就當(dāng)然是 webview 加載的網(wǎng)頁(yè)里面的按鈕了。

再來(lái)看看 Java 代碼部分（WebViewActivity）：

下面來(lái)看看代碼部分：

37-42行：這幾行就是android中的按鈕的點(diǎn)擊事件，沒(méi)什么好解釋的，來(lái)看看點(diǎn)擊事件做的是什么？點(diǎn)擊事件做的是：調(diào)用 webview 的 loadurl 方法去調(diào)用 js 中的方法；調(diào)用的方式是：前面是 javascript 中間用 ： 分隔 最后是 要調(diào)用的 js 的方法名。

45-55行：這幾行就是有關(guān)于 Webview 的設(shè)置等，46-51 這幾行是指支持彈窗，也就是支持 html 網(wǎng)頁(yè)彈框，因?yàn)榍懊娴?html 代碼中，有我們 Android 調(diào)用 js 的時(shí)候，調(diào)用成功就 js 彈窗，所以這里要加上這個(gè)設(shè)置。接下來(lái)是53行，53行指的是支持 javascript 這里指的是支持 html 中的 javascript 解析，不管是不是 js 和 Android 交互，只要網(wǎng)頁(yè)中含有 js ，都要。最關(guān)鍵的就是54行，54行就是 javascript 和 Android 交互的了，addJavascriptInterface 方法需要接受兩個(gè)參數(shù)，第一個(gè)是與之相對(duì)應(yīng)的 js 調(diào)用 Android 本地的類的對(duì)象，這個(gè)例子中的就是58-63行這個(gè)類的對(duì)象，第二個(gè)參數(shù)就是和前面網(wǎng)頁(yè)中的js代碼中的 jsCallAndroid 方法中的 wv.sayHello(),這里的 wv 就和這個(gè)參數(shù)(wv)與之相對(duì)應(yīng)，而 sayHello() 就是對(duì)應(yīng)的第一個(gè)參數(shù)的對(duì)象里面的方法。

最后是58-63行，這幾行沒(méi)什么好解釋的了，只是如果調(diào)用成功就打印一行日志。僅此檢驗(yàn)是否調(diào)用成功而已。

整個(gè) demo 代碼到此完畢，好激動(dòng)，趕緊運(yùn)行試試看。

運(yùn)行的結(jié)果會(huì)讓很多人失望，只是android調(diào)用js成功了，但 js 調(diào)用 android 不成功。 

這是為什么呢？這里要涉及到的是有關(guān)于 webview 和 js 的安全性的問(wèn)題。js 可以通過(guò)這種方式下載惡意代碼在 android 上執(zhí)行，具體有興趣的可以去 Google 一下，所以上面這種寫法只是對(duì)于 Api16以前的android手機(jī)是適用的，16以后，谷歌對(duì)這個(gè)安全性問(wèn)題進(jìn)行了修復(fù)。將其注解到android自帶的一個(gè)javascriptInterfface類中。下面就來(lái)看看16以后的寫法是咋樣的？

 有了注解，簡(jiǎn)直如虎添翼，非常方便。還是原來(lái)的配方，還是原來(lái)的味道，原汁原味。除了　Activity　中的代碼需要修改，其他都不動(dòng)。

改動(dòng)的代碼有55行，直接傳一個(gè) this(Context) 對(duì)象就可以了，那么，原來(lái)的 JsInterface 就可以不要了。不要那我 sayHello 方法寫到哪里呢？既然你傳遞的是 this ，當(dāng)然是寫到 this 里面咯（59-62行）。不同的是，這個(gè) sayHello()　方法必須加上一個(gè)　JavascriptInterface　的注解。

OK了，16以前和16以后的都有了，不就OK了么。在添加javascript的時(shí)候判斷一下 Api 版本就可以了，哈哈。。。

不不不，肯定不是這樣子做。指需要在onCreate() 方法上添加 @SuppressLint("JavascriptInterface") 注解即可。

看下面的就是終極代碼了。

對(duì)，沒(méi)錯(cuò)，就是這樣子。大功告成。

最后需要提一點(diǎn)的是，上面的例子是可以執(zhí)行，正常情況下都沒(méi)什么問(wèn)題，但你看看網(wǎng)上的demo，很多在 android 調(diào)用 js 的時(shí)候是開一個(gè)子線程去調(diào)用，沒(méi)錯(cuò)，實(shí)際開發(fā)中，是必須要這樣子做的。好處就不言而喻了。這一點(diǎn)看最后一張代碼圖，這里也有給出，直接調(diào)用webview的post，里面就是 Android 調(diào)用 js 了。