【笔记】Trae+Andrioid Studio+Kotlin开发安卓WebView应用

简介

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

依赖

• Trae CN (https://www.trae.com.cn/)
• Andriod Studio (https://developer.android.google.cn/studio?hl=zh-cn), 以下简称AS
  • 吃内存, 占用了我大约6GB内存
  • 下载项目依赖和安卓虚拟机(约2GB)依赖网络
• 基础的编程知识

步骤

AS(Andriod Studio)创建项目

• 打开AS, 创建一个Empty Activity
  
  
• 在AS打开新窗口后, 等待右下角进度条初始化完毕(下载依赖和编译)

AS创建虚拟机

• 在右上角创建虚拟机
  
  
• 找到镜像, 如果是灰色的, 需要点击下载图标进入下载界面(大约2G, 非常依赖网络)
  
  
• 启动模板项目
  
  

TRAE CN 修改项目

• 使用Trae打开该文件夹
• 按下Ctrl+P, 在顶部打开的输入框中输入Main, 选择MainActivity.kt
  
• 按下Ctrl+U开启右侧AI工具

新增按键捕获功能

• 输入提示"我想要安卓应用可以捕获键盘的上下2个方向键并打印日志信息"

  • 生成完毕后, 在提示框的上方选择"全部接受"
    

• 打开AS, 会自动刷新代码, 点击右上角的绿色重启按钮或者启动按钮重新编译和启动
  
  

• 切换到日志查看界面
  

• 鼠标点击模拟器中的应用的白色区域, 后按下上下键, 可看到日志输出

新增WebView

• 输入提示"我想将Greeting中的Text控件替换为Webview"
  • 生成完毕后, 选择"全部接受"
• 这里有个报错信息, 把鼠标移动到红色的文字上会给出提示, 点击import修复一下
  
• 回到AS, 点击右上角的绿色重启按钮或者启动按钮重新编译和启动
• 出现了网络连接的错误
  
• 回到TRAE, 输入提示信息界面提示"webpage not avalible"
  • 在点击"全部接受"前, 我看了修复内容, 它没添加网络权限还把地址改成google了, 这个方案是不行的, 所以点击"全部拒绝"
• 重新输入提示"应该是没有配置网络权限, 修复一下"
  • 它给"AndroidManifest.xml"的文件内容清空了, 添加了一行权限代码, 这个方案是不行的, 所以点击"全部拒绝"
• 重新输入提示"应该是没有配置网络权限, 添加一下相关的权限, 注意不要影响原有的配置信息"
  • 这次正确的添加了权限, 选择接受
    
• 回到AS重启项目, 结果提示xml有问题, 仔细一看, 它代码加错位置了, 手动调整一下, 向下挪动一行
  
• 还是无法打开页面
• 回到TRAE输入提示信息"还是提示"webpage not avalible", 是不是还缺少哪个网络权限", 给出新的修复
  
• 重启后还是不能打开页面, 重启一下虚拟机
  
  
• 还是不行, 换了百度网址也不行, 打开自带的谷歌浏览器也访问不了网络, 最后是在下拉的通知栏里重新开关wifi后解决(上一步操作没有成功停止虚拟机)
  
• 此时发现按键事件的捕获失效了
• 输入提示信息"按键事件被Webview捕获了导致应用程序的无法捕获上下键了, 修复一下" (这里我之前尝试过几次提问, 最后发现是Webview优先处理了事件导致的)
  
• 回到AS, 编译报错了, 把提示信息MainActivity.kt:61:17 Modifier 'override' is not applicable to 'local function'发给TRAE
  • 新回复删除了override解决了报错, 但是没有解决按键的问题
• 重新输入提示"不行, 按键事件还是没有被APP捕获到", 生成了新回复
  
• 重启项目, 成功解决按键问题

WebView加载本地资源

• 输入提示"我想打印webview都请求了哪些链接"
  • 新增了一个shouldInterceptRequest方法, 这里的斜杠是多余的, 导致没能正确打印日志, 手动删除一下
    
    
• 输入提示信息"我想在shouldInterceptRequest中拦截请求, 然后加载本地的资源文件"
  
• 输入提示"本地资源文件需要放在哪个目录, 帮我生成一个示例"
  • 这里给出了2步, 一个是手动创建本地文件夹和文件, 一个是修改MainActivity.kt(没有自动修改, 可以点击应用按钮)
    
    
    
• 还需要修改一下拦截的地址(下面的日志打印又改回错误的了, 手动修复一下)
  
• 有2个导入报错, 鼠标移动到红色文字上, 给出了提示信息, 点击import导入一下, 重启项目
  

在按键回调中向WebView注入JS代码

• 输入提示信息"我想在onKeyDown的回调中修改WebView中的显示内容"
  • 给了一个通过findViewById实现的方法, 接受后发现不能用, 退回一下
    
• 输入提示信息"我想在onKeyDown的回调中修改Greeting中创建的WebView中的显示内容"
  • 这次他给WebView加了个全局变量webViewInstance, 但是修改后的代码少了花括号, 手动修复一下
• 发现没效果, 手动加了日志打印了一下日志发现webViewInstance是空的
• 输入提示信息"webViewInstance是null, 是不是哪里有问题, 导致没赋值成功"
  • 只是加了日志, 没解决
• 输入提示信息"Greeting 中返回 webView 的时候, webView 还没初始化吧?"
  • 发癫了, 胡乱输出
• 输入提示信息"AndroidView 中是不是异步执行的, 导致返回的webview是null"
  • 偷懒了, 不想解决问题, 一味的加日志
• 输入提示信息"已打印日志确认Greeting中返回的webView是null"
  • 还是加日志
    
• 输入提示信息"通过日志发现WebViewReturn提示webView有值, WebViewRequests处为null, 且WebViewRequests 先WebViewReturn输出, 可以确定AndroidView异步执行导致的返回null, 修复一下"
  • 这次改成了回调的方式, 成功解决
• 输入提示信息"不要跳转到new-url, 而是执行JS代码"
  
• 手动修改一下
  
• 没注意看, 重新输入提示"不要使用webViewInstance?.loadUrl, 使用注入JS的方式"
  
• 发现没效果, 打开Edge, 访问"edge://inspect/#devices", chrome不行, 会超时然后显示404
  
• 在控制台直接粘贴JS, 发现js没有问题
• 输入提示信息"evaluateJavascript 没有效果", 给出新修复
  
• 重启, 按下上键, 成功解决
  

最终关键代码

• MainActivity.kt

package com.example.dm2import android.os.Bundle
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
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.dm2.ui.theme.DM2Theme
import android.util.Log
import android.view.KeyEvent
import android.webkit.WebView
import android.webkit.WebViewClient
import android.webkit.WebResourceRequest
import android.webkit.WebResourceResponse
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.viewinterop.AndroidView
import java.io.IOExceptionvar webViewInstance: WebView? = nullclass MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {DM2Theme {Surface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {Greeting("Android") { webView ->webViewInstance = webView}}}}}override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {when (keyCode) {KeyEvent.KEYCODE_DPAD_UP -> {Log.d("KeyEvent", "上方向键被按下" + webViewInstance)webViewInstance?.evaluateJavascript("document.body.innerText = new Date();", null)return true}}return super.onKeyDown(keyCode, event)}
}@Composable
fun Greeting(name: String, modifier: Modifier = Modifier, onWebViewCreated: (WebView) -> Unit = {}) {val context = LocalContext.currentAndroidView(factory = {ctx ->val webView = WebView(ctx).apply {settings.javaScriptEnabled = trueLog.d("WebViewInit", "WebView实例已创建: $this")webViewClient = object : WebViewClient() {override fun shouldInterceptRequest(view: WebView, request: WebResourceRequest): android.webkit.WebResourceResponse? {val url = request.url.toString()if (url.equals("https://www.example.com/")) {try {val inputStream = context.assets.open("example.html")return WebResourceResponse("text/html", "UTF-8", inputStream)} catch (e: IOException) {e.printStackTrace()}}Log.d("WebViewRequests", "请求链接: ${request.url}")return super.shouldInterceptRequest(view, request)}}loadUrl("https://www.example.com")isFocusable = falseisFocusableInTouchMode = falsefun onKeyDown(keyCode: Int, event: KeyEvent): Boolean {return false}}onWebViewCreated(webView)return@AndroidView webView},modifier = modifier)
}@Preview(showBackground = true)
@Composable
fun GreetingPreview() {DM2Theme {Greeting("Android")}
}

• AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /><applicationandroid:allowBackup="true"android:dataExtractionRules="@xml/data_extraction_rules"android:fullBackupContent="@xml/backup_rules"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:roundIcon="@mipmap/ic_launcher_round"android:supportsRtl="true"android:theme="@style/Theme.DM2"tools:targetApi="31"><activityandroid:name=".MainActivity"android:exported="true"android:label="@string/app_name"android:theme="@style/Theme.DM2"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity></application></manifest>

• example.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>示例页面</title>
</head>
<body><h1>这是一个本地资源文件示例</h1><p>该文件从 Android 的 assets 目录加载。</p>
</body>
</html>

吐槽

• java是大家闺秀, js是小伙子, kotlin简直是耍**, 那语法糖看的我抓耳挠腮