[Android] 使用WebView時與JavaScript互相溝通的方式

在有些專案中，我們會為了方便快速開發，會使用網頁的方式來當作APP的部分，但在正常情況下，APP與網頁是不能直接傳值或呼叫function的。

那要如何與網頁進行溝通呢? 主要就是使用JavaScript來達成，在APP中與JavaScript中，可以互相定義function並呼叫，即可以達成互相溝通的目的，例如使用網頁彈出Android的原生對話框，或是將Android中原生按鈕等動作傳至網頁中控制(例如遊戲)。

在溝通的部分分為兩項：

• APP 呼叫 JavaScript：在APP端，呼叫JavaScript的function
• JavaScript 呼叫 APP：在網頁端(JavaScript)，呼叫APP的function

---

首先是控制網頁(APP 呼叫 JavaScript)：

*這邊以貪吃蛇遊戲為例*

1.先在JavaScript中建立要讓APP Call的function

//控制蛇向右轉，蛇會往右邊轉向90度
function changeRight() {
  if(direction == 'right'){
    directionQueue = 'down';
  }else if(direction == 'down'){
    directionQueue = 'left';
  }else if(direction == 'left'){
    directionQueue = 'up';
  }else{
    directionQueue = 'right';
  }
}

 

2.在APP中，載入此網頁

testvw.webViewClient = WebViewClient()
//開啟JS支援
testvw.settings.javaScriptEnabled = true
//載入網頁(本機端或遠端)
testvw.loadUrl("file:///android_asset/index2.html")

 

3.使用evaluateJavascript與JavaScript溝通，這邊是放在Button事件內

btn_up.setOnClickListener {
  //這邊是呼叫JS中的changeRight()這支function，可以直接從括號帶變數進去，例如："javascript:changeRight($deg)"
  testvw.evaluateJavascript("javascript:changeRight()", ValueCallback<String?> { value ->
    JS function return的結果(沒有就是null)
    Log.d("js", value)
  })
}

使用evaluateJavascript呼叫可以取得一個回傳值，方便後續處理。

到這邊就已經完成控制網頁的部分了。

 

再來是網頁控制APP(JavaScript呼叫Java或Kotlin)：

-待續-