Блог

Я хотел бы иметь обратный вызов страницы WebView для моего приложения для Android. Я успешно сделал это, используя ванильную HTML-страницу. Когда я добавляю тот же код JavaScript в свое приложение VueJS, оно не хочет собираться и выдает ELIFECYCLE ошибку.

В моем коде Kotlin у меня есть следующее:

 binding.webView.addJavascriptInterface(JavaScriptInterface(), "Android")

private inner class JavaScriptInterface {
  fun showWallet(string: String) {
    AppPreference.PREFERENCE_SCREEN_TYPE = Constants.SCREEN_USER_DASHBOARD
    mainActivity.getNavController().navigate(R.id.action_placeOrder_to_userDashboardFragment)
   }
}
  

Android это мой объект JavaScript, который я объявил, и функция showWallet , которая перемещает пользователя к другому фрагменту.

В моем коде VueJS у меня есть следующее:

 let devicedUsed = this.$store.state.devicedUsed;
if (devicedUsed === 'apple'){
  window.webkit.messageHandlers.message.postMessage('backToWallet');
}else{ //is Android device
  Android.showWallet('backToWallet');
}
  

Приведенный выше обратный вызов работает без каких-либо проблем в ванильном HTML. Моя проблема в том, что приведенный выше код не создается, и я получаю сообщение об ошибке, которое Android не определено. Кажется, VueJS ищет Android , который определен только в коде Kotlin.

Как мне обойти эту проблему?

Используйте window. префикс, чтобы сообщить компилятору, что это глобальная переменная:

 // BEFORE:
Android.showWallet('backToWallet')

// AFTER:
window.Android.showWallet('backToWallet')