如何使用NativeScript-vue中的BarcodeScanner插件

问题描述 投票：-2回答：1

我是NativeScript的初学者，需要扫描QR码。我尝试将Nativescript-barcodescanner插件与Vue.js一起使用，但不能，运行所有演示时发生错误。我尝试查找示例，但没有任何帮助。

我是基于demo-vue编写此代码的，但是它也没有用：

<template>
    <Page>
        <ActionBar title="BarcodeScanner demo"></ActionBar>

        <StackLayout>
            <Button text="back camera" @tap="doScanWithBackCamera"></Button>
            <BarcodeScanner
                row="1"
                height="300"
                formats="QR_CODE, EAN_13, UPC_A"
                beepOnScan="true"
                reportDuplicates="true"
                preferFrontCamera="false"
                @scanResult="onScanResult">
            </BarcodeScanner>

        </StackLayout>
    </Page>
</template>

<script>
    var BarcodeScanner = require("nativescript-barcodescanner").BarcodeScanner;

    export default {
        data() {
            return {

            }
        },
        methods: {
            onScanResult(evt) {
                console.log(`onScanResult: ${evt.text} (${evt.format})`);
            },
            doScanWithBackCamera() {
                this.scan();
            },
            scan() {
                var barcodescanner = new BarcodeScanner();
                barcodescanner.scan({
                cancelLabel: "EXIT. Also, try the volume buttons!", // iOS only, default 'Close'
                cancelLabelBackgroundColor: "#333333", // iOS only, default '#000000' (black)
                message: "Use the volume buttons for extra light", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
                showFlipCameraButton: true,   // default false
                showTorchButton: true,        // iOS only, default false
                resultDisplayDuration: 500,   // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
                beepOnScan: true,             // Play or Suppress beep on scan (default true)
                openSettingsIfPermissionWasPreviouslyDenied: true, // On iOS you can send the user to the settings app if access was previously denied
                closeCallback: () => {
                    console.log("Scanner closed @ " + new Date().getTime());
                }
                }).then(
                    function (result) {
                    console.log("--- scanned: " + result.text);
                    // Note that this Promise is never invoked when a 'continuousScanCallback' function is provided
                    setTimeout(function () {
                        // if this alert doesn't show up please upgrade to {N} 2.4.0+
                        alert({
                        title: "Scan result",
                        message: "Format: " + result.format + ",\nValue: " + result.text,
                        okButtonText: "OK"
                        });
                    }, 500);
                    },
                    function (errorMessage) {
                    console.log("No scan. " + errorMessage);
                    }
                );
            }
        }
    }
</script>

<style scoped>
  ActionBar {
    background-color: #53ba82;
    color: #ffffff;
  }
</style>

错误是：

2020-05-05 17:33:47.416 nsplaydev[334:30963] ***** Fatal JavaScript exception - application has been terminated. *****
2020-05-05 17:33:47.416 nsplaydev[334:30963] Native stack trace:
1   0x101952928 NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2   0x10199d058 -[TNSRuntime executeModule:referredBy:]
3   0x102a7a25c -[UIApplication(PlayLiveSync) swizzled_executeModule:]
4   0x100f9b524
5   0x1938f28e0 <redacted>
2020-05-05 17:33:47.422 nsplaydev[334:30963] JavaScript stack trace:
2020-05-05 17:33:47.423 nsplaydev[334:30963] file:///app/vendor.js:689:65
at ../node_modules/nativescript-barcodescanner/barcodescanner.js(file:///app/vendor.js:691:2)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at ../node_modules/babel-loader/lib/index.js!../node_modules/vue-loader/lib/index.js?!./components/New.vue?vue&type=script&lang=js&(file:///app/bundle.js:161:41)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at ./components/New.vue?vue&type=script&lang=js&(file:///app/bundle.js:981:205)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at ./components/New.vue(file:///app/bundle.js:929:110)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at ../node_modules/babel-loader/lib/index.js!../node_modules/vue-loader/lib/index.js?!./components/Home.vue?vue&type=script&lang=js&(file:///app/bundle.js:13:81)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at ./components/Home.vue?vue&type=script&lang=js&(file:///app/bundle.js:892:206)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at ./components/Home.vue(file:///app/bundle.js:840:111)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at file:///app/bundle.js:765:93
at ./app.js(file:///app/bundle.js:815:34)
at __webpack_require__(file:///app/runtime.js:751:34)
at checkDeferredModules(file:///app/runtime.js:44:42)
at webpackJsonpCallback(file:///app/runtime.js:31:39)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation([native code])
at [native code]
at asyncFunctionResume([native code])
at [native code]
at promiseReactionJob([native code])
2020-05-05 17:33:47.423 nsplaydev[334:30963] JavaScript error:
file:///app/vendor.js:689:65: JS ERROR ReferenceError: Can't find variable: QRCodeReaderDelegate
2020-05-05 17:33:47.430 nsplaydev[334:30963] PlayLiveSync: Uncaught Exception
2020-05-05 17:33:47.431 nsplaydev[334:30963] *** JavaScript call stack:
(

)
2020-05-05 17:33:47.432 nsplaydev[334:30963] *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: ReferenceError: Can't find variable: QRCodeReaderDelegate
 at
file:///app/vendor.js:689:65
at ../node_modules/nativescript-barcodescanner/barcodescanner.js(file:///app/vendor.js:691:2)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at ../node_modules/babel-loader/lib/index.js!../node_modules/vue-loader/lib/index.js?!./components/New.vue?vue&type=script&lang=js&(file:///app/bundle.js:161:41)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at ./components/New.vue?vue&type=script&lang=js&(file:///app/bundle.js:981:205)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at ./components/New.vue(file:///app/bundle.js:929:110)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at ../node_modules/babel-loader/lib/index.js!../node_modules/vue-loader/lib/index.js?!./components/Home.vue?vue&type=script&lang=js&(file:///app/bundle.js:13:81)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at ./components/Home.vue?vue&type=script&lang=js&(file:///app/bundle.js:892:206)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at ./components/Home.vue(file:///app/bundle.js:840:111)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at file:///app/bundle.js:765:93
at ./app.js(file:///app/bundle.js:815:34)
at __webpack_require__(file:///app/runtime.js:751:34)
at checkDeferredModules(file:///app/runtime.js:44:42)
at webpackJsonpCallback(file:///app/runtime.js:31:39)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation([native code])
at [native code]
at asyncFunctionResume([native code])
at [native code]
at promiseReactionJob([native code])
', reason: '(null)'
*** First throw call stack:
(0x193ea3180 0x19307b9f8 0x101952e00 0x10199d058 0x102a7a25c 0x100f9b524 0x1938f28e0)
libc++abi.dylib: terminating with uncaught exception of type NSException
2020-05-05 17:33:47.433 nsplaydev[334:30963] PlayLiveSync: Uncaught Exception

[我希望有人向我解释如何使用该插件，否则，如果有人有一个可以帮助我的示例，否则，如果他们知道另一个更易于使用的插件。

vue.js nativescript qr-code barcode-scanner nativescript-vue
1个回答
0
投票

BarcodeScanner演示的Vue版本。

主要问题是：该演示适用于旧版本的nativescript

https://github.com/EddyVerbruggen/nativescript-barcodescanner/tree/master/demo-vue

当前应用程序与NativeScript CLI 6.0不兼容。使用tns migrate命令将应用程序依赖项迁移到与NativeScript 6.0兼容的表单。

先运行tns migrate，然后再运行tns doctor

tns医生会说：更新可用于组件tns-core-modules。

删除平台并重新安装

tns platform remove android
tns platform add android

您的package.json文件，应包含

"nativescript-barcodescanner": "^3.4.2",

运行tns debug android --no-hmr并检查您的控制台是否有错误。

为了重新开始，您应该始终喜欢：

1。使用quick start启动nativescript-vue项目

  1. 使用npm i nativescript-barcodescanner或yarn add nativescript-barcodescanner安装插件

  2. 将以下行添加到您的main.ts文件中。 （在所有导入行之后）

Vue.registerElement('BarcodeScanner', () => require('nativescript-barcodescanner').BarcodeScannerView)
  1. 使用vue演示项目中的App.vue文件
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.