kotlin开发 webview如何在收到JS调用后,native返回数据给到JS

简介: 这段内容描述了在Hybrid App开发中,使用Kotlin的Compose构建的Web视图(WebView)如何通过JsBridge实现JavaScript与原生代码的交互

 

JS与native进行交互的例子


JS调用native的函数

注册JavascriptInterface




@SuppressLint("SetJavaScriptEnabled")
@Composable
fun ComposableWebView(
    url: String,
    modifier: Modifier = Modifier,
    onWebViewReady: (WebView) -> Unit = {}
) {
    val context = LocalContext.current



    Box(modifier) {


        val webView = remember { WebView(context) }
        webView.settings.javaScriptEnabled = true
        webView.settings.setCacheMode(LOAD_DEFAULT)

        val deviceId = getAndroidId(context) ?: ""
        val checkSum = getTodayCheckSum(deviceId)
        setCookie(
            context, url, mutableMapOf(
                "deviceId4Zhibo" to deviceId,
                "checkSum4Zhibo" to checkSum
            )
        )

        Log.i("xudong debug", "开始注入接口 Android")

        // 添加 JavaScript 接口
        webView.addJavascriptInterface(
            WebAppInterface(context, webView),
            "Android"
        )
        Log.i("xudong debug", "完成注入接口 Android")

        webView.webViewClient = object : WebViewClient() {
            override fun onPageFinished(view: WebView?, url: String?) {
                super.onPageFinished(view, url)

                // WebView 加载完成后的回调
                onWebViewReady(webView)
            }
        }

        // 加载URL
        Log.i("xudong debug", "加载url: $url")
        webView.loadUrl(url)
        // 将 WebView 嵌入到 Compose 中
        AndroidView({ webView })
    }
}




具体接口的执行逻辑



// JavaScript 接口类
class WebAppInterface(private val context: Context, private val webView: WebView) {

    init {
        //注册订阅者
        //避免重复注册,重复注册会导致崩溃
        if (!EventBus.getDefault().isRegistered(this)) { //这里的取反别忘记了
            EventBus.getDefault().register(this)
        } else {
            Log.i("xudong debug", "请勿重复注册事件, from Composable WebView")
        }
    }


    @Subscribe(threadMode = ThreadMode.MAIN)
    fun onMessageEvent(event: MessageEvent) {
        // 处理事件
        Log.i("xudong debug", "监听者 webview interface, received message: ${event}")
    }

    @JavascriptInterface
    fun playAudio(message: String) {
        Toast.makeText(context, "playAudio: $message", Toast.LENGTH_SHORT).show()
        EventBus.getDefault().post(MessageEvent("playAudio", message))


        // 使用Handler的示例
        val handler = Handler(Looper.getMainLooper()) // 获取主线程的Handler
        handler.post {

            // 执行 JS 函数 alert
            webView.evaluateJavascript("javascript:window.location.href") { result ->
                // 这里处理 JavaScript 返回值
                if (result != null) {
                    Log.i("xudong debug", "执行 js return: $result")
                } else {
                    Log.i("xudong debug", "执行JS 没有返回值")
                }
            }
        }

    }

    @JavascriptInterface
    fun stopAudio() {
        Toast.makeText(context, "stopAudio", Toast.LENGTH_SHORT).show()
        EventBus.getDefault().post(MessageEvent("stopAudio"))

    }
}




重点注意:

上述代码,反向调用JS函数 window.location.href 时, 如果不使用Handler强行在主线程执行, 会遇到报错。 (在 JavaScriptInterface中的代码,是lopper线程中运行的)

这里需要特别注意。




遇到报错如何解决?

以下是不使用Handler调用webView.evaluateJavascript时遇到的报错,这里仅记录一下, 方便回顾


java.lang.Throwable: A WebView method was called on thread 'JavaBridge'. All WebView methods must be called on the same thread.


询问文心一言


在Android开发中,如果你需要在非主线程(例如后台线程)上执行某些操作,并且随后需要在主线程上调用WebViewevaluateJavascript方法,你可以使用Handler或者runOnUiThread。以下是使用runOnUiThread在Kotlin中从其他线程调用WebViewevaluateJavascript方法的示例:

// 假设这是你的WebView实例  
private lateinit var webView: WebView  
  
// 在某个后台线程或异步任务中  
// ...  
  
// 需要从后台线程调用evaluateJavascript时  
runOnUiThread {  
    webView.evaluateJavascript("document.title;", { result ->  
        // 处理JavaScript返回值,这里也在主线程上  
        Log.d("MainActivity", "Page title: $result")  
    })  
}  
  
// ...  
  
// runOnUiThread是Activity的一个方法,用于在主线程上运行Runnable  
// 如果你的代码不在Activity中,你可以使用Handler来实现相同的效果  
  
// 使用Handler的示例  
val handler = Handler(Looper.getMainLooper()) // 获取主线程的Handler  
handler.post {  
    webView.evaluateJavascript("document.title;", { result ->  
        // 处理JavaScript返回值,这里也在主线程上  
        Log.d("MainActivity", "Page title: $result")  
    })  
}



请注意,runOnUiThreadActivity类的一个方法,因此你只能在Activity的上下文中调用它。如果你需要在FragmentService或其他没有runOnUiThread方法的上下文中执行此操作,你应该使用Handler

此外,请确保在调用evaluateJavascript之前WebView已经被初始化并且是可用的。如果WebView在调用evaluateJavascript时还没有被附加到界面上或者还没有完成加载,可能会导致不可预测的行为。



相关文章
|
20天前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
37 0
|
8天前
|
机器学习/深度学习 数据采集 前端开发
网络爬虫开发:JavaScript与Python特性的小差异
我们以前写JavaScript的代码时,在遇到了发送请求时,都是需要去await的。 但是为什么Python代码不需要这样做呢? 这就是因为JavaScript是异步的,Python是同步的。 JavaScript就需要使用关键词await将异步代码块变为同步代码。
|
22天前
|
运维 JavaScript 前端开发
前端 JS 经典:vue 开发中的 base 和 publicPath
前端 JS 经典:vue 开发中的 base 和 publicPath
24 1
|
26天前
|
JavaScript 前端开发 程序员
探索Vue.js宝库:解锁基础知识与实用技能之门(1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发;1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期)
探索Vue.js宝库:解锁基础知识与实用技能之门(1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发;1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期)
24 1
|
21天前
|
开发框架 监控 JavaScript
企业级node.js开发框架 【egg.js】 实用教程
企业级node.js开发框架 【egg.js】 实用教程
17 0
|
22天前
|
Web App开发 JavaScript 前端开发
Android端使用WebView注入一段js代码实现js调用android
Android端使用WebView注入一段js代码实现js调用android
28 0
|
22天前
|
移动开发 JavaScript
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
34 0
|
9天前
|
安全 Android开发 Kotlin
Android经典面试题之Kotlin延迟初始化的by lazy和lateinit有什么区别?
**Kotlin中的`by lazy`和`lateinit`都是延迟初始化技术。`by lazy`用于只读属性,线程安全,首次访问时初始化;`lateinit`用于可变属性,需手动初始化,非线程安全。`by lazy`支持线程安全模式选择,而`lateinit`适用于构造函数后初始化。选择依赖于属性特性和使用场景。**
25 5
Android经典面试题之Kotlin延迟初始化的by lazy和lateinit有什么区别?
|
1天前
|
安全 Android开发 Kotlin
Android经典面试题之Kotlin中常见作用域函数
**Kotlin作用域函数概览**: `let`, `run`, `with`, `apply`, `also`. `let`安全调用并返回结果; `run`在上下文中执行代码并返回结果; `with`执行代码块,返回结果; `apply`配置对象后返回自身; `also`附加操作后返回自身
17 8
|
5天前
|
安全 Java Android开发
探索Android应用开发中的Kotlin语言
【7月更文挑战第19天】在移动应用开发的浩瀚宇宙中,Kotlin这颗新星以其简洁、安全与现代化的特性,正迅速在Android开发者之间获得青睐。从基本的语法结构到高级的编程技巧,本文将引导读者穿梭于Kotlin的世界,揭示其如何优化Android应用的开发流程并提升代码的可读性与维护性。我们将一起探究Kotlin的核心概念,包括它的数据类型、类和接口、可见性修饰符以及高阶函数等特性,并了解这些特性是如何在实际项目中得以应用的。无论你是刚入门的新手还是寻求进阶的开发者,这篇文章都将为你提供有价值的见解和实践指导。