Android webviewとjs(Vue)が相互作用します。

jsと原生のインタラクションは二つのケースに分けられます。jsは原生メソッドを呼び出して、元のものはjsメソッドを呼び出します。
本論文では、これらの2つの状況をそれぞれ説明し、H 5端子はvueで実現される。
一、前期準備（Vueプロジェクト準備）
本明細書のH 5端子はVueで実現されるので、正式開始前にまずVueプロジェクト環境を準備する。
プロジェクトが完了したら、npm run serve命令でプロジェクトをスタートさせ、成功したらコマンドラインで二つの住所を見ます。http://localhost:8080/およびhttp://10.0.0.188:8080/10.0.0.188は私の本機のipの住所です。人によって違います。
パソコンのブラウザにアクセスするなら、どれでもいいですが、携帯電話やシミュレータにアクセスするには第二のベルトipのアドレスが必要です。また、携帯電話とパソコンは同じwifiまたは同じセグメントに接続してください。
注意：ここで使うのはvue-cli 3.0で、運行コマンドはvue-cli 2.Xとは違います。詳細は自分で公式文書を調べてください。
起動成功後、Androidプロジェクトにhttp://10.0.0.188:8080/アドレスをWebViewに配置すればいいです。

Intent intent = new Intent(getActivity(), ProgressWebviewActivity.class);
intent.putExtra("url", "http://10.0.0.188:8080/");
startActivity(intent);

これで、携帯電話でVueプロジェクトにアクセスできます。
二、Android原生がJS中の方法を呼び出します。
AndroidがJSを呼び出すには、2つの方法があります。WebViewを通じての方法です。

webview.loadUrl()

webview.evaluateJavascript()

二つの違い：

loadUrl()はページを更新し、evaluateJavascript()はページを更新しないので、evaluateJavascript()の効率が高い

です。

loadUrl()は、jsの戻り値が得られず、evaluateJavascript()は、戻り値

を取得することができる。

evaluateJavascript()は、Android 4.4の後に、

を使用することができます。
達成する効果:
下の図のように、ページには一行の文字があります。「ははは、WebViewページでロードが完了したら、Android原生コードを通じてこの行の文字を変更します。」
2.1 Vueコード
まずVueの中のコードを見て、どう書きますか？

mounted() {
    //              window   
    window.callJsFunction = this.callJsFunction
},
data() {
    return {
    	msg: "  "
	}
},
methods: {
    callJsFunction(str) {
        this.msg = "            " + str
        return "js    "
	}
}

methodsにおいてAndroid起動のための方法callJsFunction(str)を定義し、パラメータstrを受信し、ページ内のテキストを変更することができる。methodsで方法を定義するだけでは、元の呼び出しはこの方法が見つからないので、ページをロードする際に方法をwindowにマウントします。これでWebViewはこの方法を受け取ることができます。このステップは重要です。必ず書きます。
詳細については、this.callJsFunctionの後に括弧()を入れないでください。括弧を入れるのは、直接呼び出しに相当します。
まとめてみるとVueの中でやるべきことは二つのステップです。

は、methodsにおいて、方法

を定義する。

は、mountedにおいて、方法をwindowにマウントする

。
2.2 AndroidのコードWebViewのonPageFinished方法で起動ロジックを書き込む必要があります。そうでないと実行されません。
2.2.1 loadUrl()実装

tbsWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url, headerMap);
                return true;
            }

            @Override
            public void onPageFinished(WebView webView, String s) {
                super.onPageFinished(webView, s);
                //    js  。      onPageFinished      
                tbsWebView.post(new Runnable() {
                    @Override
                    public void run() {
                        tbsWebView.loadUrl("javascript:callJsFunction('soloname')");
                    }
                });
            }
        });
    }
});

パラメータを伝える必要がないなら、パラメータを外してもいいです。
2.2.2 tbsWebView.loadUrl("javascript:callJsFunction()");実装
他のところはevaluateJavascript()と同じです。loadUrl()だけを取り替えるだけです。

@Override
public void onPageFinished(WebView webView, String s) {
    super.onPageFinished(webView, s);
    //    js  。      onPageFinished      
    tbsWebView.post(new Runnable() {
        @Override
        public void run() {
            tbsWebView.evaluateJavascript("javascript:callJsFunction('soloname')", new ValueCallback() {
                @Override
                public void onReceiveValue(String s) {
                    Logger.d("js     ： " + s);
                }
            });
        }
    });
}

ページが更新されているのが見えます。2番目の方法も結果を得ました。
三、JSはAndroidの原生方法を呼び出します。
JSに対してAndroidコードを呼び出す方法は3つあります。

は、tbsWebView.loadUrl("javascript:callJsFunction('soloname')");のWebViewを介してオブジェクトマッピング

を行う。

は、addJavascriptInterface()のWebViewClient方法でブロック

をリセットする。

は、shouldOverrideUrlLoading()のWebChromeClient、onJsAlert()、onJsConfirm()を介して、JSダイアログonJsPrompt()、alert()、confirm()、prompt()、Toastメッセージ

をリセットする。
コントラスト：一番簡潔なのは一つ目ですが、Android 4.2以下には脆弱性があります。二つ目と三つ目の使用は複雑ですが、脆弱性はありません。
現在の設備システムのバージョンは基本的に4.2以上ですので、第一種類を使えばいいです。時間が限られていますので、第一種類と第二種類と第三種類だけは実現できません。知りたいのはこの文章を参考にしてもいいです。
3.1効果の展示
実現する効果はH 5ページのボタンをクリックして、Android原生のmethodsをポップアップすることです。
3.2 Vueコード

methods: {
  showAndroidToast() {
    $App.showToast("  ，  js   ")
  }
}

showAndroidToast()において、方法JsJavaBridgeを定義し、ページ上のボタン「Android原生Toastを起動する」をクリックしたときに呼び出します。
3.3 Androidコード
新しいクラスWebView

public class JsJavaBridge {

    private Activity activity;
    private WebView webView;

    public JsJavaBridge(Activity activity, WebView webView) {
        this.activity = activity;
        this.webView = webView;
    }

    @JavascriptInterface
    public void onFinishActivity() {
        activity.finish();
    }

    @JavascriptInterface
    public void showToast(String msg) {
        ToastUtils.show(msg);
    }
}

Androidにより、JsJavaBridgeクラスとJSコードのマッピングを設定する。

tbsWebView.addJavascriptInterface(new JsJavaBridge(this, tbsWebView), "$App");

ここで、クラス$AppをJSにマッピングすることにより、$App.showToast(" ， js ")を呼び出すことができる。
以上はAndroidとJSの呼び合いです。