ホームページ > 記事 > ウェブフロントエンド > H5モバイルコードスキャンの実装方法

H5モバイルコードスキャンの実装方法

php中世界最好的语言オリジナル: 2018-01-11 09:48:217728ブラウズ

今回は、H5 携帯電話コードスキャンを実装する方法を説明します。H5 を使用して携帯電話コードスキャンを実装する方法は? H5 携帯電話のスキャンに関する注意事項

は何ですか? ここで実際のケースを見てみましょう。

解決された問題:

1. カメラを使用して QR コードをスキャンし、Weibo クライアントで解析できるようになりました。

2. ネイティブブラウザーと WeChat クライアントで QR コードをスキャンして解析できるようになりました。 ;

2. 利点:

コードのスキャン作業を直接完了できます。

画像が鮮明ではないため、解析に失敗しやすいです。画像をスキャンするには、レンズを QR コードから遠ざける必要があります (非常に近い距離)。ネイティブの通話カメラ分析と比較して 1 ～ 2 秒の遅延が発生します。

手順: このプラグインは 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>

ボタンのHTMLスタイルを定義します

カスタムボタンにカスタム属性を追加します。属性名はnode-typeです

入力ボタンにカスタム属性を追加します。属性名はnode-typeです。プラグインでは 61b9b53f6d762f7c3b14ccfc7d4eaf40 を使用する必要があるため、HTML 構造は Web ページ上で固定の表示スタイルを持ち、ボタンのスタイルをカスタマイズできます。次のサンプルコード構造

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

に従ってコードをネストし、入力を設定します。たとえば、ボタンのCSSは

属性セレクターを使用します

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

。ここではクラスのスタイルを定義するだけです。私たち自身のニーズに従って「qr-btn」。 3. ページ上の Qrcode オブジェクトを初期化します

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

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。