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

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

先來看一下項目的整體架構（Android studio中的項目）

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

下面上代碼：(js_webView.html)

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

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

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

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

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

這是為什么呢？這里要涉及到的是有關于 webview 和 js 的安全性的問題。js 可以通過這種方式下載惡意代碼在 android 上執(zhí)行，具體有興趣的可以去 Google 一下，所以上面這種寫法只是對于 Api16以前的android手機是適用的，16以后，谷歌對這個安全性問題進行了修復。將其注解到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 了。

最新評論