javascript - Kotlin:将本地 html js 加载到 android WebView
问题描述
所以我有一个 react-native 项目,但决定放弃它,这与 airbnb 转向原生开发(java/kotlin)的原因相同。我的大部分经验都是网络内容,所以除了 hello world 之外没有任何移动原生体验。
简而言之。现在,我想使用 kotlin 并想通过将所有代码加载到 WebView 中来挽救我的大部分代码,然后随着我获得更多知识,可能会更原生地构建。(可能,每个活动/屏幕 1 个 WebView 组件)。而且我可能需要将我的 react-native 代码转换为 react web,但我想我已经涵盖了。
我的挑战是在 js 中调用/引用本机功能(例如相机、本地存储)来调用 kotlin 函数或类似的东西,但我认为有办法做到这一点,但我在 kotlin 中没有看到这样的例子,所以我米挣扎。
概括:
将本地 html/js 文件加载到 WebView
从 WebView 调用/访问本机功能(例如相机、本地存储)
到目前为止..activity_main.xml
<WebView
android:id="@+id/webView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
MainActivity.kt
package com.example.kotlinwebview
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
webView.settings.javaScriptEnabled = true
webView.settings.setSupportZoom(false)
webView.webViewClient = object : WebViewClient() {
override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)
}
}
}
}
应用程序/src/main/assets/test.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; user-scalable=0;" />
<title>JavaScript Interface</title>
</head>
<body>
<h1>This is HTML</h1>
<script language="javascript">
function someFunction() {
...
}
function someFunction2() {
...
}
function callFromActivity(msg){
...
}
</script>
</body>
</html>
如果你们能帮我做第一个,那就太酷了。
解决方案
class MainActivity : AppCompatActivity() {
// this is globar variable
val FILECHOOSER_RESULTCODE = 1001
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
webView.settings.javaScriptEnabled = true
webView.settings.setSupportZoom(false)
webView.webChromeClient = object : WebChromeClient() {
override fun onShowFileChooser(
webView: WebView,
filePathCallback: ValueCallback<Array<Uri>>,
fileChooserParams: FileChooserParams
): Boolean {
val contentSelectionIntent = Intent(Intent.ACTION_GET_CONTENT)
contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE)
contentSelectionIntent.type = "*/*"
val intentArray: Array<Intent?> = arrayOfNulls(0)
val chooserIntent = Intent(Intent.ACTION_CHOOSER)
chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent)
chooserIntent.putExtra(Intent.EXTRA_TITLE, "File Chooser")
chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, intentArray)
startActivityForResult(chooserIntent, FILECHOOSER_RESULTCODE)
return true
}
}
}
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
super.onActivityResult(requestCode, resultCode, data)
if (requestCode == FILECHOOSER_RESULTCODE) {
val result = if (intent == null || resultCode != RESULT_OK) null else data?.data
result?.let {
val uriArray: Array<Uri> = arrayOf(it)
}
}
}
}