Реализуйте локальный HTML-код в WebView с помощью App Inventor, он не работает с вводом

Реализуйте локальный HTML-код в WebView с помощью App Inventor.

Локальный HTML в 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-файл.


person Fron Melfi    schedule 28.08.2016    source источник


Ответы (2)


Невозможно использовать компонент webviewer для выбора файлов в App Inventor.

webviewer не является полноценным браузером, и вы не можете выбирать такие файлы. Для этого вам придется использовать activity starter, см., например, Как выбрать файл с SD-карты.

Кстати. обычно вы можете использовать таблицы стилей и библиотеки вместе с webviewer...

Если вы используете файлы html, включая файлы js и css, которые используют структуру каталогов, у вас есть 2 варианта:

  1. загрузите все файлы в активы вашего приложения и измените все пути во всех файлах html, js и css, чтобы использовать этот основной каталог,
  2. или (вероятно, проще) загрузите свой проект (файл aia) на свой компьютер, сделайте резервную копию на всякий случай (вы знаете, всегда рекомендуется иметь резервные копии…), откройте его с помощью 7zip, перетащите полную структуру каталогов в активы подкаталога, сохраните измененный проект (файл aia) и загрузите измененный проект в App Inventor.
person Taifun    schedule 28.08.2016
comment
извините, я не дал понять хорошо. Мне действительно нужно знать, как решить это с помощью HTML-кода. У меня есть опыт работы с imagePicker и стартером активности. - person Fron Melfi; 28.08.2016
comment
Mire tu perfil y sos de Costa Rica. me es mas facil site te responseo en español. Es triste que no funcione, pero bueno quería hacer el mindo. Слава Богу! - person Fron Melfi; 28.08.2016
comment
Другой вариант — разместить свою веб-страницу на Github с помощью своей учетной записи Github, как описано здесь; pages.github.com, а затем укажите URL-адрес компонента WebViewer. страницу для передачи сообщений туда и обратно с помощью AppInventor с использованием свойства WebViewString. Ваше здоровье! - person Sun Bee; 14.12.2020

введите описание изображения здесьРешение, которое я использовал, состоит из

  1. Используйте Image Picker для выбора локального образа на диске Android,
  2. Загрузите его в Dropbox, используя конечную точку API для загрузки. ,
  3. Создайте ссылку на файл в Dropbox с помощью API. , тогда
  4. Измените эту ссылку только на изображение, размещенное в Dropbox, и, наконец,
  5. Передайте URL-адрес как WebViewString для отображения с тегом изображения в HTML с компонентом WebViewer.

Для этого требуется учетная запись Dropbox и ключ API. Я не могу сказать, стоит ли это всех этих усилий в вашем конкретном случае использования, это сработало в моем случае. Я использовал этот пример от @Taifun, чтобы загрузить изображение, и добавил собственные модификации, чтобы получить ссылку для общего доступа. и рендерить в WebViewer.

Я предполагаю, что вы знакомы с API и как их использовать. Я рекомендую сначала протестировать конечные точки в Postman или Insomnia, если вы решите пойти по этому пути. Получив правильные ответы (состояние 200), следуйте примеру, чтобы реализовать вызовы API в AppInventor с помощью метода файла POST компонента Web.

Надеюсь это поможет. Если что-то не понятно, дайте мне знать, и я добавлю больше примечаний.

person Sun Bee    schedule 14.12.2020