Kotlin与H5通信的实现方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了Kotlin与H5通信的实现方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、H5中主动的调用Kotlin中的程序

要知道kotlin和html是两种不同的程序，并且一个运行在手机的android端，一个运行在服务器的后端程序，让这两种不同运行环境的不同编程语言进行通信，需要用到addJavascriptInterface方法，来进行数据的访问和方法的调用
下面开始一些环境准备工作

1编写后端程序并且在服务器上运行

运行的端口是http://localhost:8080/bmi/，主要就是一个可以根据人的身高和体重计算出BMI值的小程序还有一个点击之后就可以调用kotlin程序的按钮
Kotlin与H5通信的实现方式其中jsp文件为

<%--
  Created by IntelliJ IDEA.
  User: 26678
  Date: 2021/4/5
  Time: 16:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>测量BMI值</title>
  </head>

  <script type="text/javascript">
    function search() {
      //1
      var xmlHttp=new XMLHttpRequest()
      //2
      xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
          var mess=xmlHttp.responseText;
        //要分开获取，先获得对象，才能给value赋值
          var obj=document.getElementById("dis")
          obj.value=mess


          document.getElementById("disbim").innerHTML=mess
          //alert(mess)
        }
      }
      //3
      var name=document.getElementById("name").value
      var weight=document.getElementById("w").value
      var height=document.getElementById("h").value
      var message="name="+name+"&w="+weight+"&h="+height
      xmlHttp.open("get","one?"+message,true)//这里面第二个数据是打开对应的服务器地址
      //4
      xmlHttp.send()
    }

    function showKotlin() {
      var jsonData={"name":"海航"}
      /*在当前窗口下使用通信桥梁来调用kotlin中的程序*/
      window.jsInterface.showToast(JSON.stringify(jsonData))
    }
  </script>

  <body>
  <table>
    <tr>
    <td>用户姓名</td>
    <td><input type="text" id="name"></td>
  </tr>
    <tr>
      <td>您的身高</td>
      <td><input type="text" id="h"></td>
    </tr>
    <tr>
      <td>您的体重</td>
      <td><input type="text" id="w"></td>
    </tr>
  </table>
  <br>
  <input type="button" value="获取BMI值" onclick="search()"><br>
  <input type="text" value="bim=" id="dis">
  <div id="disbim">请点击提交来显示您的bim值</div>

  <input type="button" value="下面开始实现H5和Kotlin进行通信的学习" >
  <input type="button" value="点击之后调用Kotlin程序" onclick="showKotlin()">

  </body>
</html>

2准备好AndroidStudio的界面布局中的WebView

 <WebView
        android:id="@+id/mWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

3编写工具类用来处理H5调用逻辑

package com.njupt.kotlinandh5.jsutil

import android.content.Context
import android.webkit.JavascriptInterface
import android.widget.Toast

//来处理 Kotlin与js通信的桥梁类
class JavaScriptMethods {
    private var mContext:Context?=null
    constructor(context:Context){
        this.mContext=context
    }
    //加入一个方法
    @JavascriptInterface
    fun showToast(json:String,){

        mContext?.let{
            Toast.makeText(mContext,json,Toast.LENGTH_SHORT).show()
        }
    }

}

4通过addJavascriptInterface来构建桥梁

package com.njupt.kotlinandh5

import android.annotation.SuppressLint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebView
import android.webkit.WebViewClient
import com.njupt.kotlinandh5.jsutil.JavaScriptMethods

class MainActivity : AppCompatActivity() {

    private val myWebView by lazy {
        findViewById<WebView>(R.id.mWebView)
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        getUrl()

    }


    private  fun getUrl(){
        //1开启kotlin与H5通信的开关
        myWebView.settings.javaScriptEnabled=true
        myWebView.webViewClient=MyWebViewClient()
        myWebView.webChromeClient=MyWebChromeClient()
        //2当H5与kotlin进行通信时需要使用到通信桥梁类,后面字符串参数表示前面这个参数的对象名
        myWebView.addJavascriptInterface(JavaScriptMethods(this),"jsInterface")
        myWebView.loadUrl("http://10.0.2.2:8080/bmi/")
    }
    private class MyWebViewClient:WebViewClient(){
        //界面加载完成之后会调用这个方法
        override fun onPageFinished(view: WebView?, url: String?) {
            super.onPageFinished(view, url)
        }

    }

    private class MyWebChromeClient:WebChromeClient(){
        //加载进度条
        override fun onProgressChanged(view: WebView?, newProgress: Int) {
            super.onProgressChanged(view, newProgress)
        }

    }
}

5结果展示

可以看到点击按钮之后，调用了JavaScriptMethods类中的showToast方法进行显示
Kotlin与H5通信的实现方式
需要注意的是当使用模拟器访问本地网页时，网址变成了10.0.2.2

2在Kotlin中调用H5的程序

1在H5中编写方法，来处理Kotlin的请求

<script>
/*模拟Kotlin来调用H5中的代码，*/
    var kotlinUseH5=function (json) {
      alert(JSON.stringify(json))
    }
  </script>

2在Kotlin中调用方法

inner private class MyWebViewClient:WebViewClient(){
        //界面加载完成之后会调用这个方法
        override fun onPageFinished(view: WebView?, url: String?) {
            super.onPageFinished(view, url)
            //第二种通信方式，在kotlin种去访问H5种的方法
            val json=JSONObject()
            json.put("name","这是Kotlin界面传来的数据")
            //调用的例子就是myWebView.loadUrl("javascript:方法名")
            myWebView.loadUrl("javascript:kotlinUseH5("+json.toString()+")")
        }

    }

3结果展示

Kotlin与H5通信的实现方式

3使用CallBack机制来实现H5中发起请求到Kotlin,然后Kotlin去将响应的结果返回给Kotlin.

Kotlin与H5通信的实现方式文章来源地址https://www.toymoban.com/news/detail-417009.html

1在H5中编写发起请求和响应请求的函数

<script>
     function callBackM() {
      //1到Kotlin去加载数据
      var json={"callback":"receiveUserData"}
      window.jsInterface.getUserData(JSON.stringify(json))
      //2将返回的数据加载在当前界面

    }
    //用来 获取到返回的数据
    var receiveUserData=function (json) {
      alert(JSON.stringify(json))
    }
    </script>
//按钮为
<input type="button" value="点击之后使用Callback来调用Kotlin程序" onclick="callBackM()">

2编写处理请求的函数

package com.njupt.kotlinandh5.jsutil

import android.content.Context
import android.webkit.JavascriptInterface
import android.webkit.WebView
import android.widget.Toast
import kotlinx.coroutines.async
import kotlinx.coroutines.coroutineScope
import org.json.JSONObject

//来处理 Kotlin与js通信的桥梁类
class JavaScriptMethods {
    private var mContext:Context?=null
    private var mWebView:WebView?=null
    constructor(context:Context,webView: WebView){
        this.mContext=context
        this.mWebView=webView
    }
    //加入一个方法
    @JavascriptInterface
    fun showToast(json:String,){

        mContext?.let{
            Toast.makeText(mContext,json,Toast.LENGTH_SHORT).show()
        }
    }
    @JavascriptInterface
    //使用callback机制实现调用，为了应对方法名的变化，所以使用key_Value的方式
    fun getUserData(json:String){
        var isJson=JSONObject(json)
        var callback=isJson.optString("callBack")
        //H5调用此方法去获取到数据
        var jsonData=JSONObject()
        jsonData.put("name","花木兰")
        jsonData.put("age","18")
        jsonData.put("address","中国古代")
        //println(jsonData.toString())
        //2将当前请求到的数据返回到H5
        mWebView?.let { it.loadUrl("javascript:"+callback+"("+jsonData.toString()+")")}
    }

}

3主程序中

package com.njupt.kotlinandh5

import android.annotation.SuppressLint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebView
import android.webkit.WebViewClient
import com.njupt.kotlinandh5.jsutil.JavaScriptMethods
import org.json.JSONObject

class MainActivity : AppCompatActivity() {

    private val myWebView by lazy {
        findViewById<WebView>(R.id.mWebView)
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        getUrl()

    }


    private  fun getUrl(){
        //1开启kotlin与H5通信的开关
        myWebView.settings.javaScriptEnabled=true
        myWebView.webViewClient=MyWebViewClient()
        myWebView.webChromeClient=MyWebChromeClient()
        //2当H5与kotlin进行通信时需要使用到通信桥梁类,后面字符串参数表示前面这个参数的对象名
        //第一种通信方式，在H5中调用Kotlin的代码
        myWebView.addJavascriptInterface(JavaScriptMethods(this,myWebView),"jsInterface")
        myWebView.loadUrl("http://10.0.2.2:8080/bmi/")
    }

    private inner class MyWebViewClient:WebViewClient(){
        //界面加载完成之后会调用这个方法
        override fun onPageFinished(view: WebView?, url: String?) {
            super.onPageFinished(view, url)
            //第二种通信方式，在kotlin种去访问H5种的方法
            var json=JSONObject()
            json.put("name","这是Kotlin界面传来的数据")
            //调用的例子就是myWebView.loadUrl("javascript:方法名")
            myWebView.loadUrl("javascript:kotlinUseH5(" + json.toString() + ")")

        }

    }

    private class MyWebChromeClient:WebChromeClient(){
        //加载进度条
        override fun onProgressChanged(view: WebView?, newProgress: Int) {
            super.onProgressChanged(view, newProgress)
        }

    }
}

到了这里，关于Kotlin与H5通信的实现方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Kotlin与H5通信的实现方式

1、H5中主动的调用Kotlin中的程序

1编写后端程序并且在服务器上运行

2准备好AndroidStudio的界面布局中的WebView

3编写工具类用来处理H5调用逻辑

4通过addJavascriptInterface来构建桥梁

5结果展示

2在Kotlin中调用H5的程序

1在H5中编写方法，来处理Kotlin的请求

2在Kotlin中调用方法

3结果展示

3使用CallBack机制来实现H5中发起请求到Kotlin,然后Kotlin去将响应的结果返回给Kotlin.

1在H5中编写发起请求和响应请求的函数

2编写处理请求的函数

3主程序中

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

Kotlin与H5通信的实现方式

1、H5中主动的调用Kotlin中的程序

1编写后端程序并且在服务器上运行

2准备好AndroidStudio的界面布局中的WebView

3编写工具类用来处理H5调用逻辑

4通过addJavascriptInterface来构建桥梁

5结果展示

2在Kotlin中调用H5的程序

1在H5中编写方法，来处理Kotlin的请求

2在Kotlin中调用方法

3结果展示

3使用CallBack机制来实现H5中发起请求到Kotlin,然后Kotlin去 将响应的结果返回给Kotlin.

1在H5中编写发起请求和响应请求的函数

2编写处理请求的函数

3主程序中

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

3使用CallBack机制来实现H5中发起请求到Kotlin,然后Kotlin去将响应的结果返回给Kotlin.