一般的网上解决方法特别多,但大多数都是大同小异,关于react-es6的框架搭语法很少见,下面是React中处理二维码触发微信识别的解决方法:
import React, { useState, useRef, useEffect } from 'react';
import { useWindowSize } from 'react-use';
import QRCodeReact from 'qrcode.react';
import icon from '@/assets/images/obbycode-app.png';
const QRcode = ({ href, codeSize = 0.3, iconSize = 0.08 }) => {
const [imgSrc, setImgSrc] = useState('');
useEffect(() => {
let canvas = document.getElementById('qrcode-canvas');
let data = canvas.toDataURL('image/png');
setImgSrc(data);
canvas = null
}, []);
const { width } = useWindowSize();
const wrapperStyle = {
position: 'relative'
}
const qrcodeImgStyle = {
border: '4px solid #fff',
height: width * codeSize,
width: width * codeSize,
}
const iconStyle = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
border: '2px solid #fff',
height: width * iconSize,
width: width * iconSize,
}
return (
<div style={wrapperStyle}>
<img src={imgSrc} alt="" style={qrcodeImgStyle} />
<img src={icon} alt="icon" style={iconStyle} />
<QRCodeReact
style={{ display: 'none' }}
id="qrcode-canvas"
className="qrcode"
value={href}
level="M"
size={width * codeSize}
// imageSettings={{
// src: require('@/assets/images/obbycode-app.png'),
// x: null,
// y: null,
// height: width * iconSize,
// width: width * iconSize,
// excavate: true
// }}
/>
</div>
);
}
export default QRcode;