序
最近我同事接了一个项目，就是需要传一个图片给游戏的 webview，考虑到服务端传输又没有账号登陆的原因，所以还是本地的好（喂喂喂！本来就该本地传输啊！！）
所以这里写了一个简单的 demo 来完成上述代码。
首先这个问题抽象一下，简单得讲就是需要让 android webview 能够响应 js 代码，并接受 js 的传参数，那这很简单，我们写个 demo 吧。
安卓端设置
添加网络权限
这里首先要创建一个空项目，这个很简单，跟着 IDE 点就行，随后在 gradle 安装完依赖以后，找到文件 src/main/AndroidManifest.xml, 并修改为如下代码（主要添加了）：
<uses-permission android:name="android.permission.INTERNET" />这个代码申请了网络权限
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.test_app">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:usesCleartextTraffic="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:theme="@style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
<uses-permission android:name="android.permission.INTERNET" />
</manifest>注意 如果你和我一样是本地测试那么 usesCleartextTraffic 这条是可以开启的，如果是线上环境请尽可能的去掉，https 更为安全。
添加 webview
在可视化界面中添加 webview 并设置 id,文件路径为 layout/activity_main.xml：
<android.webkit.WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>添加 webview 相关的交互代码
随后前往你所设置的软件目录添加后续的交互代码src/main/java/com/example/test_app/MainActivity.kt
这边我用的是 kotlin 如果是 java 路径是类似的
随后查询 webview 并注入代码：
这边就写一下 kt 代码，java 的不多赘述了
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val webview = findViewById<WebView>(R.id.webview)
webview.loadUrl("http://192.168.1.101:5500")
val webviewSetting = webview.settings
webviewSetting.javaScriptEnabled = true
webview.addJavascriptInterface(object: JsCallbackFn {
@JavascriptInterface
override fun onJsCallback(text: String) {
val alertDialog = AlertDialog.Builder(this@MainActivity)
alertDialog.setTitle("系统提示")
.setMessage("js传数值${text}")
.create()
alertDialog.show()
}
}, "webviewTest")⚠ 如果SDK(targetSdkVersion) 设置为 17 或更高，则必须为注入的对象的方法添加 @JavascriptInterface 注释并 设置为 public。如果未提供注释，那么在 Android 4.2 以上将无法正确访问。️
html 代码
随后我们需要本地起一个服务来显示 http ，这里就用 vscode 的插件好了（简单快捷一点，反正只是演示）
把如下代码放置入任意文件夹，并使用 vscode 开启监控：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id="input">
<button id="btn">click</button>
<script>
document.getElementById('btn').addEventListener('click', function () {
var value = document.getElementById('input').value || '1';
window.webviewTest.onJsCallback(value);
})
</script>
</body>
</html>随后你就可以开始测试了，随便试一下，嗯传指什么的是没问题的了！
本文标题：如何在 webview 中调用 javascript
永久链接：https://iceprosurface.com/2020/05/04/2020/call-js-for-android/
作者授权：本文由 icepro 原创编译并授权刊载发布。
版权声明：本文使用「署名-非商业性使用-相同方式共享 4.0 国际」创作共享协议，转载或使用请遵守署名协议。