HTML5 active la fonction de numérisation des téléphones mobiles et ses avantages et inconvénients_html5 compétences du didacticiel-tutoriel HTML-php.cn

HTML5 active la fonction de numérisation des téléphones mobiles et ses avantages et inconvénients_html5 compétences du didacticiel

韦小宝

Libérer： 2017-12-16 11:43:34

original

4017 Les gens l'ont consulté

Cet article présente principalement des informations relatives au HTML5 sur l'ouverture de la fonction de numérisation de code du téléphone mobile et ses avantages et inconvénients. Les amis intéressés par HTML5 peuvent se référer à ce qui suit

1. résolu :

1. Peut utiliser le client Weibo pour appeler la caméra pour scanner le code QR et l'analyser

2. Navigateur natif et code QR du client WeChat et analyse

2. Avantages :

Le côté Web ou le côté h5 peuvent compléter directement le code QR. travail de numérisation ;

3. Inconvénients :

L'image n'est pas claire et il est facile de ne pas l'analyser (prendre des photos pour numériser le l'image nécessite que l'objectif soit très proche du code QR), par rapport à Il y aura un délai de 1 à 2 secondes dans l'analyse de l'appareil photo lorsqu'il est appelé par le natif.

Remarque :

Ce plug-in doit être utilisé avec zepto.js ou jQuery.js

Utilisation :

1. Dans la page qui doit être utilisée, introduisez les fichiers js dans le répertoire lib dans l'ordre suivant

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

Copier après la connexion

2. Auto-définir le style HTML du bouton

Ajouter un attribut personnalisé pour le bouton personnalisé, le nom de l'attribut est de type nœud

Ajouter un attribut personnalisé pour le bouton de saisie, le nom de l'attribut est node-type

Comme ce plug-in nécessite l'utilisation de <input type="file" /> , la structure html a un style d'affichage fixe sur la page Web Afin de personnaliser le style du bouton, nous pouvons imbriquer le code selon l'exemple de structure de code suivant

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

Copier après la connexion

Ensuite, définissez le CSS du bouton de saisie pour masquer le Par exemple, j'utilise le sélecteur d'attribut

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

Copier après la connexion

Ici, il suffit de définir le. style de class="qr-btn" selon nos propres besoins.

3. Initialisez l'objet Qrcode sur la page

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

Copier après la connexion

Code principal analyse

(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);

Copier après la connexion

Résumé

Ce qui précède est L'éditeur vous présente la fonction de numérisation de téléphone mobile HTML5 et ses avantages et inconvénients. J'espère qu'elle vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Recommandations associées :

Méthode HTML5 pour invoquer l'application

Étapes pour optimiser les formulaires HTML5 avec CSS3

Plusieurs frameworks de développement mobile HTML5 utiles

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!