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

小呀小萝卜儿

已于 2022-12-25 20:40:00 修改

阅读量2.8k

点赞数 8

分类专栏：工作-React 文章标签： react.js javascript 前端

于 2022-10-09 22:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_48850734/article/details/127227301

版权

工作-React 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

`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
}

第四步、运用

在这里插入图片描述
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;

posterPop.less

/** 根据自己需求进行编写 */
.qrcode {
    width: 124px;
    height: 124px;
    left: 438px;
    top: 876px;
    position: absolute;
    border-radius: 10px;
}

二、方法二

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;

posterPop.less

.pop_poster {
  width: 750px;
  height: 1189px;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  /** 二维码 */
  .qrcode {
    left: 468px;
    top: 826px;
    position: absolute;
  }
}