首先感谢jsqrcode的开发者，提供这么优秀的解析二维码的代码，为我减少了很大的工作量。jsqrcode地址：点我

 

　　我的代码库地址：点我

 

　　1.解决的问题：

 

　　1.能够在微博客户端呼起摄像头扫描二维码并且解析;

 

　　2.能够在原生浏览器和微信客户端中扫描二维码并且解析;

 

　　2.优点：

 

　　web端或者是h5端可以直接完成扫码的工作；

 

　　3.缺点：

 

　　图片不清晰很容易解析失败(拍照扫描图片需要镜头离二维码的距离很近)，相对于native呼起的摄像头解析会有1-2秒的延时。

 

　　说明：

 

　　此插件需要配合zepto.js或者jQuery.js使用

 

　　使用方法：

 

　　1.在需要使用的页面按照下面顺序引入lib目录下的js文件

 

　　复制代码

 

　　代码如下:

 

　　<scriptsrc="lib/zepto.js"></script>

 

　　<scriptsrc="lib/qrcode.lib.min.js"></script>

 

　　<scriptsrc="lib/qrcode.js"></script>

 

　　2.自定义按钮的html样式

 

　　因为该插件需要使用<inputtype="file"/>，该html结构在网页上面是有固定的显示样式，为了能够自定义按钮样式，我们可以按照下面的示例代码结构嵌套代码

 

　　复制代码

 

　　代码如下:

 

　　<pclass="qr-btn"node-type="jsbridge">扫描二维码1

 

　　<inputnode-type="jsbridge"type="file"name="myPhoto"value="扫描二维码1"/>

 

　　</p>

 

　　然后设置input按钮的css隐藏按钮，比如我使用的是属性选择器

 

　　复制代码

 

　　代码如下:

 

　　input[node-type=jsbridge]{

 

　　visibility:hidden;

 

　　}

 

　　这里我们只需要按照自己的需要定义class="qr-btn"的样式即可。

 

　　3.在页面上初始化Qrcode对象

 

　　复制代码

 

　　代码如下:

 

　　//初始化扫描二维码按钮，传入自定义的node-type属性

 

　　$(function(){

 

　　Qrcode.init($('[node-type=jsbridge]'));

 

　　});

 

　　主要代码解析

 

　　复制代码

 

　　代码如下:

 

　　

 

　　

 

　　

 

　　(function($){

 

　　varQrcode=function(tempBtn){

 

　　//该对象只支持微博域下的解析，也就是说不是微博域下的页面只能用第二种方案解析二维码

 

　　if(window.WeiboJSBridge){

 

　　$(tempBtn).on('click',this.weiBoBridge);

 

　　}else{

 

　　$(tempBtn).on('change',this.getImgFile);

 

　　}

 

　　};

 

　　Qrcode.prototype={

 

　　weiBoBridge:function(){

 

　　WeiboJSBridge.invoke('scanQRCode',null,function(params){

 

　　//得到扫码的结果

 

　　location.href=params.result;

 

　　});

 

　　},

 

　　getImgFile:function(){

 

　　var_this_=this;

 

　　varimgFile=$(this)[0].files;

 

　　varoFile=imgFile[0];

 

　　varoFReader=newFileReader();

 

　　varrFilter=/^(?: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){

 

　　//得到扫码的结果

 

　　location.href=data;

 

　　};

 

　　};

 

　　oFReader.readAsDataURL(oFile);

 

　　},

 

　　destory:function(){

 

　　$(tempBtn).off('click');

 

　　}

 

　　};

 

　　//初始化

 

　　Qrcode.init=function(tempBtn){

 

　　var_this_=this;

 

　　varinputDom;

 

　　tempBtn.each(function(){

 

　　new_this_($(this));

 

　　});

 

　　$('[node-type=qr-btn]').on('click',function(){

 

　　$(this).find('[node-type=jsbridge]')[0].click();

 

　　});

 

　　};

 

　　window.Qrcode=Qrcode;

 

　　})(window.Zepto?Zepto:jQuery);







本文转载自中文网