react 前端生成二维码

场景：很多时候后端人员直接将网站地址，或者其他的一些信息返回给前端，但是ui设计稿需要的显示却是一张二维码，此时，我们就可以应用此依赖将信息包装成二维码。

方法一：适用于管理后台

依赖地址：www.npmjs.com/package/qrc…

步骤：

1.npm install qrcode.react --save或 yarn add qrcode.react

2.import QRCode  from "qrcode.react";

3.应用

<QRCode
  value={this.state.qrUrl} //value参数为生成二维码的链接
  size={200} //二维码的宽高尺寸
  fgColor="#000000"//二维码的颜色
/>

方法二：适用于小程序（用的是ts)

步骤：

1：在util文件夹中写一个数据转二维码的ts文件（文件内容较多，此处就不贴了，需要私我） 2：import { qrCode, isTypes } from '@utils'; 3：

qrCode.uQRCode.make({
      canvasId: 'qrcode',
      text: accountLink,
      size: 140,
      margin: 0,
      success: (res) => {
        setQrcodeImg(res);//res即为我们需要的二维码图片
      },
    });

//写一个接收二维码的地方，将二维码绘制出来
 <Canvas className='scan_codes' canvasId='qrcode' style={`width:${140}px; height:${140}px;`} />

//将canvas定位到看不见的地方
.scan_codes {
  position: fixed;
  top: -1000px;
  transform: translate(-50%, -50%);
  text-align: center;
  display: inline-block;
  width: 200px;
  height: 200px;
}