uniapp- フロントエンド QR コード、スキャン コード、長押し、認識、その他の問題

1: 認識: 画像 QR コード URL:

バックエンドが QR コードの画像 URL を返す場合、それが直接表示され、長押しジェスチャ認識が実行され、メソッドを呼び出すことができます。

< mage >タグ長押し認識実装(WeChat バージョン > 2.7.0)

<image show-menu-by-longpress="true" src="../../static/we.png" ></image>

show-menu-by-longpress="true" は、QR コード (WeChat 個人コード、WeChat グループ コード、企業 WeChat 個人コード、企業 WeChat グループ コード、企業 WeChat インターワーキング グループ コード) の識別を実現できます。

uniapp公式ドキュメントのリンク
WeChatアプレット公式ドキュメントのリンク

これは、uni.previewImage(OBJECT) を介して画像をプレビューし、長押しすることで実現
できます。このメソッドは、新しいページで全画面で画像をプレビューでき、長押しすると、識別用 QR コード ( WeChat 個人コード、WeChat グループ コード、企業コード) WeChat 個人コード、企業 WeChat グループ コード、企業 WeChat 相互通信グループ コード): これら 2 つの API は一緒に使用する必要があります。プレス認識やクリック認識はできません。

<image show-menu-by-longpress="true" src="../../static/we.png" @longpress="openimg"></image>


openimg(e) {
				uni.previewImage({
							// 需要预览的图片链接列表
							urls: ['../../static/we.png'],
							// 为当前显示图片的链接/索引值
							current: "../../static/we.png",
							// 图片指示器样式	
							indicator:'default',
							// 是否可循环预览
							loop:false,
							// 长按图片显示操作菜单,如不填默认为保存相册
							// longPressActions:{
							// 	itemList:[this.l('发送给朋友'),this.l]
							// },
							success: res => {
								console.log('res', res);
							}, 
							fail: err => {
								console.log('err', err);
							}
						});
			},

コード test openimg(e) {} によって取得された e.target には src 値がないため、ここの URL と current が直接割り当てられるか、カスタム属性を定義して保存できます。

image src はローカルまたは URL にすることができます。

プレビューイメージ内の URL は大きな画像表示画像であり、テスト後に空にすることはできません。ローカル画像または URL を指定できます。

  長押し操作を認識するには、画像の:show-menu-by-longpress="true"属性をオンにします。 

これら 2 つの API が完了すると、直接達成できる効果は、画像内の QR コード (個人 WeChat QR コード、グループ WeChat QR コード、企業 QR コードなど、および小規模プログラム QR コード) を認識することです。

WeChat 個人 QR コード -- > 個人ページに直接ジャンプするか、友達を追加します。

グループ QR コード -- > グループ ページに直接ジャンプするか、グループ ページに参​​加し、

エンタープライズグループ QR コード -- > グループまたはグループの追加ページに直接ジャンプし、

小さなプログラム コード -- > 小さなプログラムに直接ジャンプ

したがって、フォローアップでは他の処理を行う必要はなく、サークル読み込み認識が直接表示されます。インターネット上では、アプレットの QR コードの接続しか認識できないという意見が多数あり、古い API を使用している可能性がありますが、新しいバージョンでは可能です。ここで検証プロセスが行われます。

 

 上の図では、個人 QR コード認識がオンになり、グループ QR コード認識がオンになります。

2: バックグラウンド ストリームに従って描画に戻ります:

 バックグラウンドから返されたストリームに基づいて QR コードを生成し、キャンバスに配置します。これには、コードをスキャンするか、スクリーンショットを撮って、スクリーンショットを識別または保存する必要があります。

uQRCode は、このサードパーティユニアプリを使用できます。 uQRCode プラグインを使用してカスタム QR コードを生成する方法_uniapp QR コード プラグイン_Moran Moran のブログ - CSDNブログ

3: スキャンコード

uniappシステムのスキャンコードAPI

// 允许从相机和相册扫码
uni.scanCode({
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});
 
// 只允许通过相机扫码
uni.scanCode({
	onlyFromCamera: true,
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});
 
// 调起条码扫描
uni.scanCode({
	scanType: ['barCode'],
	success: function (res) {
		console.log('条码类型:' + res.scanType);
		console.log('条码内容:' + res.result);
	}
});

ローカルのフォト アルバムまたはカメラを呼び出して、スキャンする写真を選択します。

uni-appでコードスキャン機能を実現

おすすめ

転載: blog.csdn.net/qq_27909209/article/details/130944423