时间戳

首页 > 解决方案 > 由于 Android Javascript webView 回调，VueJS 无法构建

javascript - 由于 Android Javascript webView 回调，VueJS 无法构建

问题描述

我想要一个 WebView 页面回调到我的 Android 应用程序。我已经使用 vanilla 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 代码中定义。

我该如何解决这个问题？

标签： javascriptvue.jskotlin

解决方案

使用window.前缀告诉编译器它是一个全局变量：

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

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

推荐阅读