質問：
日常生活では、対応する小さなプログラムを入力し、携帯電話のカメラを動かしてスキャンすることで、対応する QR コード (アプレットの QR コードを除く) を小さなプログラムでスキャンして識別することが必要になることがよくあります。そうすれば、対応する機能を実現するのがより便利かつ簡単になります。通常のQRコードの生成にはweapp-qrcode.jsを、QRコードの認識にはwx.scanCode()やカメラを使用しますが、それぞれの実装手順とメリット・デメリットを紹介します。 。
例: 工場倉庫の取得では、対応するコード仕様を入力することなく、スキャンすることで対応する製品を直接見つけることができ、シンプルかつ効率的です。
実装：
1. 共通の QR コードを生成します。
実装方法：weapp-qrcode.jsを参照して、対応するQRコードを生成します。次のように
(上の画像は表示効果のためのものです。スタイルを調整しすぎないでください。必要に応じて関数を使用して、独自のスタイルを徐々に最適化してください)
以下は主なコードの紹介です
var QRCode = require('../../utils/weapp-qrcode.js')
import rpx2px from '../../utils/rpx2px.js'
const qrcodeWidth = rpx2px(300)
//生成二维码图片
set_img(){
qrcode = new QRCode('canvas', {
usingIn: this,
// text: "https://github.com/tomfriwel/weapp-qrcode",
image: '/images/bg.jpg',
width: qrcodeWidth,
height: qrcodeWidth,
// width: 150,
// height: 150,
colorDark: "#1CA4FC",
colorLight: "white",
correctLevel: QRCode.CorrectLevel.H,
});
// 生成图片，绘制完成后调用回调
qrcode.makeCode(z.data.text)
}
//下面是保存图片
// 长按保存
save: function() {
console.log('save')
wx.showActionSheet({
itemList: ['保存图片'],
success: function(res) {
console.log(res.tapIndex)
if (res.tapIndex == 0) {
qrcode.exportImage(function(path) {
wx.saveImageToPhotosAlbum({
filePath: path,
})
})
}
}
})
}2. QR コードを認識します (WeChat QR コードを除く)。
実装方法： wx.scanCode() または Camera を参照してQR コードを識別します。次のように
(上の画像は表示効果のためのものです。スタイルを調整しすぎないでください。必要に応じて関数を使用して、独自のスタイルを徐々に最適化してください)
以下は主なコードの紹介です
方法一：
get_scanCode(){
var a = this;
wx.scanCode({
scanType: [ "barCode", "qrCode", "datamatrix", "pdf417" ],
success: function(t) {
console.log(t);
var o = t.result;
let data= a.SceneToObj(o,false);
console.log(data)
console.log(o), a.setData({
show: o
});
},
complete() {
// 扫码震动
/*wx.vibrateShort({
type: 'heavy'
})*/
// 播放音乐
//a.playMusic()
}
});
},
方法二：
<camera class="camera" binderror="error" mode="scanCode" bindscancode="scancode">
<cover-image class="coverImg" src="QHImage/iconScanBg.png"></cover-image>
<cover-view class="moveLine" animation="{
{animation}}"></cover-view>
</camera>
// 扫一扫
scancode: function(e) {
var that = this;
var result = e.detail.result;
if(result) {
that.setData({
scanResult: result,
canScan: false
});
wx.setNavigationBarColor({
backgroundColor: '#ffffff',
frontColor: '#000000'
});
}
that.setData({
show:result
})
// 扫码震动
/*wx.vibrateShort({
type: 'heavy'
})*/
// 播放音乐
//that.playMusic()
},wx.scanCode() は識別方法を使用します。「スキャン」をクリックすると、全画面の識別スキャン ページが表示されます。このページは制御できず、カスタム スタイルを追加することもできません。
カメラの使用方法の識別では、ページのレイアウトとスタイルをカスタマイズできますが、初めて認証されていない場合は、携帯電話のカメラをオンにするように求められ、それ以外の場合は先に進みません。
要約:
必要なソース コードはリソース ファイルに配置されており、リソースをダウンロードした後に使用できます。このファイルには、スキャンに必要な WeChat サウンドも含まれています。