kotlin學習筆記——kotlin與Js通訊
阿新 • • 發佈：2019-02-17
和原來一樣，通過物件互相傳值。 webview傳遞物件給js呼叫，webview則通過
mWebview.loadUrl("javaScript:方法名（引數）")來呼叫js中的方法，需要注意的是呼叫js方法必須在主執行緒。
1.懶載入：使用時才初始化, 型別宣告為val
private val mWebview:WebView by lazy {
webview
}2. 當js需要java中的資料時，js調java方法，java再呼叫js中的方法將資料做為引數傳給js。
回撥js方法名，可以不寫死，由js將方法名傳過來。（解耦）
4.貼上相關程式碼
(1) kotlinHtml.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> button{ width : 100%; height:50px; margin-top:20px } </style> </head> <body> <button id="btn1">js呼叫kotlin方法</button> <button id="btn2">kotlin呼叫js方法</button> <script src="jquery-1.11.3.js"></script> <script> $("#btn1").on("click",function(){ console.log("點選了"); //呼叫kotlin方法 var json = {"name":"html5"} window.jsInterface.showToast(JSON.stringify(json)) }); //H5 callback呼叫kotlin方法 $("#btn2").on("click",function(){ //callback:1.呼叫kotlin方法 var json = {"callback":"receiveHotelData"} window.jsInterface.getHotelData(Jsp); }); var showMessage = function(json){ alert(JSON.stringify(json)) } var receiveHotelData = function(json){ alert(JSON.stringify(json)) } </script> </body> </html>
需要引用jquery:
<script src="jquery-1.11.3.js"></script>(2)JavaScriptMethods
import android.content.Context import android.webkit.JavascriptInterface import android.webkit.WebView import org.jetbrains.anko.doAsync import org.jetbrains.anko.runOnUiThread import org.jetbrains.anko.toast import org.json.JSONObject import java.net.URL /** * H5與kotlin通訊的橋樑類 * Created by Administrator on 2018/3/10. */ class JavaScriptMethods { private var mContext: Context? = null private var mWebView:WebView? = null constructor(mContext: Context?, mWebView: WebView?) { this.mContext = mContext this.mWebView = mWebView } @JavascriptInterface fun showToast(json: String) { // Toast.makeText(mContext,json,Toast.LENGTH_SHORT).show() // mContext?.toast(json) mContext?.let { it.toast(json) } } @JavascriptInterface fun getHotelData(json: String){ val jsonObject = JSONObject(json) val callback = jsonObject.optJSONObject("callback") doAsync { var url = URL("http://www.jingbanyun.com") // 變成字串 val result = url.readText() var json = JSONObject() json.put("name",result) //呼叫js方法必須在主執行緒 mContext?.let { it.runOnUiThread { mWebView?.let { it.loadUrl("javaScript:"+callback+"("+json+")") } } } } } }
(3)MainActivity
class MainActivity : AppCompatActivity() { //懶載入，使用時才初始化, 型別宣告為val private val mWebview:WebView by lazy { webview } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setWebView() } //lambda表示式｛引數->返回值｝ // var add = {a:Int,b:Int ->a+b} var setWebView = { //1.開啟Kotlin與H5通訊開關 mWebview.settings.javaScriptEnabled = true //2.設定2個WebViewClient mWebview.webViewClient = MyWebViewClient() mWebview.webChromeClient = MyWebChromClient() //kotlin與H5通訊方式1：H5呼叫Kotlin方法 //設定kotlin與H5的通訊橋樑類 mWebview.addJavascriptInterface(JavaScriptMethods(this,mWebview),"jsInterface") //kotlin與H5通訊方式1：H5呼叫Kotlin方法 //載入網頁 mWebview.loadUrl("file:///android_asset/kotlinHtml.html") } inner private class MyWebViewClient: WebViewClient(){ override fun onPageFinished(view: WebView?, url: String?) { //頁面載入完成 super.onPageFinished(view, url) //kotlin與H5通訊方式2：Kotlin呼叫H5方法 // mWebview.loadUrl("javaScript:方法名（引數）") var json = JSONObject() json.put("name","Kotlin") mWebview.loadUrl("javaScript:showMessage("+json+")") } } private class MyWebChromClient : WebChromeClient(){ //載入進度條 override fun onProgressChanged(view: WebView?, newProgress: Int) { super.onProgressChanged(view, newProgress) } } }