【taro react】 ---- QRCode 二维码生成

最新推荐文章于 2024-07-13 18:02:44 发布

Rattenking

最新推荐文章于 2024-07-13 18:02:44 发布

阅读量1.2k

点赞数 14

分类专栏： Taro React 入门到实战系列文章标签： taro react.js 前端

本文链接：https://blog.csdn.net/m0_38082783/article/details/135392078

版权

Taro React 入门到实战系列专栏收录该内容

50 篇文章 25 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Taro和React项目中如何生成二维码。需求是将输入值转化为图片资源，选择了轻量级的qrcode-generator库，仅40kb。文章详细讲解了库的选择、base64转换方法、组件实现及使用，强调根据需求选择合适库和减少对后端的依赖。

摘要由CSDN通过智能技术生成

1. 需求分析

需要将输入的值转换为图片资源；
由于只是单纯的展示，所以不需要很多比如加 logo 等复杂功能；
不需要后端生成，直接前端操作；
使用的第三方库尽可能小，功能单一；
最后选择使用 qrcode-generator 库，只有 40kb。

2. 使用第三方库

qrcode-generator

3. 转换 base64 方法

export const createQrCodeImg = function (text, options) {
  options = options || {};
  var typeNumber = options.typeNumber || 4;
  var errorCorrectLevel = options.errorCorrectLevel || 'M';
  var size = options.size || 500;

  var qr;

  try {
    qr = qrcode(typeNumber, errorCorrectLevel || 'M');
    qr.addData(text);
    qr.make();
  } catch (e) {
    if (typeNumber >= 40) {
      throw new Error('Text too long to encode');