要約:
QR コードのスキャンは、アプリでよく使われる基本的な機能であり、この機能により、ユーザーは簡単にログイン、Web サイトの閲覧、情報の取得などを行うことができます。この機能は H5 に導入されており、H5 を使用して QR コードをスキャンする機能を実現します
H5 に QR コード スキャン機能を導入する過程で、5 つのツール ライブラリを比較した結果、比較的使いやすい 2 つのサードパーティ ライブラリが見つかりました。次に、これら 2 つのライブラリを記録します。
この記事で使用されているテクノロジーは uniapp+vue3 です
html5-qrコード
html5-qrcode ライブラリは JavaScript ライブラリです。要素コンテナを提供するだけでコード スキャン機能を実現できます。ただし、スキャン効率は非常に低く、1 に直面しています。 QRコード、時間が認識されない場合があります。
このライブラリの使用も非常に簡単です。
- インストール
npm install html5-qrcode - 使用する必要があるページにこれを導入します
次に、例を書いて効果を確認します
<template>
<view class="container">
<button class="scan" @click="scanCode">扫一扫</button>
<view class="reader-box" v-if="isScaning">
<view class="reader" id="reader"></view>
</view>
</view>
</template>
<script>
import {
Html5Qrcode
} from 'html5-qrcode';
export default {
data() {
return {
html5Qrcode: null,
isScaning: false,
}
},
methods: {
startScan() {
this.isScaning = true;
Html5Qrcode.getCameras().then(devices => {
if (devices && devices.length) {
this.html5Qrcode = new Html5Qrcode('reader');
this.html5Qrcode.start({
facingMode: 'environment',
}, {
fps: 24,
qrbox: 280
}, (decodeText, decodeResult) => {
console.log(decodeText)
if (decodeText) {
this.stopScan();
this.isScaning = false;
}
}, (err) => {
console.log(err)
});
}
});
},
stopScan() {
this.html5Qrcode.stop();
},
scanCode() {
console.log('helo')
this.startScan();
}
}
}
</script>
<style scoped>
.container{
height:100%;
}
.reader-box {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.reader {
width: 540rpx;
height: 540rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
スキャン ボタンをクリックすると、次のような効果が表示されます。
上記のスタイルは、必要に応じて変更できます。
html5-qrcode の利点:
- スタイルもロジックも、自分のニーズに合わせて柔軟に対応できる
- 組み込みの基本スタイルにより、カスタム スタイルのコンテンツが削減されます
html5-qrcode の欠点: - 感度が低いため、QR コードを 1 ～ 2 時間スキャンしても結果が得られない可能性があり、効率が非常に遅くなります。
vue-qrコードリーダー
vue-qrcode-reader の方が使いやすい
- インストール
npm install vue-qrcode-reader
- QrcodeStream コンポーネントを必要なページに導入し、使用するために登録します。
- QrcodeStream の検出イベントをリッスンします。イベント処理関数のパラメータは、認識された QR コードの配列です。
例を使用して効果を見てみましょう。
<template>
<view class="container">
<button class="scan" @click="scanCode">扫一扫</button>
<view class="reader-box" v-if="isScaning">
<QrcodeStream @detect="onDetect">
<view class="reader"></view>
</QrcodeStream>
</view>
</view>
</template>
<script>
import {
QrcodeStream,
} from 'vue-qrcode-reader';
export default {
components: {
QrcodeStream,
},
data() {
return {
isScaning: false,
}
},
methods: {
onDetect(detectedCodes) {
const target = detectedCodes[0];
if (target && target.rawValue) {
console.log(target.rawValue);
this.isScaning = false;
}
},
scanCode() {
this.isScaning = true;
}
}
}
</script>
<style scoped>
.container {
height: 100%;
}
.reader-box {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.reader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
}
</style>
クリックしてスキャンすると、次の効果が表示されます:
上記のスタイルは、必要に応じて変更できます。QrcodeStream はデフォルトのスロットとスロットのコンテンツを提供します。デフォルトはposition:absoluteボックス内です。
vue-qrcode-reader の利点
- 感度が高く、QRコードが表示されるとその内容が取得できるので効率的です。
- 非常に使いやすく、コード スキャン ロジックを自分で処理する必要はなく、イベントをリッスンするだけで済みます。
vue-qrcode-reader の欠点:
- 組み込みのスタイルはありません。スタイルは自分で記述する必要があります