Android webview和js交互

剛登進來的時候看到博客園的首頁好像改了，比之前好看很多了，也希望博客園可以越做越好！加油啊！

最近又對webview進行了一遍掃盲，對於webview和js交互這塊理解比之前更深了一點，在這里記錄下，以后忘了可以直接翻自己的博客來做。吐槽一下，csdn現狀，吵來吵去，標注20年發布的文章，抄的卻是人家11年發布的。有時候百度一搜，十幾條csdn，一摸一樣的內容，有些人抄博客連稱呼都不改的。

牢騷發完了，講講js交互。

首先要想要交互，就必須允許webview加載js，比較小白的事，但還是要提醒。

webSettings.setJavaScriptEnabled(true);

android和js交互主要是在webview上實現的。怎么使用webview也不多說了，比較基礎的東西。貼一下官方的地址。

https://developer.android.google.cn/guide/webapps/webview

這里講了js怎么調用android的方法。寫的也很詳細，代碼也簡單，我就做一個搬運工吧。

    public class WebAppInterface {
        Context mContext;

        /** Instantiate the interface and set the context */
        WebAppInterface(Context c) {
            mContext = c;
        }

        /** Show a toast from the web page */
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }
    

創建一個這樣的類，注意，@JavascriptInterface這個，表示js可以調用這個方法。不加的js調用方法的時候會報一個方法不存在的錯。

    WebView webView = (WebView) findViewById(R.id.webview);
    webView.addJavascriptInterface(new WebAppInterface(this), "Android");
   

這塊我把它理解成channel，創建了一個js和webview的通道，然后通道里是js可以調用的方法，“android”這個是通道的標示，要跟js上對應起來。

    <input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

    <script type="text/javascript">
        function showAndroidToast(toast) {
            Android.showToast(toast);
        }
    </script>
    

直接上對應的js方法，可以看到。Android.showToast即調用webview的showToast方法。（注：這里的Android和前面“Android”是對應的，自己寫個demo跑一跑就明白了。）

不過當然還可以在android端去攔截要加載的url來實現方法，這塊我給的鏈接里有，就在下面。我個人不太喜歡這種方法，不太純粹。這里就不介紹了。

android調用js的方法

上面這些官網都有，我的文筆也不太行，沒看明白的可以直接去翻官網。而且百度也能出來一堆。但是接下來講的，我還沒在官網里找到詳細介紹的（官網肯定都有，不過介紹的詳細與否就不清楚了）

然后自己稍微總結了下。

用的是webview的evaluateJavascript方法。文字描述不如代碼來的直接。

String js = String.format("jsFunction(%s",string);
webView.evaluateJavascript(js,new ValueCallback<String>() {
  @Override
  public void onReceiveValue(String value) {
    Log.i("TAG",value+"!!!");
  }
});

這個就是直接調用js的方法（ jsFunction(string) ），這個方法存在js這邊，有沒有參數，有幾個參數都隨js這邊來定。放參數主要是為了把android這邊的數據回調給js。

 

這樣一套組合拳，就可以完成js和android端的交互。當需要調用原生這邊的方法的時候，使用第一種方法，並且傳參數過去。然后把數據處理完使用第二種方法，再還給js。

還有就是，webview需要處於一個handle之下！！！不然調用方法會報錯，要使用的時候把用getMainlooper拿過來。

東西比較簡單，mark一下記錄自己的成長。