Android调用Vue中的JavaScript代码

简介: 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交互通信

Vue调用Android方法:

如果你想在Vue中调用Android的函数,你可以使用以下步骤:

在Android中创建一个Java方法,该方法将在Vue中被调用。

使用WebView或其他适当的方式将Vue应用程序嵌入到Android应用程序中。

在Vue中使用JavaScript代码调用Android方法。

ndroid调用Vue中的JavaScript代码:

如果你想在Android中调用Vue中的JavaScript代码,你可以考虑以下方法:

使用WebView的addJavascriptInterface方法将Android对象暴露给Vue中的JavaScript代码。

在Vue中编写JavaScript代码,以便它可以调用Android对象的方法。

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));
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 org.json.JSONObject

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) {
            val jsonObject = JSONObject(dataJson)

            val name = jsonObject.getString("name")
            val age = jsonObject.getInt("age")
            
            Toast.makeText(this@MainActivity, name, Toast.LENGTH_SHORT).show()
            Toast.makeText(this@MainActivity, age.toString(), Toast.LENGTH_SHORT).show()
        }
    }

    // 定义数据类
    data class Data(val name: String, val age: Int)
}
目录
相关文章
|
10天前
|
JavaScript 前端开发 Python
用python执行js代码:PyExecJS库
文章讲述了如何使用PyExecJS库在Python环境中执行JavaScript代码,并提供了安装指南和示例代码。
51 1
用python执行js代码:PyExecJS库
|
6天前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
8天前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
9天前
|
存储 JavaScript 前端开发
webSocket+Node+Js实现在线聊天(包含所有代码)
文章介绍了如何使用WebSocket、Node.js和JavaScript实现在线聊天功能,包括完整的前端和后端代码示例。
42 0
|
6天前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
5天前
|
存储 JavaScript 前端开发
改进JavaScript代码,给水果有序赋色
改进JavaScript代码,给水果有序赋色
|
7天前
|
存储 JSON JavaScript
JavaScript帮我编写快递自动分拣的代码,区分省份市区县城乡镇
JavaScript帮我编写快递自动分拣的代码,区分省份市区县城乡镇在JavaScript中编写一个用于快递自动分拣的代码,区分省份、市区、县、城乡镇,通常意味着你需要一个数据结构来存储这些地理区域的信息,并编写逻辑来根据快递地址中的信息将其分配到正确的分类中。 这里,我将提供一个简化的示例,说明如何使用JavaScript对象和函数来实现这一功能。请注意,这个示例是高度简化的,并且假设你已经有了某种方式(如正则表达式或API调用)来从快递地址中提取省份、市区、县等信息。 ----------------------------------- ©著作权归作者所有:来自51CTO博客作者goS
|
8天前
|
JavaScript 前端开发 Python
python执行js代码
本文档详细介绍如何安装Node.js环境及PyExecJS库,并提供示例代码展示其功能。首先,通过指定链接安装Node.js,安装完毕后可在命令行中输入`node --version`来验证安装是否成功。接着,使用`pip install PyExecJS`安装PyExecJS库,该库允许Python程序执行JavaScript代码。文档还提供了多个示例代码,展示了如何在Python环境中执行和编译JavaScript代码,并可以选择特定的JavaScript运行时环境,如Node.js或JScript。最后,通过具体案例展示了PyExecJS的功能与使用方法。
16 3
|
14天前
|
存储 Java Android开发
🔥Android开发大神揭秘:从菜鸟到高手,你的代码为何总是慢人一步?💻
在Android开发中,每位开发者都渴望应用响应迅速、体验流畅。然而,代码执行缓慢却是常见问题。本文将跟随一位大神的脚步,剖析三大典型案例:主线程阻塞导致卡顿、内存泄漏引发性能下降及不合理布局引起的渲染问题,并提供优化方案。通过学习这些技巧,你将能够显著提升应用性能,从新手蜕变为高手。
16 2
|
17天前
|
JavaScript
网站内容禁止复制的js代码
网站内容禁止复制的js代码
下一篇
无影云桌面