這篇文章主要介紹了HTML5開啟手機掃碼功能及優缺點的相關HTML5資料,對HTML5感興趣的朋友可以參考下
#1.解決的問題：
1.能夠在微博客戶端呼起相機掃描二維碼並且解析;
2.能夠在原生瀏覽器和微信客戶端中掃描二維碼並且解析;
2.優點：
web端或是h5端可以直接完成掃碼的工作；
3.缺點：
圖片不清晰很容易解析失敗(拍照掃描圖片需要鏡頭離二維碼的距離很近)，相對於native 呼起的相機解析會有1-2秒的延遲。
說明：
此外掛程式需要配合zepto.js 或jQuery.js使用
##使用方法：
1.在需要使用的頁面按照下面順序引入lib目錄下的js 檔案
#
，該html 結構在網頁上面是有固定的顯示樣式，為了能夠自訂按鈕樣式，我們可以按照下面的範例程式碼結構嵌套程式碼
扫描二维码1
input[node-type=jsbridge]{ display:none; }
#
//初始化扫描二维码按钮，传入自定义的 node-type 属性 $(function() { Qrcode.init($('[node-type=qr-btn]')); });
(function($) { var Qrcode = function(tempBtn) { var _this_ = this; var isWeiboWebView = /weibo/.test(navigator.userAgent); if (isWeiboWebView) { if (window.WeiboJSBridge) { _this_.bridgeReady(tempBtn); } else { document.addEventListener('WeiboJSBridgeReady', function() { _this_.bridgeReady(tempBtn); }); } } else { _this_.nativeReady(tempBtn); } }; Qrcode.prototype = { nativeReady: function(tempBtn) { $('[node-type=jsbridge]',tempBtn).on('click',function(e){ e.stopPropagation(); }); $(tempBtn).bind('click',function(e){ $(this).find('input[node-type=jsbridge]').trigger('click'); }); $(tempBtn).bind('change', this.getImgFile); }, bridgeReady: function(tempBtn) { $(tempBtn).bind('click', this.weiBoBridge); }, weiBoBridge: function() { window.WeiboJSBridge.invoke('scanQRCode', null, function(params) { //得到扫码的结果 $('.result-qrcode').append(params.result + '
'); }); }, getImgFile: function() { var _this_ = this; var inputDom = $(this).find('input[node-type=jsbridge]'); var imgFile = inputDom[0].files; var oFile = imgFile[0]; var oFReader = new FileReader(); var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; if (imgFile.length === 0) { return; } if (!rFilter.test(oFile.type)) { alert("选择正确的图片格式!"); return; } oFReader.onload = function(oFREvent) { qrcode.decode(oFREvent.target.result); qrcode.callback = function(data) { //得到扫码的结果 $('.result-qrcode').append(data + '
'); }; }; oFReader.readAsDataURL(oFile); }, destory: function() { $(tempBtn).off('click'); } }; Qrcode.init = function(tempBtn) { var _this_ = this; tempBtn.each(function() { new _this_($(this)); }); }; window.Qrcode = Qrcode; })(window.Zepto ? Zepto : jQuery);
總結
以上所述是小編給大家介紹的HTML5開啟手機掃碼功能及優缺點，希望對大家有幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對PHP中文網路的支持！相關推薦：
以上是HTML5開啟手機掃碼功能及優缺點_html5教學技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
