Cordova利用phonegap-plugin-barcodescanner插件实现扫一扫
夏侯弘光
遇到问题用调试工具看一下，也可以自己写一些日志，看下结果:
chrome://inspect/#devices
调用摄像头：cordova plugin add cordova-plugin-camera
根据自己的项目适配版本，调用扫一扫：cordova plugin add phonegap-plugin-barcodescanner
git上插件太新，不兼容项目，一天都没整明白，后来丁老师告知版本问题，心累啊
index.html如下所示：
<body>
<div class="app">
<div class="line"><button id="openLabrary">按钮</button></div>
<div class="line"><img id="myImage" style="height: 200px;"></img></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>index.js如下所示：
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
onDeviceReady: function() {
this.receivedEvent();
},
$$: function(id) {
return document.getElementById(id);
},
receivedEvent: function() {
var getDomLabrary = this.$$('openLabrary');
var _this = this;
getDomLabrary.onclick = function() {
cordova.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);
},
{
preferFrontCamera : false, // iOS and Android
showFlipCameraButton : true, // iOS and Android
showTorchButton : true, // iOS and Android
torchOn: true, // Android, launch with the torch switched on (if available)
saveHistory: true, // Android, save scan history (default false)
prompt : "Place a barcode inside the scan area", // Android
resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
disableAnimations : true, // iOS
disableSuccessBeep: false // iOS and Android
}
);
}
}
};
app.initialize();另附加采用Framework7框架实现的页面：
<!--suppress ALL -->
<template>
<div>
<div class="list" style="margin: 0.35rem 0.1rem">
<ul>
<li>
<a href="/developing/" class="item-link item-content">
<img src="./img/me/d_me.png" style="width:15%; padding: 0.1rem 0;"/>
<div class="item-inner">
<div class="item-title">
<div class="item-header" style="font-weight: bold;font-size: 0.16rem;padding: 0.1rem 0;">{{name}}</div>
<div class="item-footer" style="font-size: 0.16rem;padding-bottom: 0.1rem;">{{role}}</div>
</div>
<div class="item-after">
<i class="f7-icons">right</i>
</div>
</div>
</a>
</li>
</ul>
</div>
<!--<div class="list" style="margin: 0.35rem 0.1rem">-->
<!--<ul>-->
<!--<li>-->
<!--<a href="/tabs-routable/tab3/" class="item-link item-content">-->
<!--<img src="./img/me/gb14.png" style="padding: 0.1rem 0;"/>-->
<!--<div class="item-inner">-->
<!--<div class="item-header" style="font-weight: bold;font-size: 0.16rem;padding: 0.1rem 0;">我的收藏</div>-->
<!--</div>-->
<!--</a>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<div class="list" style="margin: 0.35rem 0.1rem">
<ul>
<li style="border-bottom: 0.01rem solid #0000004a;">
<a class="item-link item-content">
<img src="./img/me/gb14.png" style="padding: 0.1rem 0;"/>
<div class="item-inner">
<div class="item-header" id="sys" style="font-weight: bold;font-size: 0.16rem;padding: 0.1rem 0;">扫一扫</div>
</div>
</a>
</li>
<li>
<a href="/developing/" class="item-link item-content">
<img src="./img/me/gb14.png" style="padding: 0.1rem 0;"/>
<div class="item-inner">
<div class="item-header" style="font-weight: bold;font-size: 0.16rem;padding: 0.1rem 0;">用户注册</div>
</div>
</a>
</li>
</ul>
</div>
<div class="list" style="margin: 0.35rem 0.1rem">
<ul>
<li><a id="exit_login" href="#" class="list-button item-link color-red">退出登录</a></li>
</ul>
<!--<ul>-->
<!--<li>-->
<!--<a id="exit_login" href="#" class="item-link item-content">-->
<!--<img src="./img/me/gb14.png" style="padding: 0.1rem 0;"/>-->
<!--<div class="item-inner">-->
<!--<div class="item-header" style="font-weight: bold;font-size: 0.16rem;padding: 0.1rem 0;">退出登录</div>-->
<!--</div>-->
<!--</a>-->
<!--</li>-->
<!--</ul>-->
</div>
</div>
</template>
<script>
return {
data: function () {
var user_info = getUserInfo();
//console.log(user_info);
return {
name:user_info.user_name,
role:user_info.role_name,
phone:user_info.mobile_phone,
company:user_info.unit_name,
};
},
methods: {
tab_entry: function(component){
$$('#exit_login').on('click', function(){
dialog_confirm(NOTICE_MSG.CONFIRM_LOGOUT_MSG, function(){
debug_out('exit app by logout');
signOut();
}, function(){});
});
$$('#sys').on('click', function(){
cordova.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);
},
{
preferFrontCamera : false, // iOS and Android
showFlipCameraButton : true, // iOS and Android
showTorchButton : true, // iOS and Android
torchOn: true, // Android, launch with the torch switched on (if available)
saveHistory: true, // Android, save scan history (default false)
prompt : "Place a barcode inside the scan area", // Android
resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
disableAnimations : true, // iOS
disableSuccessBeep: false // iOS and Android
}
);
});
}
},
on: {
tabInit: function () {
$$('.title').text('我');
$$('.tab-order-filter').hide();
this.tab_entry(this);
}
}
}
</script>
类似资料：