How to call java function in Android from Javascript in Vue?

Question

I have the project made in Vue. I want to view it on mobile phone therefore I created the android app. For this reason I use WebView component. After clicking on some element in vue-app js calls java and some events are going already in Android native app. But it doesn't happening. I think, the problem is somewhere in injecting java-variables...

corrected code

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>

Answer 1

Please Remove

view.loadUrl(url);

from shouldOverrideUrlLoading from MyWebViewClient and put it in onCreate after webView.addJavascriptInterface.

Answer 2

Thanks, I replaced the code but so far nothing happens.

import android.support.v7.app.AppCompatActivity;
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();
        }
    }

}

Answer 3

showName 函数必须具有

showName() { window.androidinfo.showInfoFromJs('js calls java');
}