HTML5+规范：barcode(条码扫描)

参考资料： http://blog.csdn.net/qq_27626333/article/details/51815121

今天做了个html5调用摄像头访问二维码的功能，调了一天终于通啦，嘎嘎： 步骤： 1、下载mui.min.js，放在项目中 2、index.html页面引用：

<script src="Scripts/mui.min.js"></script>

3、tab-ScanCode.html页面代码：

<ion-view class="tzgg" hide-nav-bar="true"> <ion-content class="erweima"> <div class="module"> <div class="content"> <div> <div id="bcid"></div> </div> </div> </div> </ion-content> <div class="fixbtn"> <span ng-click="cancelScanDo()"><i class="ion-ios-barcode-outline" id="cancelScan" ></i ><b>取消扫描</b></span> </div> </ion-view>

4、ScanCodeCtrl代码：

ctr.controller('ScanCodeCtrl', ['$scope', '$location', 'dataService', '$window', '$ionicPopup', '$ionicBackdrop', function($scope, $location, dataService, $window, $ionicPopup, $ionicBackdrop) { setStyle(); //mui初始化 mui.init(); // mui.init({ // swipeBack: true //启用右滑关闭功能 // }); var scan = null; var isOpen = false; // 闪光灯是否开始标志 true:闪光灯已经开启 false:闪光灯关闭 // 条码识别成功事件 function onmarked(type, result) { var text = '未知: '; switch(type) { case plus.barcode.QR: text = 'QR: '; // 二维码 break; case plus.barcode.EAN13: text = 'EAN13: '; break; case plus.barcode.EAN8: text = 'EAN8: '; break; } alert(text + result); //关闭界面，返回首页 scan.close(); //关闭扫描scan $window.location.href = "#/tab/shouye"; } // 创建扫描控件 function startRecognize() { scan = new plus.barcode.Barcode('bcid'); //scan.start(); scan.onmarked = onmarked; } function setStyle() { $("#bcid").width($(window).width()); $("#bcid").height($(window).height() - 70); } // 开始扫描 function StartDo() { startRecognize(); scan.start(); } //开始扫描 $scope.$on('$ionicView.afterEnter', function() { StartDo(); }) //取消扫描 $scope.cancelScanDo = function() { if(scan != null) { scan.close(); //关闭扫描scan } $window.location.href = "#/tab/shouye"; } }])

注：以下代码很重要，如果不加$scope.$on('$ionicView.afterEnter', function() { }）；的话，第一次可以显示扫描的摄像头，第二次再点击，则不显示了。加上上面的代码即可了。具体的也没太搞懂，貌似是页面加载完成后再执行的东西。

//开始扫描 $scope.$on('$ionicView.afterEnter', function() { StartDo(); })