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

Question

I am a beginner in NativeScript and need to scan a QR code. I tried to use the nativescript-barcodescanner plug-in with Vue.js and I couldn't, an error occurred while running all the demos. I tried to find examples, but I found nothing to help me.

I wrote this code based on the demo-vue, but it also didn't work:

<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>

The error to build demo-vue is:

[20-05-06 11:10:12.631] (CLI) ERROR in C:\NativeScript\nativescript-barcodescanner-master\demo-vue\tsconfig.json
[20-05-06 11:10:12.631] (CLI) [tsl] ERROR
[20-05-06 11:10:12.631] (CLI)       TS2688: Cannot find type definition file for 'node'.
[20-05-06 11:10:12.631] (CLI) ERROR in C:\NativeScript\nativescript-barcodescanner-master\src\barcodescanner.ts
[20-05-06 11:10:12.631] (CLI) C:/NativeScript/nativescript-barcodescanner-master/src/barcodescanner.ts
[20-05-06 11:10:12.631] (CLI) [tsl] ERROR in C:\NativeScript\nativescript-barcodescanner-master\src\barcodescanner.ts(2,59)
[20-05-06 11:10:12.631] (CLI)       TS2307: Cannot find module 'tns-core-modules/application'.
[20-05-06 11:10:12.631] (CLI) ERROR in C:\NativeScript\nativescript-barcodescanner-master\src\barcodescanner.ts
[20-05-06 11:10:12.631] (CLI) C:/NativeScript/nativescript-barcodescanner-master/src/barcodescanner.ts
[20-05-06 11:10:12.631] (CLI) [tsl] ERROR in C:\NativeScript\nativescript-barcodescanner-master\src\barcodescanner.ts(3,28)
[20-05-06 11:10:12.631] (CLI)       TS2307: Cannot find module 'tns-core-modules/application'.
[20-05-06 11:10:12.631] (CLI) ERROR in C:\NativeScript\nativescript-barcodescanner-master\src\barcodescanner.ts
[20-05-06 11:10:12.631] (CLI) C:/NativeScript/nativescript-barcodescanner-master/src/barcodescanner.ts
[20-05-06 11:10:12.631] (CLI) [tsl] ERROR in C:\NativeScript\nativescript-barcodescanner-master\src\barcodescanner.ts(4,24)
[20-05-06 11:10:12.631] (CLI)       TS2307: Cannot find module 'tns-core-modules/utils/utils'.
[20-05-06 11:10:12.631] (CLI) ERROR in C:\NativeScript\nativescript-barcodescanner-master\src\barcodescanner-common.ts
[20-05-06 11:10:12.631] (CLI) [tsl] ERROR in C:\NativeScript\nativescript-barcodescanner-master\src\barcodescanner-common.ts(1,29)
[20-05-06 11:10:12.631] (CLI)       TS2307: Cannot find module 'tns-core-modules/ui/content-view'.
[20-05-06 11:10:12.631] (CLI) ERROR in C:\NativeScript\nativescript-barcodescanner-master\src\barcodescanner-common.ts
[20-05-06 11:10:12.631] (CLI) [tsl] ERROR in C:\NativeScript\nativescript-barcodescanner-master\src\barcodescanner-common.ts(2,26)
[20-05-06 11:10:12.631] (CLI)       TS2307: Cannot find module 'tns-core-modules/ui/core/properties'.
[20-05-06 11:10:12.631] (CLI) ERROR in C:\NativeScript\nativescript-barcodescanner-master\src\barcodescanner-common.ts
[20-05-06 11:10:12.631] (CLI) [tsl] ERROR in C:\NativeScript\nativescript-barcodescanner-master\src\barcodescanner-common.ts(3,34)
[20-05-06 11:10:12.631] (CLI)       TS2307: Cannot find module 'tns-core-modules/ui/core/view-base'.
[20-05-06 11:10:12.631] (CLI) ERROR in C:\NativeScript\nativescript-barcodescanner-master\src\barcodescanner-common.ts
[20-05-06 11:10:12.631] (CLI) [tsl] ERROR in C:\NativeScript\nativescript-barcodescanner-master\src\barcodescanner-common.ts(199,42)
[20-05-06 11:10:12.631] (CLI)       TS2354: This syntax requires an imported helper but module 'tslib' cannot be found.
[20-05-06 11:10:13.831] Build failed. Executing webpack failed with exit code 2.

I would like someone to explain to me how to use the plugin, else if someone has an example that can help me, else if they know another plugin that is easier to use.

Answer 1

Vue version of BarcodeScanner demo.

The main problem is: the demo is for old version of nativescript

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

The current application is not compatible with NativeScript CLI 6.0. Use the tns migrate command to migrate the app dependencies to a form compatible with NativeScript 6.0.

Run tns migrate then tns doctor

tns doctor will say: Update available for component tns-core-modules.

Remove platforms and reinstall

tns platform remove android
tns platform add android

your package.json file it should include

"nativescript-barcodescanner": "^3.4.2",

Run tns debug android --no-hmr and check your console for errors.

---

For a fresh start you should always prefer:

1.Starting the nativescript-vue project using quick start

2. Install Plugin using npm i nativescript-barcodescanner or yarn add nativescript-barcodescanner

3. Add the following line to your main.ts file. (after all import lines)

Vue.registerElement('BarcodeScanner', () => require('nativescript-barcodescanner').BarcodeScannerView)

4. Use App.vue file from vue demo project