Kotlin Android(安卓)WebView与H5的相互调用

在现在的客户端开发过程中，越来越多的需要和前端H5页面进行交互。

首先先配置WebView

1.开启Kotlin与H5通信的开关

mWebView.settings.javaScriptEnabled = true

2.设置两个WebViewClient

mWebView.webViewClient = MyViewClient()mWebView.webChromeClient = MyWebChormeClient()private class MyViewClient : WebViewClient() {        //页面加载完调用        override fun onPageFinished(view: WebView?, url: String?) {            super.onPageFinished(view, url)                   }    }private class MyWebChormeClient : WebChromeClient() {        //加载进度条        override fun onProgressChanged(view: WebView?, newProgress: Int) {            super.onProgressChanged(view, newProgress)        }    }

3.加载网页

 mWebView.loadUrl("https://www.google.com/")

这样基本的WebView就配置好了

接下来看H5如何调用Kotlin代码

// mWebView.addJavascriptInterface(对象，字符串) 对象：方法名   字符串：就是参数对象的别名   mWebView.addJavascriptInterface(JavaScriptMethods(this, mWebView), "jsInterface")

这里的jsInterface是为了js调用kotlin，因为两个语言不认识，需要起一个名字。然后以起好的名字为类名创建一个Kotlin类封装给H5调用的方法。

看一个小例子

kotlin方法

@JavascriptInterface //android4.2以后 必须加上此注解    fun showToast(json: String) {        Toast.makeText(mContext, json, Toast.LENGTH_SHORT).show()    }

js调用

var json = {"name":"html5"}window.jsInterface.showToast(JSON.stringify(json))

接下来看Kotlin如何调用H5代码

一般可以在网页加载完成，也就是WebViewClient的onPageFinished回调方法里

同样还是一个小例子

js代码

var showMessage = function(json) {    alert(JSON.stringify(json))};

Kotlin代码

//mWebView.loadUrl("javascript:方法名（参数）")  var json = JSONObject()  json.put("name", "Kotlin")  mWebView.loadUrl("javascript:showMessage(" + json.toString() + ")")

这样就完成了Kotlin和H5的互相调用，不过这样会有一个问题，方法名已经写死了，Kotlin和H5的耦合会很深，万一不小心改了方法名，那么便会造成错误。

所以便有了CallBack机制，这也是支付宝、淘宝等App大量采用的交互机制，解耦客户端和前端。

callback机制其实是通过传参数的方式而不是直接调用方法名，看一下小例子。

js代码

function(){  var json = {"callback": "receiveData"}  window.jsInterface.getData(JSON.stringify(json));}var receiveData = function(json) {  alert(JSON.stringify(json));}

kotlin代码

@JavascriptInterfacefun getData(json: String) {    var jsJson = JSONObject(json)    var callback = jsJson.optString("callback")    var result = "服务器返回的数据"    //调用js方法必须在主线程    mWebView?.loadUrl("javascript:" + callback + "(" + result + ")") }

这样便会形成一个闭环，H5调用Kotlin请求完数据后，在把结果返回给H5.

更多相关文章

随机推荐