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);
}
});
ローカルのフォト アルバムまたはカメラを呼び出して、スキャンする写真を選択します。