Android Kotlin 开发内嵌 WebView 应用及按键交互实践

简介

使用 Android Studio 配合 Kotlin 开发一个内嵌 WebView 的安卓应用，在 WebView 中加载本地资源，在 APP 中捕获按键事件对 WebView 中的内容进行操作。

环境准备

• Android Studio (AS)
• 基础的编程知识

实现步骤

AS 创建项目

1. 打开 AS，创建一个 Empty Activity 项目。
2. 等待依赖下载和编译初始化完毕。

AS 创建虚拟机

1. 启动模板项目。
2. 找到镜像，如果是灰色的需要点击下载（依赖网络）。
3. 在右上角创建虚拟机并启动。

集成 WebView

1. 将 Greeting 中的 Text 控件替换为 WebView。
2. 配置网络权限。若无法打开页面，检查 AndroidManifest.xml 是否添加了 INTERNET 等权限。
3. 解决按键事件被 WebView 优先处理的问题，确保 APP 层能捕获上下键。
4. 修复异步执行导致的 WebView 实例为空问题，采用回调方式初始化 WebView 实例。

按键事件处理

1. 重写 onKeyDown 方法捕获键盘方向键。
2. 在按键回调中向 WebView 注入 JS 代码修改显示内容。
3. 注意处理 WebView 初始化的时序问题，避免空指针异常。

加载本地资源

1. 本地资源文件需放在 assets 目录。
2. 在 shouldInterceptRequest 中拦截请求，加载本地资源文件。
3. 打印日志确认请求链接和资源加载情况。

核心代码

MainActivity.kt

package com.example.dm2

import android.os.Bundle
import android.util.Log
import android.view.KeyEvent
import android.webkit.WebResourceRequest
import android.webkit.WebResourceResponse
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
 androidx.compose.ui.Modifier
 androidx.compose.ui.platform.LocalContext
 androidx.compose.ui.tooling.preview.Preview
 androidx.compose.ui.viewinterop.AndroidView
 java.io.IOException

 webViewInstance: WebView? = 

  : () {
      {
        .onCreate(savedInstanceState)
        setContent {
            DM2Theme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting() { webView ->
                        webViewInstance = webView
                    }
                }
            }
        }
    }

     :  {
         (keyCode) {
            KeyEvent.KEYCODE_DPAD_UP -> {
                Log.d(,  + webViewInstance)
                webViewInstance?.evaluateJavascript(, )
                 
            }
        }
         .onKeyDown(keyCode, event)
    }
}


 {
     context = LocalContext.current
    AndroidView(
        factory = { ctx ->
             webView = WebView(ctx).apply {
                settings.javaScriptEnabled = 
                Log.d(, )
                webViewClient =  : WebViewClient() {
                     : WebResourceResponse? {
                         url = request.url.toString()
                         (url.equals()) {
                             {
                                 inputStream = context.assets.()
                                 WebResourceResponse(, , inputStream)
                            }  (e: IOException) {
                                e.printStackTrace()
                            }
                        }
                        Log.d(, )
                         .shouldInterceptRequest(view, request)
                    }
                }
                loadUrl()
                isFocusable = 
                isFocusableInTouchMode = 
            }
            onWebViewCreated(webView)
             webView
        },
        modifier = modifier
    )
}



 {
    DM2Theme {
        Greeting()
    }
}