My project is developed using Vue.js. In order to view it on a mobile phone, I decided to create an Android app. To achieve this, I am using the WebView component. However, when I click on an element in the Vue.js app, JavaScript calls Java and some events should happen within the Android native app. Unfortunately, this is not working as expected. I suspect that the issue lies 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>