前端生成二维码 qrcode

一、下载安装第三方库

• 下载源:https://www.npmjs.com/package/qrcode
• 在项目文件夹内执行:npm install --save qrcode
• 全局安装:npm install -g qrcode

二、在需要的页面引入

• import QRcode from "qrcode";

三、使用

• 传入两参数,与一个回调函数
• canvas是HTML的绘图标签,省略返回新绘图
• sample text:输入你需要转换为二维码的字符串,可以是网址链接
• function在执行完成时的回调函数
• 可以自定义宽高颜色

3.1官方用法

//canvas是HTML的绘图标签,省略返回新绘图
//sample text:输入你需要转换为二维码的字符串,可以是网址链接
//function在执行完成时的回调函数
QRCode.toCanvas(canvas, 'sample text', function (error) {
  if (error) console.error(error)
  console.log('success!');
})

3.1测试用法示例

<template>
  <div class="test">
    <div class="qrcode">
      <!-- 二维码 -->
      <canvas ref="qrcodeCanvas"> </canvas>
    </div>
  </div>
</template>
<script>
// 引用
import QRcode from "qrcode";
export default {
  mounted() {
    // 这个库传入两个参数
    // 1. canvas dom
    // 2. 字符串
    QRcode.toCanvas(
      this.$refs.qrcodeCanvas,
      "https://blog.csdn.net/weixin_47886687?spm=1010.2135.3001.5113",
      {
        width: 200,//自定义宽度
        color: {
          dark: "#00f", //自定义码的颜色
          light: "#fbb", //自定义背景颜色
        },
      }
    );
  },
};
</script>

<style lang="less" scoped>
</style>

四、效果

五、总结

• 二维码的本质其实只是将一些数据(字符串)变成黑和白两种小点用二进制的方式显示出来而已.
• 一般无论是扫公众号, 扫小游戏, 网站,支付, 都只是一个字符串(链接), 实际上扫描以后, 微信访问链接, 就能实现扫一扫功能了