qrcode.react
是一个基于 React 的二维码生成库,它提供了一种简单的方式来在 React 应用中生成二维码。
使用 qrcode.react
可以轻松地将二维码集成到 React 组件中。它提供了一个名为 QRCode
的组件,你可以在你的代码中使用它来生成二维码。
以下是一个使用 qrcode.react
的示例:
安装:
npm install qrcode.react
或
yarn add qrcode.react
然后,在你的代码中引入 QRCode
组件:
import QRCode from 'qrcode.react'
export const QrcodeComponent=()=>{
//需要转为二维码的h5链接
const [url, setUrl] = useState('')
//随机数id
const [randomId, setRandomId] = useState<string>('')
//生成的二维码图片链接
const [qrcodeUrl, setQrcodeUrl] = useState('')
//生成随机数id
const uuid=()=>{
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
const r = (Math.random() * 16) | 0
const v = c === 'x' ? r : (r & 0x3) | 0x8
return v.toString(16)
})
}
useEffect(() => {
setRandomId(uuid())
setUrl('https://example.com')
}, [])
useEffect(() => {
//获取canvas类型的二维码
const canvasImg = document.getElementById(randomId) as HTMLCanvasElement
//将canvas对象转换为图片的data url
setQrcodeUrl(canvasImg?.toDataURL('image/png'))
}, [randomId])
return (
<div style={{ position: 'absolute', opacity: '0', zIndex: '-100' }}>
{url && randomId && (
<QRCode
id={randomId}
value={url}
size={200} // 二维码的大小
fgColor="#000000" // 二维码的颜色
style={{ margin: 'auto', backgroundColor: 'white', padding: '10px' }}
/>
)}
</div>
<img src={qrcodeUrl}/>
);
}
根据某个h5链接,可拼接参数,动态生成二维码的图片链接,扫描该二维码,可以根据参数跳转对应地址
注意:这个QRCode的组件id需要唯一,否则会出现问题,已踩过坑,此处,url是固定的,不涉及复杂情形,可以不用生成randomId,写固定的id就好了