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

Posted 2023-04-14

【中文标题】如何使用 NativeScript-vue 中的 BarcodeScanner 插件

【英文标题】：How to use BarcodeScanner plugin from NativeScript-vue

【发布时间】：2020-08-20 15:10:10

【问题描述】：

我是 NativeScript 的初学者，需要扫描二维码。我尝试将 nativescript-barcodescanner 插件与 Vue.js 一起使用，但我不能，运行所有演示时出错。我试图找到示例，但没有找到任何帮助。

我根据demo-vue写了这段代码，但是也没用：

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

        <StackLayout>
            <Button text="back camera" @tap="doScanWithBackCamera"></Button>
            <BarcodeScanner
                row="1"
                
                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>

构建demo-vue的错误是：

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

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

【问题讨论】：

您是否按照文档中的说明注册了元素？你遇到了什么错误？

[20-05-05 17:05:27.098] 构建失败。执行 webpack 失败，退出代码为 2。

我们需要完整的错误日志，而不仅仅是最后一行。

如果我尝试构建项目，错误仅此而已。

您不能将条形码扫描器插件与预览应用程序一起使用，您应该构建应用程序。

【参考方案1】：

Vue 版本的 BarcodeScanner 演示。

主要问题是：demo是针对旧版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项目

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

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

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

使用 vue 演示项目中的 App.vue 文件

【讨论】：

谢谢大佬，但现在在调试模式下创建应用程序时出现另一个错误，我替换了问题中的错误

共享您的存储库。这些都是安装错误。你最好使用tns doctor和tns info。例如：TS2688：找不到“节点”的类型定义文件。使用 npm install @types/node --save