Android调用Vue中的JavaScript代码

发布时间:2023年12月21日

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方法。

  1. Android调用Vue中的JavaScript代码:

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

  1. 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)
}
文章来源:https://blog.csdn.net/u013798595/article/details/135137475
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。