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

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

先來看一下項目的整體架構(gòu)（Android studio中的項目）

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

下面上代碼：(js_webView.html)

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

網(wǎng)頁中有關(guān) javascript 的代碼也比較簡單，整個 js 就2個方法，一個是 jsCallAndroid() ，一個是 androidCallJs() 。看方法名就知道了，分別是 js 調(diào)用 Android 的和 Android 調(diào)用 js 的。

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

再來看看代碼部分（WebViewActivity的布局文件）： 

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

再來看看 Java 代碼部分（WebViewActivity）：

下面來看看代碼部分：

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

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

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

整個 demo 代碼到此完畢，好激動，趕緊運行試試看。

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

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

 有了注解，簡直如虎添翼，非常方便。還是原來的配方，還是原來的味道，原汁原味。除了　Activity　中的代碼需要修改，其他都不動。

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

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

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

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

對，沒錯，就是這樣子。大功告成。

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

最新評論