第十章 kotlin与H5混合开发

文章目录

前言

kotlin与H5混合开发。

一、Kotlin与H5通信方式一（H5主动）

1.H5调用Kotlin方法

H5调用Kotlin方法

@JavascriptInterface //安卓4.2以后，不加上@JavascriptInterface,H5不能调用kotlin方法    fun showToast(json:String){
           //Toast.makeText(mContext,json,Toast.LENGTH_SHORT).show() //Toast方法1        mContext?.let {
    it.toast(json) } //Toast方法2    }

二、Kotlin与H5通信方式二（Kotlin主动）

1.Kotlin调用H5方法

Kotlin调用H5方法

private inner class MyWebViewClient : WebViewClient() {
           //页面加载完成调用        override fun onPageFinished(view: WebView?, url: String?) {
               super.onPageFinished(view, url)            var json = JSONObject()            json.put("name","Kotlin")            mWebView.loadUrl("javascript:showMessage($json)") //Kotlin与H5通信方式二（Kotlin主动）        }    }

三、Kotlin与H5通信方式三（callback）

H5 callback调用kotlin方法:H5通知Kotlin获取数据，然后Kotlin回传数据给H5

1.示例1

代码：

@JavascriptInterface    fun getStudentData(){
   //        println("获取学生数据")        //异步操作，子线程请求服务器        doAsync {
               var url = URL("http://192.168.0.103:8080/Test1/student.json")            //变成字符串            val result = url.readText()            println("获取学生数据="+result)            //callback步骤2：回传数据给H5            //调用js方法必须在主线程            mContext?.let {
                   it.runOnUiThread {
                       mWebView?.let {
   //                      it.loadUrl("javascript:receiveStudentData("+result+")")                        it.loadUrl("javascript:receiveStudentData($result)")                    }                }            }        }    }

2.示例2

代码：

/**     * Kotlin与H5通信方式三（callback）     */    @JavascriptInterface    fun getStudentData2(json:String){
           var jsJson = JSONObject(json)        var callback = jsJson.optString("callback")        //异步操作，子线程请求服务器        doAsync {
               var url = URL("http://192.168.0.103:8080/Test1/student.json")            //变成字符串            val result = url.readText()            println("获取学生数据="+result)            //callback步骤2：回传数据给H5            //调用js方法必须在主线程//            mContext?.let {
   //                it.runOnUiThread {
   //                    mWebView?.let {
   //                        it.loadUrl("javascript:$callback($result)")//                    }//                }//            }            callbackJavaScript(callback, result)        }    }    /**     * 统一管理所有kotlin回调js方法     */    private fun callbackJavaScript(callback: String?, result: String) {
           mContext?.let {
               it.runOnUiThread {
                   mWebView?.let {
                       it.loadUrl("javascript:$callback($result)")                }            }        }    }

四、Kotlin与H5通信-完整代码

1.Kotlin与H5通信-完整代码

Kotlin与H5通信-完整代码

\webapps\Test1\indexForJSAndKotlin.html

	
   	test For JS And Kotlin	
	
   
     H5网页区域：

\webapps\Test1\student.json

{
       "status":"success",	"gender":"男",	"name":"张三",	"age":"20",	"height":"180厘米",	"city":"北京市",	"weight":"60公斤",	"phone":"10086",	"class":"2班",	"Interest":"篮球"}

\app\src\main\java\com\example\testkotlin1\WebTestActivity.kt

import android.os.Bundleimport android.webkit.WebChromeClientimport android.webkit.WebViewimport android.webkit.WebViewClientimport androidx.appcompat.app.AppCompatActivityimport kotlinx.android.synthetic.main.activity_web_test.*import org.jetbrains.anko.sdk27.coroutines.onClickimport org.json.JSONObject/** * Kotlin与H5混合开发练习-知识点： * * Kotlin与H5通信的三种方式 * H5 callback调用Kotlin * 本地模板动态刷新页面 * 自定义Kotlin与H5通信接口协议 */class WebTestActivity : AppCompatActivity() {
       //懒加载：使用了才初始化    private val mWebView: WebView by lazy {
           webview    }    override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)        setContentView(R.layout.activity_web_test)        tv_title.setText("测试") //直接写View的id（tv_title）即可        //button.onClick { }        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 = MyWebChromeClient()        //Kotlin与H5通信方式1：H5调用Kotlin方法        //设置Kotlin与H5通信桥梁类        //mWebView.addJavascriptInterface(对象，字符串):对象.方法名，   字符串：就是参数1对象的别名        mWebView.addJavascriptInterface(JavaScriptMethods(this,mWebView),"jsInterface")        //3.加载网页：在线模板，便于调试//        mWebView.loadUrl("http://192.168.0.103:8080/Test1/indexForJSAndKotlin.html")        //本地模板：网页保存到assets目录，提高加载速率        mWebView.loadUrl("file:///android_asset/kotlin/indexForJSAndKotlin.html")    }    private inner 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.toString()+")")//方法1            mWebView.loadUrl("javascript:showMessage($json)")//方法2 //Kotlin与H5通信方式二（Kotlin主动）        }    }    private class MyWebChromeClient : WebChromeClient() {
           //加载进度条    }}

\app\src\main\java\com\example\testkotlin1\JavaScriptMethods.kt

import android.content.Contextimport android.content.Intentimport android.net.Uriimport android.webkit.JavascriptInterfaceimport android.webkit.WebViewimport org.jetbrains.anko.alertimport org.jetbrains.anko.doAsyncimport org.jetbrains.anko.runOnUiThreadimport org.jetbrains.anko.toastimport org.json.JSONObjectimport java.net.URL/** * Kotlin与H5通信桥梁类 */class JavaScriptMethods {
       private var mContext: Context? = null    private var mWebView: WebView? = null    constructor(context: Context?){
           this.mContext = context    }    constructor(context: Context?,webView: WebView){
           this.mContext = context        this.mWebView = webView    }    @JavascriptInterface //安卓4.2以后，不加上@JavascriptInterface,H5不能调用kotlin方法    fun showToast(json:String){
           //Toast.makeText(mContext,json,Toast.LENGTH_SHORT).show() //方法1//        mContext?.toast(json)        mContext?.let {
    it.toast(json) }  //方法2    }    /**     * Kotlin与H5通信方式三（callback）     */    @JavascriptInterface    fun getStudentData(){
   //        println("获取学生数据")        //异步操作，子线程请求服务器        doAsync {
               var url = URL("http://192.168.0.103:8080/Test1/student.json")            //变成字符串            val result = url.readText()            println("获取学生数据="+result)            //callback步骤2：回传数据给H5            //调用js方法必须在主线程            mContext?.let {
                   it.runOnUiThread {
                       mWebView?.let {
   //                      it.loadUrl("javascript:receiveStudentData("+result+")")                        it.loadUrl("javascript:receiveStudentData($result)")                    }                }            }        }    }    /**     * Kotlin与H5通信方式三（callback）     */    @JavascriptInterface    fun getStudentData2(json:String){
           var jsJson = JSONObject(json)        var callback = jsJson.optString("callback")        //异步操作，子线程请求服务器        doAsync {
               var url = URL("http://192.168.0.103:8080/Test1/student.json")            //变成字符串            val result = url.readText()            println("获取学生数据="+result)            //callback步骤2：回传数据给H5            //调用js方法必须在主线程//            mContext?.let {
   //                it.runOnUiThread {
   //                    mWebView?.let {
   //                        it.loadUrl("javascript:$callback($result)")//                    }//                }//            }            callbackJavaScript(callback, result)        }    }    /**     * 统一管理所有kotlin回调js方法     */    private fun callbackJavaScript(callback: String?, result: String) {
           mContext?.let {
               it.runOnUiThread {
                   mWebView?.let {
                       it.loadUrl("javascript:$callback($result)")                }            }        }    }    //底部弹出拨号对话框    @JavascriptInterface    fun showPhoneDialog(phone:String){
           println("js传递="+phone)        //设置号码到对话框        mContext?.let {
               it.alert("你要拨打电话${phone}吗？", "拨打电话") {
                   positiveButton("ok" ) {
                       mContext?.let {
    callPhone(phone) }                }                negativeButton("cancel") {
                   }            }.show()        }    }    /**     * lambda表达式：调用系统拨号功能     */    var callPhone = {
           //phone:String -> Unit        phone:String ->        var intent = Intent()        intent.action = "android.intent.action.VIEW"        intent.action = "android.intent.action.DIAL"        intent.addCategory("android.intent.category.DEFAULT")        intent.addCategory("android.intent.category.BROWSABLE")        intent.setData(Uri.parse("tel:"+phone))        mContext?.let {
    it.startActivity(intent) }    }}

\app\src\main\res\layout\activity_web_test.xml

\app\src\main\AndroidManifest.xml

本地模板 - 网页保存到assets目录，提高加载速率：

APP截屏：

总结

以上就是今天要讲的内容，本文仅仅简单介绍了kotlin与H5混合开发知识。

转载地址：http://xxlkk.baihongyu.com/

你可能感兴趣的文章