Android JS Мост из приложения Vue. js - PullRequest
Новая
       14

Android JS Мост из приложения Vue. js

1 голос
/ 05 мая 2020

У меня есть приложение vue. js, которое работает внутри WebView на Android 7.1.1. vue. js имеет кнопку <div> при нажатии. Я хочу, чтобы она вызывала встроенную функцию в приложении Android. Я смог сделать это без vue. js, используя простой .html файл и <javscript>.

Я использовал это как ресурс, но он не работает. http://www.programmersought.com/article/8455235099/

Android Активность приложения 

package myapp;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private WebView webView;

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                webView.addJavascriptInterface(new JsJavaBridge(), "$App");
            }
        });

        //webView.setWebViewClient(new WebViewClient());

        // This works
        //webView.loadUrl("file:///android_asset/test.html");

        // This does NOT work - Vue.js app running on my local machine
        webView.loadUrl("http://192.168.0.17:3000");

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
    }

    public class JsJavaBridge {

        public JsJavaBridge() {

        }

        @JavascriptInterface
        public void onFinishActivity() {
        }

        @JavascriptInterface
        public void printTicket(String msg) {
            // Want to call this via the vue.js app
            Toast.makeText(getApplicationContext(), "msg",  Toast.LENGTH_SHORT).show();
        }
    }

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

Vue. js файл 

<template>
  <div>
    <Navbar />
    <div class="container">
      <h1>Support</h1>
      <div class="btn btn-secondary" @click="printTicket"><i class="fas fa-print ticket"></i>Print Test Ticket</div>
    </div>
  </div>
</template>
<script>
import Navbar from '@/components/Navbar';

export default {
  components: {
    Navbar
  },
  mounted: function() {},
  methods: {
    printTicket: function() {
      try {
        // eslint-disable-next-line no-undef
        $App.printTicket('HELLO');
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>
<style scoped>
.ticket {
  padding-right: 1rem;
}
.btn {
  padding: 0.75rem;
}
</style>
...