Веб-просмотр Android взаимодействует с js (Vue)

внешний интерфейс JavaScript Android Vue.js

Взаимодействие между js и нативом делится на две ситуации: js вызывает нативные методы, а натив вызывает методы js.

В этой статье эти два случая будут объяснены отдельно, конечное использование H5vueвыполнить.

1. Предварительная подготовка (подготовка проекта Vue)

В конце H5 этой статьи используется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проект.

2. Android нативно вызывает методы в JS

Android может вызывать JS двумя способами: оба черезWebViewМетоды:

  1. webview.loadUrl()
  2. webview.evaluateJavascript()

Разница между ними:

  1. loadUrl()обновит страницу,evaluateJavascript()не приведет к обновлению страницы, поэтомуevaluateJavascript()более эффективным

  2. loadUrl()Не удается получить возвращаемое значение js,evaluateJavascript()получить возвращаемое значение

  3. evaluateJavascript()Доступно только после Android 4.4

Достигаемый эффект:

Как показано на рисунке ниже, на странице есть строка текста «ха-ха».WebViewКогда страница загружена, нативный код Android изменит эту строку на «Я изменил текст с помощью нативного метода» + параметры, переданные Android, и вернет Android строку «JS-вызов выполнен успешно».

2.1 Vue-код

Сначала посмотрите, как писать код на Vue.

mounted() {
    //将要给原生调用的方法挂载到 window 上面
    window.callJsFunction = this.callJsFunction
},
data() {
    return {
    	msg: "哈哈"
	}
},
methods: {
    callJsFunction(str) {
        this.msg = "我通过原生方法改变了文字" + str
        return "js调用成功"
	}
}

существуетmethodsОпределите метод вызова AndroidcallJsFunction(str), и может получить параметрstr, а затем измените текст на странице.

если только вmethodsМетод, определенный в , собственный вызов не найдет этот метод. Итак, когда страница загружается, смонтируйте метод вwindowвверх, такWebViewВы можете получить этот метод. Обратите внимание, что этот шаг очень важен и должен быть записан!

Обратите внимание на одну деталь,this.callJsFunctionНе ставить скобки после(), добавление круглых скобок эквивалентно прямому вызову.

подвести итогVueНужно сделать два шага:

  1. существуетmethodsметод, определенный в
  2. существует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')");
                    }
                });
            }
        });
    }
});

Если вам не нужно передавать параметры, просто удалите параметры.tbsWebView.loadUrl("javascript:callJsFunction()");

2.2.2 evaluateJavascript()выполнить

в другом месте сloadUrl()то же, только поставьtbsWebView.loadUrl("javascript:callJsFunction('soloname')");заменять

@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<String>() {
                @Override
                public void onReceiveValue(String s) {
                    Logger.d("js返回的结果： " + s);
                }
            });
        }
    });
}

Вы можете видеть, что страница обновляется, и второй метод также получает возвращаемый результат.

3. JS вызывает нативные методы Android

JS может вызывать код Android тремя способами:

  1. пройти черезWebViewизaddJavascriptInterface()делать сопоставление объектов
  2. пройти черезWebViewClientизshouldOverrideUrlLoading()URL перехвата обратного вызова метода
  3. пройти черезWebChromeClientизonJsAlert(),onJsConfirm(),onJsPrompt()Обратный вызов метода для перехвата диалога JSalert(),confirm(),prompt()Информация

Сравнение: первый самый лаконичный, но есть лазейки под Android 4.2, второй и третий сложны в использовании, но проблемы с лазейками нет.

Поскольку текущая версия системы устройства в основном выше 4.2, можно использовать первую, простую и быструю. Время ограничено. В этой статье реализован только первый тип, а второй и третий типы не реализованы. Если вы хотите узнать больше, вы можете обратиться кэта статья.

3.1 Отображение эффектов

Достигаемый эффект заключается в том, чтобы нажать кнопку на странице H5, чтобы открыть собственный Android-файл.Toast

3.2 Vue-код

methods: {
  showAndroidToast() {
    $App.showToast("哈哈，我是js调用的")
  }
}

существуетmethodsметод, определенный вshowAndroidToast(), вызываемый при нажатии кнопки «Вызов Android Native Toast» на странице.

3.3 Код Android

новый классJsJavaBridge

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);
    }
}

затем пройтиWebViewнастраиватьAndroidСопоставление классов с кодом JS

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

класс здесьJsJavaBridgeСопоставляется в JS как$App, поэтому в Vue это можно назвать так$App.showToast("哈哈，我是js调用的").

Выше приведен взаимный вызов между Android и JS.

Категории