HTML5 enables mobile phone scanning function and its advantages and disadvantages_html5 tutorial skills-HTML Tutorial-php.cn

HTML5 enables mobile phone scanning function and its advantages and disadvantages_html5 tutorial skills

韦小宝

Release： 2017-12-16 11:43:34

Original

3971 people have browsed it

This article mainly introduces HTML5 information about opening the mobile phone code scanning function and its advantages and disadvantages. Friends who are interested in HTML5 can refer to the following

1. Problems solved:

1. Can use the camera to scan the QR code in the Weibo client and parse it;

2. Can scan the QR code in the native browser and WeChat client QR code and parse it;

2. Advantages:

The web side or h5 side can directly complete the QR code scanning work;

3. Disadvantages:

The picture is not clear and it is easy to fail to parse (taking pictures to scan the picture requires the lens to be very close to the QR code), compared to There will be a 1-2 second delay in camera analysis when called by native.

Instructions:

This plug-in needs to be used with zepto.js or jQuery.js

Instructions for use:

1. In the page that needs to be used, introduce the js files in the lib directory in the following order

    <script src="lib/zepto.js"></script>
    <script src="lib/qrcode.lib.min.js"></script>
    <script src="lib/qrcode.js"></script>

Copy after login

2. Customize the button HTML style

Add custom attributes for the custom button, the attribute name is node-type

Add custom attributes for the input button, the attribute name is node-type

Because this plug-in needs to use <input type="file" /> , the html structure has a fixed display style on the web page. In order to customize the button style, we can follow the following Sample code structure nested code

 <p>
        <p class="qr-btn" node-type="qr-btn">扫描二维码1
            <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
        </p>
    </p>

Copy after login

Then set the css of the input button to hide the button, for example, I use the attribute selection Device

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

Copy after login

Here we only need to define the style of class="qr-btn" according to our own needs.

3. Initialize Qrcode on the page Object

 //初始化扫描二维码按钮，传入自定义的 node-type 属性
    $(function() {
        Qrcode.init($(&#39;[node-type=qr-btn]&#39;));
    });

Copy after login

Main code analysis

(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(&#39;WeiboJSBridgeReady&#39;, function() {
                    _this_.bridgeReady(tempBtn);
                });
            }
        } else {
            _this_.nativeReady(tempBtn);
        }
    };
    Qrcode.prototype = {
        nativeReady: function(tempBtn) {
            $(&#39;[node-type=jsbridge]&#39;,tempBtn).on(&#39;click&#39;,function(e){
                e.stopPropagation();
            });
            $(tempBtn).bind(&#39;click&#39;,function(e){
                $(this).find(&#39;input[node-type=jsbridge]&#39;).trigger(&#39;click&#39;);
            });
            $(tempBtn).bind(&#39;change&#39;, this.getImgFile);
        },
        bridgeReady: function(tempBtn) {
            $(tempBtn).bind(&#39;click&#39;, this.weiBoBridge);
        },
        weiBoBridge: function() {
            window.WeiboJSBridge.invoke(&#39;scanQRCode&#39;, null, function(params) {
                //得到扫码的结果
                $(&#39;.result-qrcode&#39;).append(params.result + &#39;<br/>&#39;);
            });
        },
        getImgFile: function() {
            var _this_ = this;
            var inputDom = $(this).find(&#39;input[node-type=jsbridge]&#39;);
            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) {
                    //得到扫码的结果
                    $(&#39;.result-qrcode&#39;).append(data + &#39;<br/>&#39;);
                };
            };
            oFReader.readAsDataURL(oFile);
        },
        destory: function() {
            $(tempBtn).off(&#39;click&#39;);
        }
    };
    Qrcode.init = function(tempBtn) {
        var _this_ = this;
        tempBtn.each(function() {
            new _this_($(this));
        });
    };
    window.Qrcode = Qrcode;
})(window.Zepto ? Zepto : jQuery);

Copy after login

Summary

The above is what the editor gives you I introduced the HTML5 mobile phone scanning function and its advantages and disadvantages. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

Related recommendations:

html5 method to invoke the app

Steps to optimize HTML5 forms with CSS3

Several useful HTML5 mobile development frameworks

The above is the detailed content of HTML5 enables mobile phone scanning function and its advantages and disadvantages_html5 tutorial skills. For more information, please follow other related articles on the PHP Chinese website!