[준비] Kotlin으로 Vue.js 와 통신하기

2021.12.29 - [side project] - [준비]하이브리드앱 환경 설정

[준비]하이브리드앱 환경 설정

하이브리드앱 개발을 위한 vue.js와 안드로이드 통신하기 with Kotlin

MainActivity.kt

class MainActivity : AppCompatActivity() { 
	override fun onCreate(savedInstanceState: Bundle?) { 
    	super.onCreate(savedInstanceState) 
        setContentView(R.layout.activity_main) 
        val webview = findViewById<WebView>(R.id.webview) 
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){ 
        	WebView.setWebContentsDebuggingEnabled(true) 
        } 
        webview.setWebChromeClient(object : WebChromeClient() { 
        	override fun onJsAlert(view: WebView?, url: String?, message: String?, result: JsResult): Boolean { 
            	Toast.makeText(applicationContext, message , Toast.LENGTH_LONG).show() 
                result.cancel() return true 
            } 
        }) 
        val settings = webview.settings 
        settings.javaScriptEnabled = true 
        settings.domStorageEnabled = true 
        webview.addJavascriptInterface(WebViewBridge(this), "WebViewBridge") 
        webview.loadUrl("http://192.168.35.89:8080/") 
     } 
 }

▶ webView.setWebChromeClient  함수의 내부는 vue.js (그냥 js도 가능)에서 alert 함수를 사용하여 알림을 날리면 안드로이드에서 alert함수의 메세지를 가져와 Toast로 나타낸다.

WebViewBridge.kt

class WebViewBridge (private val mContext: Context){ 
	@JavascriptInterface fun callbackUserData(message : String) : String{ 
    	Log.i("vue js message", message) 
        return message 
    } 
}