Vue JS外部Android库交互(Zebra)

Question

谈到vue.js，我是一个相对较新的开发人员。我的公司开始开发一套基于Laravel + Jetstream的工具，这些工具在前端使用Vue。

我们还使用Zebra扫描器来移动股票，我正在通过Vue组件将它们的回调功能集成到Laravel中。

Zebra的文档被用作参考：zebra (我必须指出-它可以在我们当前的扫描仪上工作，但这是因为当前的设置没有laravel/Vue -只有vanilla JS)。

下面是我创建的集成文件：

​

<template>
    
</template>

<script>
    export default {
        data () {
            return {
                chars: [], 
                barcode: ''
            }
        },
        methods: {
            //Zebra integration is described here: 
            //https://help.android-kiosk.com/en/article/zebra-tc-series-integration-barcode-scanner-16ox5x7/
            registerForBarcodeScanResults(status) {
                console.log("Registered the zebra thingy");
                if (typeof Android != 'undefined') {
                    //tell KB to return results via JS function
                    Android.useJavaScriptCallbackZebraScanner(status);
                }
            },
            barcodeScanResult(data) {
                this.$emit('scannedBarcode', data)
            }

        },
        created() {
            window.addEventListener('keypress', this.inputCapture);
            this.registerForBarcodeScanResults(true);
        },
        destroyed() {
            window.removeEventListener('keypress', this.inputCapture);
        },
    }
</script>

​

创建后，registerForBarcodeScans将按预期工作并输出到控制台。但是，当执行扫描时，控制台显示：

未捕获的ReferenceError: barcodeScanResult未在以下位置定义:1:1 (匿名)@vm14:1

所以我认为原因是当扫描完成时，回调在安卓设备上启动，但不知道如何到达最初调用它的vue.js框架。

我必须指出的是，我无法访问这个函数的Android文档--它对我来说是一个黑匣子。

所以我的问题是--有没有办法将外部代码指向vue.js文件中声明的方法的方向？我是否需要将Android注册封装到某个虚拟化层中？

我看过很多类似的问题，但问题是这个android函数不是一个API，所以Axios在这里是不适用的。导入似乎也不起作用，因为我导入的不是一个具体的文件，而是一个Android库。另外，我不知道它的结构。

提前谢谢你！

Answer 1

最终的解决方案包括添加

created() {
        window.addEventListener('keypress', this.inputCapture);
        this.registerForBarcodeScanResults(true);
        window.barcodeScanResult = this.barcodeScanResult;
    }

对于上面的代码-显然，在安卓和页面上注册barcodeScanResult函数之间存在脱节，它们必须手动链接。一旦显式设置了作用域，它就可以工作了。