1.解決的問題：

1.能夠在微部落格戶端呼起攝像頭掃描二維碼並且解析;
2.能夠在原生瀏覽器和微信客戶端中掃描二維碼並且解析;

2.優點：

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

3.缺點：

圖片不清晰很容易解析失敗(拍照掃描圖片需要鏡頭離二維碼的距離很近)，相對於 native 呼起的攝像頭解析會有1-2秒的延時。

說明：

此外掛需要配合zepto.js 或者 jQuery.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><divclass="qr-btn"
 
node-type="qr-btn">掃描二維碼1
            <inputnode-type="jsbridge"type="file"name="myPhoto"value="掃描二維碼1"/></div></div>

然後設定 input 按鈕的 css 隱藏按鈕，比如我使用的是屬性選擇器

input[node-type=jsbridge]{
    display:none;}

這裡我們只需要按照自己的需要定義class="qr-btn"的樣式即可。

3.在頁面上初始化 Qrcode 物件

//初始化掃描二維碼按鈕，傳入自定義的 node-type 屬性
 

    $(function(){Qrcode.init($('[node-type=qr-btn]'));});

主要程式碼解析

(function($){varQrcode=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 =newFileReader();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);