时间戳

首页 > 解决方案 > 如何从 Vue 中的 Javascript 调用 Android 中的 java 函数？

java - 如何从 Vue 中的 Javascript 调用 Android 中的 java 函数？

问题描述

我有一个用 Vue 制作的项目。我想在手机上查看它，因此我创建了 android 应用程序。出于这个原因，我使用 WebView 组件。单击 vue-app 中的某些元素后，js 调用 java 并且某些事件已经在 Android 本机应用程序中进行。但它没有发生。我认为，问题出在注入java变量的某个地方......

更正的代码

爪哇

import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.JavascriptInterface;
import android.widget.Toast;
import android.content.Context;

public class MainActivity extends AppCompatActivity {

    private WebView webView;

    public class JavaScriptInterface {
        Context mContext;

        JavaScriptInterface(Context c) {
            mContext = c;
        }

        @JavascriptInterface
        public void showInfoFromJs(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClient());

        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new JavaScriptInterface(this), "androidinfo");
        webView.loadUrl("https://jospro.ru/");
    }

    @Override
    public void onBackPressed() {
        if(webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }

}

<!-- Vue -->

<template>
    <div class="align-items-center d-flex header-comp">
        <div class="header-title-comp pl-3">
            <div class="title-h1-comp" @click="showName">{{ loggedUser.firstname }}</div>
        </div>
        <div class="header-tarif-comp">Start</div>
    </div>
</template>

<script>    
    import { mapGetters }       from 'vuex'

    export default {
        name: 'ProfileHeader',

        computed: {
            ...mapGetters([ 'loggedUser' ])
        },

        methods: {          
            showName() {
                androidinfo.showInfoFromJs('js calls java');                
            }
        },
    }
</script>

标签： javaandroidvue.js

解决方案

请删除

view.loadUrl(url);

来自 MyWebViewClient 的 shouldOverrideUrlLoading 并将其放在 webView.addJavascriptInterface 之后的 onCreate 中。

推荐阅读