WebView联调笔记

概述

大家对于使用WebView加载网页并与Web端进行交互这个功能应该都不陌生。在实际开发中，经常会遇到一些疑惑，比如如何确认JS接口是否调用成功，如何处理JS调用异常等问题。最近在开发过程中也遇到了一些情况，因此我做了一些记录。如果有更好的解决方案，欢迎留言分享。

---

js与android之间的互调

1. 启动js

   webView.settings.javaScriptEnabled = true //支持js

2. android 调用js :

//无回调 调用js中的javaCallJsWithArgs方法并传入一个参数
mWebView.loadUrl("javascript:javaCallJsWithArgs('我是从java过来的参数')");
//有回调调用js中的onAppEvent方法并传入2个参数 （集合也能作为入参,对应web端的Array）
//注：监听的是onAppEvent方法的返回值
mWebView.evaluateJavascript("javascript:onAppEvent(1, $data)") {
    Log.d(TAG, it) 
} 

//提供一个javaCallJsWithArgs方法
window.javaCallJsWithArgs = (param: any) => {
       
}
//提供一个window全局的方法提供给java端使用
window.onAppEvent = (param: any ,param2: any) => {
   return ""
}

3. js调用android

//注册JSBridge对象到js,别名为test
binding.mWebView.addJavascriptInterface(JSBridge(), "test")

inner class JSBridge {
    @JavascriptInterface
    fun init() {
    }
}

//上面android端已经将对应的方法注册到web全局方法中
//web端只需要从中获取对应的类与方法即可
//该test对象就是初始化时注入的对象
window.test.init() 

打印web端的日志

webView.settings.javaScriptEnabled = true  //支持js
webView.webChromeClient = object: WebChromeClient() {
       override fun onProgressChanged(view: WebView?, newProgress: Int) {
          //显示进度条
       }
       override fun onJsAlert(
           view: WebView, url: String, message: String,
           result: JsResult
       ): Boolean {
           // 拦截JS对话框alert()、confirm()、prompt()
           // https://www.likecs.com/show-204342315.html
           return super.onJsAlert(view, url, message, result)
       }

       override fun onConsoleMessage(consoleMessage: ConsoleMessage?): Boolean {
           super.onConsoleMessage(consoleMessage)
           //获取web端输出日志
           consoleMessage?.let {
               Log.d(TAG,"Web端日志：${it.message()}")
           }
           return true
       }
   }

网页调试webView

根据网页调试，我们可以看到js调用方法，有利于帮助我们分析2端api格式是否一致。
原文：https://blog.csdn.net/T_I_A_N_/article/details/127942293

1. chrome输入chrome://inspect/进入调试页面。连上手机，如果app打开了调试权限，那么可以看到出现了调试选项。当然，release的app是不会开启这个选项的。

2. 开启app调试

WebView.setWebContentsDebuggingEnabled(true); //开启调试

3. 进入调试页面,点解inspect即可进入调试。

问题

• 有些网站第一次请求白屏 ，再试几次才能成功或网站有时候跳到其他app

//这是url请求拦截，如果你需要对url做处理，或者根据url执行其他操作可以返回true
//否则返回false
binding.webContent.webViewClient= object :WebViewClient() {
    override fun shouldOverrideUrlLoading(
        view: WebView?,
        request: WebResourceRequest?
            ): Boolean {
        return false
    }
}

• 关于javascript:onAppEvent 参数的理解：

  • 实际上，javascript:onAppEvent是在WebView中执行JavaScript代码的一种约定格式，它并不是在浏览器端或Android端实现的特定功能。当在Android应用程序中使用WebView加载网页时，可以通过javascript:协议来执行JavaScript代码。

  • 在这种情况下，onAppEvent是一个自定义的JavaScript函数或事件处理程序，可以在WebView中执行。Android应用程序可以通过调用javascript:onAppEvent来触发WebView中定义的JavaScript代码，实现Android应用程序与加载的网页之间的交互。

  • 因此，javascript:onAppEvent并不是在浏览器端或Android端实现的特定功能，它只是一种约定的格式，用于在WebView中执行JavaScript代码。通过这种方式，Android应用程序可以与WebView中的JavaScript代码进行交互，实现更加灵活和定制化的功能