VueJS项目因Android WebView回调代码构建失败问题求助

我懂你的困扰——原生HTML里调用WebView注入的Android对象完全正常，但放到Vue项目里构建就报错，核心原因是Vue的构建工具（比如Webpack）在编译阶段会做代码检查，这时候Android变量还没被Android WebView注入，所以会被判定为未定义，而原生HTML是直接在WebView里运行，没有编译检查这一步，所以没问题。

下面给你几个可行的解决办法：

1. 声明全局变量，告诉构建工具Android是合法的 #

如果你的项目用了TypeScript，可以在项目根目录的src文件夹下创建一个global.d.ts文件，添加以下类型声明：

declare var Android: {
  showWallet: (message: string) => void;
};

如果是纯JavaScript项目，可以在调用Android的组件顶部添加注释，告诉ESLint这个变量是全局的：

/* global Android */

2. 运行时增加存在性判断 #

即使解决了构建报错，最好也在运行时确认Android对象和对应的方法存在，避免WebView环境异常时出现运行错误，修改你的代码如下：

let devicedUsed = this.$store.state.devicedUsed;
if (devicedUsed === 'apple'){
  window.webkit.messageHandlers.message.postMessage('backToWallet');
}else{
  // 先判断Android对象和showWallet方法是否存在
  if (typeof Android !== 'undefined' && typeof Android.showWallet === 'function') {
    Android.showWallet('backToWallet');
  }
}

3. 调整ESLint配置（如果有ESLint报错） #

如果你的项目启用了ESLint，它可能会因为Android未定义而报错，这时候可以在.eslintrc.js（或类似配置文件）的globals字段里添加Android为全局变量：

module.exports = {
  // 其他配置...
  globals: {
    Android: true
  }
}

这样调整后，Vue项目就能正常构建，同时在WebView里也能正常调用Android的原生方法了。

内容的提问来源于stack exchange，提问作者Sebastien Desemberg