使用App Inventor在WebView中实现本地Html，输入无效
Implement local Html in WebView with App Inventor, it doesn't work input
使用 App Inventor 在 WebView 中实现本地 Html。
Local HTML in App Inventor
当我尝试使用 "input" 在手机中选择图像时，没有反应...
<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>
我在 App Inventor 中使用 WebView。
Html 是本地文件。
我只能在与主 html 文件相同的目录中使用样式表和库。
无法使用 webviewer 组件在 App Inventor 中选择文件。
webviewer 不是完整的浏览器，您不能像这样选择文件。为此，您必须使用 activity starter，例如 How to pick a file from SD card.
顺便说一句。通常，您可以将样式表和库与 webviewer...
一起使用
如果您使用 html 文件，包括 js 和 css 文件，它们使用目录结构， 您有 2 个选择：
- 将所有文件上传到您的应用程序的资产中，并修改所有 html、js 和 css 文件中的所有路径以使用该主目录，
- 或者（可能更容易）将您的项目（aia 文件）下载到您的计算机上，进行备份以防万一（您知道始终建议备份......）使用 7zip 打开它，将完整的目录结构拖到子目录中assets，保存修改后的工程（aia文件），上传修改后的工程到App Inventor
我使用的解决方案包括
- 使用
Image Picker 到 select Android 磁盘上的本地图像，
- 使用 upload、
的 API 端点将其上传到 Dropbox
- 使用 API 创建一个 shareable link 到 Dropbox 上的文件，然后
- 将此 link 修改为仅托管在 Dropbox 上的图片，最后
- 将 URL 作为
WebViewString 传递，以便在 HTML 中使用图像标签与 WebViewer 组件一起显示。
这需要一个 Dropbox 帐户和 API 密钥。我不能说在您的特定用例中是否值得所有这些努力，它在我的情况下有效。我使用了来自@Taifun 的 this 示例来上传图像并添加了我自己的修改以获得可共享 link 并在 WebViewer 中呈现。
我假设您熟悉 APIs 以及如何使用它们。如果你决定走这条路，我建议先在 Postman 或 Insomnia 中测试端点。一旦获得正确的响应（状态 200），请按照示例使用 Web 组件的 POST 文件方法在 AppInventor 中实现 API 调用。
希望这对您有所帮助。如果有不清楚的地方，请告诉我，我会添加更多注释。
使用 App Inventor 在 WebView 中实现本地 Html。
Local HTML in App Inventor
当我尝试使用 "input" 在手机中选择图像时，没有反应...
<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>
我在 App Inventor 中使用 WebView。 Html 是本地文件。 我只能在与主 html 文件相同的目录中使用样式表和库。
无法使用 webviewer 组件在 App Inventor 中选择文件。
webviewer 不是完整的浏览器，您不能像这样选择文件。为此，您必须使用 activity starter，例如 How to pick a file from SD card.
顺便说一句。通常，您可以将样式表和库与 webviewer...
如果您使用 html 文件，包括 js 和 css 文件，它们使用目录结构， 您有 2 个选择：
- 将所有文件上传到您的应用程序的资产中，并修改所有 html、js 和 css 文件中的所有路径以使用该主目录，
- 或者（可能更容易）将您的项目（aia 文件）下载到您的计算机上，进行备份以防万一（您知道始终建议备份......）使用 7zip 打开它，将完整的目录结构拖到子目录中assets，保存修改后的工程（aia文件），上传修改后的工程到App Inventor
- 使用
Image Picker到 select Android 磁盘上的本地图像， - 使用 upload、 的 API 端点将其上传到 Dropbox
- 使用 API 创建一个 shareable link 到 Dropbox 上的文件，然后
- 将此 link 修改为仅托管在 Dropbox 上的图片，最后
- 将 URL 作为
WebViewString传递，以便在 HTML 中使用图像标签与WebViewer组件一起显示。
这需要一个 Dropbox 帐户和 API 密钥。我不能说在您的特定用例中是否值得所有这些努力，它在我的情况下有效。我使用了来自@Taifun 的 this 示例来上传图像并添加了我自己的修改以获得可共享 link 并在 WebViewer 中呈现。
我假设您熟悉 APIs 以及如何使用它们。如果你决定走这条路，我建议先在 Postman 或 Insomnia 中测试端点。一旦获得正确的响应（状态 200），请按照示例使用 Web 组件的 POST 文件方法在 AppInventor 中实现 API 调用。
希望这对您有所帮助。如果有不清楚的地方，请告诉我，我会添加更多注释。