使用 App Inventor 在 WebView 中实现本地 Html，它不起作用输入答案

【问题标题】：Implement local Html in WebView with App Inventor, it doesn't work input使用 App Inventor 在 WebView 中实现本地 Html，它不起作用输入
【发布时间】：2016-08-28 02:18:31
【问题描述】：

在 WebView 中使用 App Inventor 实现本地 Html。

Local HTML in App Inventor

当我尝试使用“输入”在手机中选择图像时，没有反应...

<html >
  <head>
    <meta charset="UTF-8">

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Pick some files</a> 

<script type="text/javascript">

  window.URL = window.URL || window.webkitURL;

var fileSelect = document.getElementById("fileSelect"),
    fileElem = document.getElementById("fileElem"),
    fileList = document.getElementById("fileList");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);
  
</script>

我在应用发明者中使用 WebView。 Html 是一个本地文件。 我只能使用与主 html 文件位于同一目录中的样式表和库。

【问题讨论】：

标签： javascript android html webview app-inventor

【解决方案1】：

无法使用webviewer 组件在 App Inventor 中拾取文件。

webviewer 不是完整的浏览器，您不能选择这样的文件。为此，您必须使用activity starter，例如How to pick a file from SD card。

顺便说一句。通常您可以将样式表和库与webviewer... 一起使用...

如果您使用 html 文件，包括 js 和 css 文件，它们使用目录结构，您有两种选择：

将所有文件上传到应用的资产中，并修改所有 html、js 和 css 文件中的所有路径以使用该主目录，
或（可能更容易）将您的项目（aia 文件）下载到您的计算机上，进行备份以防万一（您知道总是建议备份...）使用 7zip 打开它，将完整的目录结构拖到子目录 assets 中，保存修改后的项目（aia 文件）并将修改后的项目上传到 App Inventor

【讨论】：

对不起，我没给理解好。我真的需要知道如何用 HTML 代码解决这个问题。我有使用 imagePicker 和活动启动器的经验。
哥斯达黎加的泥潭。 me es mas facil si te respondo en español。 Es triste que no funcione, pero bueno quería hacer el intento。非常感谢！
另一种选择是使用您的 Github 帐户在 Github 上托管您的网页，如此处所述； pages.github.com，然后将 WebViewer 组件指向 URL。您可以在网页中设置一个变量，以使用 WebViewString 属性与 AppInventor 来回传递消息。干杯！

【解决方案2】：

我使用的解决方案包括

使用Image Picker选择Android磁盘上的本地镜像，
使用upload 的 API 端点将其上传到 Dropbox，
使用 API 为 Dropbox 上的文件创建 shareable link，然后
将此链接修改为仅在 Dropbox 上托管的图像，最后
将 URL 传递为 WebViewString 以使用带有 WebViewer 组件的 HTML 中的图像标记显示。

这需要 Dropbox 帐户和 API 密钥。我不能说在您的特定用例中是否值得所有这些努力，它在我的工作中有效。我使用@Taifun 中的this 示例上传图像并添加了我自己的修改以获得可共享的链接并在WebViewer 中呈现。

我假设您熟悉 API 以及如何使用它们。如果你决定走这条路，我建议先在 Postman 或 Insomnia 中测试端点。获得正确响应后（状态 200），按照示例在 AppInventor 中使用 Web 组件的 POST 文件方法实现 API 调用。

希望这会有所帮助。如果有不清楚的地方，请告诉我，我会添加更多注释。

【讨论】：