2022-10-09 工作记录--React-实现二维码的两种方法_react 生成二维码

React-实现二维码的两种方法

一、方法一

1、实现效果

2、实现方法

第一步、安装qrcode

npm i qrcode

或者

yarn add qrcode

第二步、检查qrcode是否安装成功

检查package.json里是否存在qrcode，举例如下：

第三步、在utils里新建文件qrcode.js

import QRCode from 'qrcode'

export async function getQRCode(url) {
  const _myQRCode = await QRCode.toDataURL(url)
  return _myQRCode
}
1
2
3
4
5
6

第四步、运用

posterPop.jsx

import React,{Component} from 'react';
import { getQRCode } from "@src/utils/qrcode"; // 引入getQRCode创建二维码
import './posterPop.less';

class PosterPop extends Component {

  state = {
    qrcodeUrl: '', // 二维码图片地址
  }

  componentDidMount() {
    this.createQRCode(); // 创建二维码
  }

  // 创建二维码
  createQRCode = async () => {
  	/** 下面两行代码（避开注释行）是我项目所需，小萝卜儿们根据自己需求进行更改哦~，其实就是二维码滴跳转地址喔 */
    // 区分 测试环境 和 线上测试环境/正式环境 的 appKey值
    const appKey = location.origin.includes("duibatest") ? '123' : '456';
    // qrcodeUrl为扫描二维码后的对应跳转地址，landingPageUrl为分享落地页地址(openBs写法，去烽火台复制)【即 扫描二维码后 进入 分享落地页】
    const landingPageUrl = location.origin + '/projectx/' + CFG.projectId + '/landingPage.html?appKey=' + appKey + '&openBs=openbs&appID=' + CFG.appID;    
    
    const qrcodeUrl = await getQRCode(landingPageUrl);
    console.info('二维码图片地址: ' + qrcodeUrl);
    this.setState({
      qrcodeUrl
    });
  }

  render() {
    return (
      <div className="posterPop">
        {/* 二维码 */}
        <img className="qrcode" src={this.state.qrcodeUrl} />
      </div>
    );
  }
}
export default PosterPop;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

posterPop.less

/** 根据自己需求进行编写 */
.qrcode {
    width: 124px;
    height: 124px;
    left: 438px;
    top: 876px;
    position: absolute;
    border-radius: 10px;
}
1
2
3
4
5
6
7
8
9

二、方法二

1、实现效果

2、实现方法

第一步、安装qrcode.react

npm i qrcode.react

或者

yarn add qrcode.react

第二步、检查qrcode.react是否安装成功

检查package.json里是否存在qrcode.react，举例如下：

第三步、运用

posterPop.jsx

import React from 'react';
import QRCode from "qrcode.react"; // 引入二维码
import './posterPop.less';

class PosterPop extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      qrcodeUrl: '', // 二维码图片地址
    }
  }

  render() {
    const { qrcodeUrl } = this.state;
    return (
      <div className="posterPop">
        {/* 二维码 */}
        <QRCode
          className="qrcode"
          value={qrcodeUrl}
          size={57.5} // 二维码图片大小（宽高115px）
          bgColor="#fff1d1" // 二维码背景颜色
          fgColor="#c7594a" // 二维码图案颜色
        />
      </div>
    );
  }
}
export default PosterPop;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

posterPop.less

.pop_poster {
  width: 750px;
  height: 1189px;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  /** 二维码 */
  .qrcode {
    left: 468px;
    top: 826px;
    position: absolute;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14