Заставить поданный файл работать на Android nativescript vue webview - PullRequest
1 голос
/ 01 октября 2019

Полное решение для VUE на Детская площадка .


Я создаю приложение с помощью NativeScript Vue и использую веб-просмотр в качестве основного компонента. На загруженном веб-сайте есть поле ввода файла для захвата ввода с камеры.

Отлично работает на устройствах iOS, но на Android поле ввода не работает.

Кто-нибудь знает решение? заставить поля ввода файлов работать в веб-браузере Android?

Я использую версию tns-android: 6.1.1

Обновление 1

На какой платформе яЯ использовал?

  • Android
  • 10.0
  • эмулятор. Пиксель 3a

Больше информации о стеке:

  • CLI: 6.1.2
  • nodejs: v10.16.0
  • tns-core-modules: tns-core-modules@6.1.1
  • Runtime (s):

    "tns-android": {"version": "6.1. 1 "}," tns-ios ": {" version ":" 6.1.0 "}

  • Плагин (ы):

"зависимости": {

"@nota/nativescript-webview-ext": "^5.4.1",

"@nstudio/nativescript-camera-plus": "^2.2.6",

"axios": "^0.19.0",

"js-cookie": "^2.2.1",

"nativescript-camera": "^4.5.0",

"nativescript-geolocation": "^5.1.0",

"nativescript-plugin-firebase": "^9.1.1",

"nativescript-theme-core": "^1.0.6",

"nativescript-ui-sidedrawer": "^7.0.2",

"nativescript-vue": "~2.4.0",

"net": "^1.0.2",

"rxjs": "^6.5.3",

"tns-core-modules": "~6.1.0",

"vuex": "^3.1.1"

},

"devDependencies": {

"@babel/core": "~7.1.0",

"@babel/preset-env": "~7.1.0",

"babel-loader": "~8.0.0",

"nativescript-dev-webpack": "~1.2.0",

"nativescript-vue-template-compiler": "~2.4.0",

"node-sass": "^4.7.1",

"vue-loader": "~15.4.0"

},

В моем файле Vue (куда загружается веб-представление) я загружаю веб-сайт следующим образом:

<webview    @loaded="onWebViewLoaded" :src="webViewSrc"
                     :builtInZoomControls="false"
                     :displayZoomControls="false"
                     :debugMode="true"
/>

А затем в onWebViewLoaded Я пытаюсь сделать это: let myWebChromeClientClass =androidVm.webkit.WebChromeClient.extend ({

                    onShowFileChooser: function (WebView, ValueCallback, FileChooserParams) {
                        // FileChooserParams.createIntent()

                        camera.takePicture() // Using nativescript-camera
                            .then(function (imageAsset) {
                                console.log("Result is an image asset instance");
                                var image = new Image();
                                image.src = imageAsset;
                                console.log(image)
                            }).catch(function (err) {
                            console.log("Error -> " + err.message);
                        });

                        return false
                    }
                });
                let myWebChromeClient = new myWebChromeClientClass();
                webView.android.setWebChromeClient(myWebChromeClient);

В настоящее время я изо всех сил стараюсь заставить камеру nativescript вести себя после съемки (всегда возвращает 'отменено'), но я знаю, что есть способпоказать исходный выбор файла ввода с помощью FileChooserParams, но я не могу сделать эту работу, как ближайшее решение, которое яМы нашли в сети для Java и не совсем уверены, как преобразовать это в Javascript / Vue.

Есть еще идеи?

1 Ответ

1 голос
/ 01 октября 2019

Вам нужно будет расширить android.webkit.WebChromeClient и назначить то же самое для nativeView.

Вам нужно будет реализовать onShowFileChooser метод, обработать выбор файла с помощью Intent или чего-то еще.

...