Fatal编程技术网
  • android/
  • Android条形码扫描仪与网页的集成

Android条形码扫描仪与网页的集成

android

Android条形码扫描仪与网页的集成,android,webpage,barcode,Android,Webpage,Barcode,我整个上午都在研究如何将android条形码扫描仪应用程序集成到网页中，但还没有找到我需要知道的确切信息。我想有一个网页，用户可以填写文本字段使用安卓条码扫描仪。因此，用户将在网页上，或者单击文本字段内部，或者单击文本字段旁边的按钮，启动android条形码扫描仪。然后，他们将扫描条形码，并填写文本字段 我已经找到了解决方法，可以这样做，然后转到另一个页面，但重要的是用户保持在同一个页面上。我看过zxing项目，认为它可能可以使用，但我不确定它是否允许页面保持不变 我很确定这是可能的，我想知道是

我整个上午都在研究如何将android条形码扫描仪应用程序集成到网页中，但还没有找到我需要知道的确切信息。我想有一个网页，用户可以填写文本字段使用安卓条码扫描仪。因此，用户将在网页上，或者单击文本字段内部，或者单击文本字段旁边的按钮，启动android条形码扫描仪。然后，他们将扫描条形码，并填写文本字段

我已经找到了解决方法，可以这样做，然后转到另一个页面，但重要的是用户保持在同一个页面上。我看过zxing项目，认为它可能可以使用，但我不确定它是否允许页面保持不变

我很确定这是可能的，我想知道是否有人能给我一个他们将如何做的高层次概述。我在想，它可能可以通过一个通过点击按钮提交的ajax请求来完成。ajax请求将被发送到我的服务器，服务器将发送一些东西到android设备，该设备将启动扫描仪并返回数据，这些数据将在ajax响应中返回。有没有办法切断服务器，让android浏览器启动条形码扫描器？谢谢您抽出时间，我很感谢您的讨论

使用javascript界面和加载URL（javascript…），您可以从Android与您的网页进行通信

public void loadScript(String script){      
    webview.loadUrl("javascript:(function() { " + script + "})()");             
}

private class JavaScriptInterface {     
    public void startQRScan() {
        ...
    }
}
谷歌上有很多例子。

（斑马线）提供了通过网页通过按钮点击事件、锚定标记或其他可能调用移动设备上URL的操作启动条形码扫描仪的功能

当条形码扫描仪应用程序安装在android设备上时，URL调用：

zxing://scan/?ret=http://foo.com/products/{CODE}/description&SCAN_FORMATS=UPC_A,EAN_13
将打开设备条形码阅读器，用户扫描代码，然后通过zxing URL中提供的回调URL参数返回代码

您可以在此处查看一个示例（适用于android）：

您可以在android上尝试：

您可以使用Zxing库对网页进行条形码扫描


//整个脚本块应该放在一个单独的文件中，并包含在每个需要扫描仪功能的文档中
函数zxinglistener（e）{
本地存储[“zxingbarcode”]=“”；
if（e.url.split（“\\#”）[0]==window.location.href）{
window.focus（）；
processBarcode（解码组件（例如newValue））；
}
window.removeEventListener（“存储”，zxinglistener，false）；
}
if（window.location.hash！=“”）{
localStorage[“zxingbarcode”]=window.location.hash.substr（1）；
self.close（）；
window.location.href=“about:blank”；//如果禁用self.close
}否则{
addEventListener（“hashchange”，函数（e）{
window.removeEventListener（“存储”，zxinglistener，false）；
var hash=window.location.hash.substr（1）；
如果（哈希！=“”）{
window.location.hash=“”；
processBarcode（解码组件（散列））；
}
}，假）；
}
函数getScan（）{
var href=window.location.href.split（“\\#”）[0]；
window.addEventListener（“存储”，zxinglistener，false）；
zxingWindow=窗口。打开（“zxing://scan/?ret=“+encodeURIComponent（href+”{CODE}”），“u self”）；
}
功能处理条形码（b）{
var d=document.createElement（“div”）；
d、 innerHTML=b；
文件.正文.附件（d）；
}
扫描
供参考：

感谢您的回复。不过我不太明白你的意思。我不太熟悉安卓系统。可以从web页面调用startQRScan方法吗？然后加载视图将其发送回网页？我在谷歌上搜索了一下，明白你的意思了。问题是，我希望通过android浏览器从一个已经开发的网站上实现这一点，我能做的最多改变就是UI和附加javascript。你知道这是否可以在没有网络视图的情况下完成吗？很抱歉，我以为你说的是android方面。我知道phonegap支持条形码扫描仪，但我不知道具体细节。完整地说，可以从您的网页调用StartQScan。通过窗口“name javascriptinterface”.startQRScan，但这意味着您必须在Android中编写代码。如果你愿意，我可以发布完整的Android代码。没关系，这有助于我了解如何实现。不要担心我在谷歌上找到的代码，我需要更多关于可以做什么的想法。接受答案，尽管它不是我需要的，但确实回答了问题。谢谢您的帮助。祝您的项目顺利。是否正在设备浏览器中查看您的网页？或者您正在创建一个包含网络视图的裸体应用程序来显示它？感谢您的回复。正在设备浏览器中查看我的网页。我有一个已经开发的网站。我可以更改UI，也可以添加javascript。不过我对网络视图不太熟悉。它们是否可以用来显示任何网站，以及是否需要对网站进行任何更改？我还可以控制web应用程序的服务器端，并可以在那里添加/修改。我还想说，理想情况下，用户会使用设备浏览器。Google Play app:FAQ:Thank@michael jasper..您的回答帮助我开始在示例网页中集成zxing-回调必须进行URL编码：zxing://scan/?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7BCODE%7D%2Fdescription&SCAN_FORMAT 
 <!DOCTYPE html>
    <script type="text/javascript">
    //This entire block of script should be in a separate file, and included in each doc in which you want scanner capabilities
        function zxinglistener(e){
            localStorage["zxingbarcode"] = "";
            if(e.url.split("\#")[0] == window.location.href){
                window.focus();
                processBarcode(decodeURIComponent(e.newValue));
            }
            window.removeEventListener("storage", zxinglistener, false);
        }
        if(window.location.hash != ""){
            localStorage["zxingbarcode"] = window.location.hash.substr(1);
            self.close();
            window.location.href="about:blank";//In case self.close is disabled
        }else{
            window.addEventListener("hashchange", function(e){
                window.removeEventListener("storage", zxinglistener, false);
                var hash = window.location.hash.substr(1);
                if (hash != "") {
                    window.location.hash = "";
                    processBarcode(decodeURIComponent(hash));
                }
            }, false);
        }
        function getScan(){
            var href = window.location.href.split("\#")[0];
            window.addEventListener("storage", zxinglistener, false);
            zxingWindow = window.open("zxing://scan/?ret=" + encodeURIComponent(href + "#{CODE}"),'_self');
        }

    </script>

    <html>
        <head>
            <script type="text/javascript">
                function processBarcode(b){
                    var d = document.createElement("div");
                    d.innerHTML = b;
                    document.body.appendChild(d);
                }
            </script>
        </head>
        <body>
            <button onclick="getScan()">get Scan</button>
        </body>
    </html>