One: Recognition: image QR code url:
If the backend returns the picture url of the QR code, it will be displayed directly, and the long-press gesture recognition can be performed, and then the method can be called.
< mage > tag long press recognition implementation (WeChat version > 2.7.0)
<image show-menu-by-longpress="true" src="../../static/we.png" ></image>show-menu-by-longpress="true" can realize the identification of QR codes (WeChat personal code, WeChat group code, corporate WeChat personal code, corporate WeChat group code and corporate WeChat interworking group code)
uniapp official document link
WeChat applet official document link
Realize by previewing the picture and then long press
through uni.previewImage(OBJECT), this method can preview the picture in full screen in the new page, and long press to open the operation menu, which has the identification of two-dimensional code (WeChat personal code, WeChat group code, enterprise WeChat personal code, corporate WeChat group code, and corporate WeChat intercommunication group code): These two APIs need to be used together. If one of them is used alone, the purpose of long-press recognition or click recognition cannot be achieved.
<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);
}
});
},There is no src value in the e.target obtained by the code test openimg(e) {}, so the urls and current here are assigned directly, or you can define an attribute to save it.
image src can be local or url.
The urls in previewImage are big picture display pictures, which cannot be empty after testing. It can be a local image or a url.
Turn on the :show-menu-by-longpress="true" attribute of the image to recognize the long press operation
After these two APIs are completed, the effect that can be directly achieved is to recognize the QR codes in the pictures (personal WeChat QR codes, group WeChat QR codes, enterprise QR codes, etc., and small program QR codes).
WeChat personal QR code -- > directly jump to the personal page or add friends,
Group QR code -- > directly jump to the group page or join the group page,
Enterprise group QR code -- > directly jump to the page of adding group or group,
Small program code -- > Jump directly to the small program
Therefore, there is no need to do other processing in the follow-up, and the circle loading recognition will appear directly. Many others on the Internet say that they can only recognize the connection of the QR code of the applet. It may be that the old API is used, but the new version is possible. Here, the verification process is done.
In the picture above, personal QR code recognition is turned on and group QR code recognition is turned on.
Two: According to the background stream return to draw:
Generate a QR code based on the stream returned from the background, and put it on the canvas. This requires scanning the code or taking a screenshot to identify or save the screenshot.
uQRCode can use this three-party uni-app how to use uQRCode plug-in to generate custom QR code_uniapp QR code plug-in_Moran Moran's Blog-CSDN Blog
Three: scan code
Scan code API of uniapp system
// 允许从相机和相册扫码
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);
}
});
It will call the local photo album or camera to select pictures for scanning.