Android调用Vue中的JavaScript代码

Android调用Vue中的JavaScript代码

首先，在 Vue 应用中，使用以下代码将数据传递给 Android 应用：

// 在 Vue 应用中将数据传递给 Android 应用
var data = "Hello from Vue!"
window.Android.showToast(data)

然后，在 Kotlin 的 Android 应用中，创建一个 JavaScript 接口类并添加方法来接收这个值：

kotlin

import android.annotation.SuppressLint
import android.os.Bundle
import android.webkit.JavascriptInterface
import android.webkit.WebSettings
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private lateinit var webView: WebView

    @SuppressLint("SetJavaScriptEnabled")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        webView = findViewById(R.id.webview)
        val webSettings: WebSettings = webView.settings
        webSettings.javaScriptEnabled = true // 启用 JavaScript

        // 加载 Vue 应用的网页
        webView.loadUrl("file:///android_asset/vueapp/index.html")

        // 设置 JavaScript 接口
        webView.addJavascriptInterface(JavaScriptInterface(), "Android")
    }

    // 定义 JavaScript 接口
    inner class JavaScriptInterface {
        @JavascriptInterface
        fun showToast(message: String) {
            // 在 Android 应用中显示从 Vue 应用传递过来的值
            Toast.makeText(this@MainActivity, message, Toast.LENGTH_SHORT).show()
        }
    }
}

在上述 Kotlin 代码中，通过 window.Android.showToast(data) 方法将数据传递给 Android 应用，并在 JavaScriptInterface 接口的 showToast 方法中接收到数据后，通过 Toast 显示这个值。

这样，当 Vue 应用中调用 window.Android.showToast(data) 时，Android 应用就会显示从 Vue 应用传递过来的值。

Vue和android交互通信

1. Vue调用Android方法：

如果你想在Vue中调用Android的函数，你可以使用以下步骤：
在Android中创建一个Java方法，该方法将在Vue中被调用。
使用WebView或其他适当的方式将Vue应用程序嵌入到Android应用程序中。
在Vue中使用JavaScript代码调用Android方法。

2. Android调用Vue中的JavaScript代码：

如果你想在Android中调用Vue中的JavaScript代码，你可以考虑以下方法：
使用WebView的addJavascriptInterface方法将Android对象暴露给Vue中的JavaScript代码。
在Vue中编写JavaScript代码，以便它可以调用Android对象的方法。

3. Capacitor混合开发：

Capacitor是一个开源的跨平台框架，允许你使用JavaScript、HTML和CSS创建iOS、Android和Web应用程序1。

传递json对象

首先，在Vue应用中，可以使用window.Android.getData(data)方法将数据传递给Android应用：

// 在Vue应用中将数据传递给Android应用
var data = {name: 'John', age: 25};
window.Android.getData(JSON.stringify(data));

然后，在Android应用的Activity中，通过JavaScript接口接收数据：

import android.os.Bundle
import android.util.Log
import android.webkit.JavascriptInterface
import android.webkit.WebSettings
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity
import com.google.gson.Gson

class MainActivity : AppCompatActivity() {
    companion object {
        private const val TAG = "MainActivity"
    }

    private lateinit var webView: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        webView = findViewById(R.id.webview)
        val webSettings: WebSettings = webView.settings
        webSettings.javaScriptEnabled = true // 启用JavaScript

        // 加载Vue应用的网页
        webView.loadUrl("file:///android_asset/vueapp/index.html")

        // 设置JavaScript接口
        webView.addJavascriptInterface(JavaScriptInterface(), "Android")
    }

    // 定义JavaScript接口
    inner class JavaScriptInterface {
        @JavascriptInterface
        fun getData(dataJson: String) {
            // 将JSON字符串转换为Kotlin对象
            val gson = Gson()
            val data = gson.fromJson(dataJson, Data::class.java)

            // 处理从Vue应用传递过来的数据
            val name: String = data.name
            val age: Int = data.age
            Log.d(TAG, "Name: $name")
            Log.d(TAG, "Age: $age")
        }
    }

    // 定义数据类
    data class Data(val name: String, val age: Int)
}