1.处理的难题：
1.可以在新浪微博顾客端呼起摄像头扫描仪2维码而且分析;
2.可以在原生态访问器和手机微信顾客端中扫描仪2维码而且分析;
2.优势：
web端或是 h5端能够立即进行扫码的工作中；
3.缺陷：
照片不清楚很非常容易分析不成功(照相扫描仪照片必须镜头离2维码的间距很近)，相对 native 呼起的摄像头分析会有1⑵秒的延时。
表明：
此软件必须相互配合zepto.js 或 jQuery.js应用
应用方式：
1.在必须应用的网页页面依照下面次序引进lib文件目录下的 js 文档
<script src="lib/zepto.js"></script>
<script src="lib/qrcode.lib.min.js"></script>
<script src="lib/qrcode.js"></script>
2.自定按钮的 html 款式
为自定的按钮加上自定特性，特性名字为node-type
为 input 按钮加上自定的特性, 特性名字为node-type
由于该软件必须应用<input type="file" /> ，该 html 构造在网页页面上面是有固定不动的显示信息款式，以便可以自定按钮款式，大家能够依照下面的示例编码构造嵌套循环编码
<div>
<div class="qr-btn" node-type="qr-btn">扫描仪2维码1
<input node-type="jsbridge" type="file" name="myPhoto" value="扫描仪2维码1" />
</div>
</div>
随后设定 input 按钮的 css 掩藏按钮，例如我应用的是特性挑选器
input[node-type=jsbridge]{
display:none;
}
这里大家只必须依照自身的必须界定class="qr-btn"的款式便可。
3.在网页页面上原始化 Qrcode 目标
//原始化扫描仪2维码按钮，传入自定的 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 + '<br/>');
});
},
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 + '<br/>');
};
};
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开启手机上扫码作用及优缺陷，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
Copyright © 2002-2020 小程序怎么做_凡科网小程序_微信小程序界面_线上报名小程序_微信小程序页面制作 版权所有 （网站地图） 粤ICP备10235580号