如何在条码扫描仪的移动 web 应用程序中集成 Phonegap 插件？
Posted
技术标签:
【中文标题】如何在条码扫描仪的移动 web 应用程序中集成 Phonegap 插件？【英文标题】：How to Integrating Phonegap plugin in Mobile web app for Barcode scanner? 【发布时间】：2014-03-14 09:51:19 【问题描述】：我们正在尝试在我们的移动网络应用程序中集成用于条码扫描器的 phonegap 插件。任何人都可以帮助我整合它吗？
我添加了Phonegap.js和cardova.js，插件尝试安装，但它需要很多时间并且没有安装..
这是我的 html 内容
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bar code Reader</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="barcodescanner.js"></script>
<script src="cordova.js"></script>
<script>
$(document).ready(function ()
app.initialize();
);
function clickScan()
console.log("I am now scanning");
window.plugins.barcodeScanner.scan(function (result)
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
, function (error)
alert("Scanning failed: " + error);
);
</script>
</head>
<body>
<button id="scan" style="padding: 10px;" onclick="clickScan">Scan!</button>
</body>
</html>
【问题讨论】：
链接 github 获取条码扫描器 phonegap 插件？ 【参考方案1】：按照以下步骤进行
1.下载安装Node.js
2.在命令提示符$ sudo npm install -g phonegap运行此命令
3.创建一个名为hello$ phonegap create hello com.example.hello HelloWorld的应用程序
4.进入hello目录$ cd hello
5.选择你的平台，我向你展示 ios 你也可以为 android 构建它
$ phonegap build ios
[phonegap] detecting iOS SDK environment...
[phonegap] using the local environment
[phonegap] compiling iOS...
[phonegap] successfully compiled iOS app
6.add你要添加的插件phonegap local plugin add https://github.com/phonegap-build/BarcodeScanner.git
7.要远程编译您的应用程序，请在构建命令前加上附加远程命令：$ phonegap remote install ios
# ...or...
$ phonegap remote run ios
【讨论】：
你能告诉我更多关于如何/在哪里添加这个的细节吗？【参考方案2】：这里是条码扫描器插件使用示例：
<!DOCTYPE HTML>
<html>
<head>
<title>Barcode Scanner DEMO</title>
<script type="text/javascript" src="plugins/plugin-loader.js"></script>
<script type="text/javascript" charset="utf-8">
monaca.viewport(width : 320);
function scanBarcode()
window.plugins.barcodeScanner.scan( function(result)
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
, function(error)
alert("Scanning failed: " + error);
);
</script>
</head>
<hr> BarcodeReader DEMO <hr><br>
<input type="button" onClick ="scanBarcode()" value ="Scan" />
</body>
</html>
【讨论】：
希望您不是在谈论混合应用程序。我可以看到 Monaca 是用于混合应用程序的。我需要在移动设备中插入我的网站（webapp）。以上是关于如何在条码扫描仪的移动 web 应用程序中集成 Phonegap 插件？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 SAP UI5 应用中集成第三方库 ：一个在移动设备上查看 Web 应用打印调试信息的小技巧
如何在 iOS 混合应用程序中集成 card.io sdk？