可以在启动时使用 Capacitor/Ionic 在 Android Webview Window 对象上存储数据吗？

Question

我有一些配置变量，这些变量取决于 Android 应用程序使用的风格，包括 Angular 应用程序启动所需的一些身份验证变量。

我需要将一些数据写入窗口对象中的全局常量，但我没有找到任何方法来做到这一点。

我尝试创建一个电容器插件并调用

override fun load() {
    this.bridge.webView.evaluateJavascript("const __myTest = 'hello world'", null);
}

或与

override fun handleOnStart() {
  super.handleOnStart()
  this.bridge.webView.evaluateJavascript("const __myTest = 'hello world'", null);
}

但是即使调用该部分，它也没有设置任何内容（可能当时 webview 还没有定义）

这可能吗？我不想定义插件调用，因为我需要更改应用程序的所有初始化，并且我试图阻止这种情况。

Answer 1

我可以想到几种不涉及事物本机方面的方法，也许其中一种适用于您的项目。

1. 如果您使用 Vite，

   import.meta.env.VITE_*

   允许将环境变量传递到构建，并直接在 Vue 项目代码中引用。 Vite 还可以从

   .env

   文件中读取它们，如果您需要更动态的配置，构建脚本可以生成该文件。 AFAIK，变量上的

   VITE_

   前缀是必需的。

   https://vitejs.dev/guide/env-and-mode

   const config = {
     foo: import.meta.env.VITE_FOO,
     bar: import.meta.env.VITE_BAR,
   }
   

2. 您可以

   sed

   在

   index.html

   中做一些事情：

   <script>let config = {};</script>
   

   #!/usr/bin/env bash
   
   FOO_VALUE=bar
   BAZ_VALUE=2006
   
   CONFIG=$(cat <<END
   {
     "foo": "${FOO_VALUE}",
     "baz": ${BAZ_VALUE}
   }
   END
   )
   
   CONFIG=$(echo $CONFIG | tr -d "\n")
   
   sed -i '' -e "s|let config = {};|const config = ${CONFIG};|g" dist/index.html
   

3. 另一种方法可能是在构建期间创建

   config.js

   ，并从

   index.html

   加载它：

   <script src="config.js"></script>