Android平台Cordova插件JavaScript部分无法加载的问题

问题背景 #

尝试给Android应用添加cordova-plugin-webview-proxy插件（android分支），执行安装命令：

cordova plugin add https://github.com/GEDYSIntraWare/cordova-plugin-webview-proxy/tree/android

执行cordova build构建后，Android Studio中可见插件文件，cordova_plugins.js也已正确定义该插件：

cordova.define('cordova/plugin_list', function(require, exports, module) {
  module.exports = [
    // ...其他插件
    {
      "id": "cordova-plugin-webview-proxy.WebviewProxy",
      "file": "plugins/cordova-plugin-webview-proxy/www/WebviewProxy.js",
      "pluginId": "cordova-plugin-webview-proxy",
      "clobbers": [
        "WebviewProxy"
      ]
    }
  ];
  module.exports.metadata = {
    // ...元数据
    "cordova-plugin-webview-proxy": "0.0.3"
  };
});

但应用启动后调用插件时卡住，报错：

Uncaught (in promise) TypeError: Cannot read property 'TypeError: Cannot read property 'convertProxyUrl' of undefined' of undefined
    at getStr (locales.js:47)
    at callMW (mwutils.js:219)
    at mwGetLanguages (mwutils.js:251)
    at loadSettings (settings.js:9)
    at onLoad (index.html:46)
    at onload (index.html:147)

错误触发代码：

return window.WebviewProxy.convertProxyUrl(url.replace('./', BASE_URL));

通过chrome://inspect/#devices查看时，Sources标签中无任何Cordova相关JS文件。

插件的WebviewProxy.js内容：

cordova.define("cordova-plugin-webview-proxy.WebviewProxy", function(require, exports, module) {
/* global cordova */

function WebviewProxy() {
}

WebviewProxy.prototype.convertProxyUrl = function (path) {
    if (!path) {
        return path;
    }
    if (!window.CDV_ASSETS_URL) {
        //Android 10.x origin
        window.CDV_ASSETS_URL = location.origin
    }
    if (path.startsWith('http://')) {
        return window.CDV_ASSETS_URL + '/_http_proxy_' + encodeURIComponent(path.replace('http://', ''));
    }
    if (path.startsWith('https://')) {
        return window.CDV_ASSETS_URL + '/_https_proxy_' + encodeURIComponent(path.replace('https://', ''));
    }
    return path;
}

module.exports = new WebviewProxy();
});

问题原因及解决方法 #

1. 插件安装路径错误 #

直接使用tree/android的GitHub网页URL安装插件，Cordova无法正确拉取插件文件，导致JS文件未被复制到www/plugins目录。正确的分支安装命令应为：

cordova plugin add https://github.com/GEDYSIntraWare/cordova-plugin-webview-proxy.git#android

先卸载原有插件，再执行上述命令重新安装：

cordova plugin remove cordova-plugin-webview-proxy
cordova plugin add https://github.com/GEDYSIntraWare/cordova-plugin-webview-proxy.git#android

2. 未等待Cordova初始化完成 #

Cordova插件需在deviceready事件触发后才会完成加载并挂载到window对象，直接在页面onload时调用会导致对象未定义。修改代码，将插件调用逻辑放到deviceready回调中：

document.addEventListener("deviceready", function() {
  // 此处执行插件调用
  const processedUrl = window.WebviewProxy.convertProxyUrl(url.replace('./', BASE_URL));
  // 后续逻辑
}, false);

3. 插件文件未被正确打包 #

检查www/plugins/cordova-plugin-webview-proxy/www/WebviewProxy.js是否存在：

• 若文件不存在，手动下载该分支的对应JS文件，放到指定目录后重新构建。
• 若文件存在，执行清理缓存命令后重新构建：

cordova clean android
cordova build android

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