程序猿生成二维码的三种方法（在线接口+在线网站+本地程序）

一、前言

程序猿经常在web、app、小程序等应用生成二维码，生成二维码方式有多种，如果你第一次接触，网上搜出来的基本是使用本地程序生成的，其实这种最麻烦，有更好的方式，就是使用在线接口的，简单方便快捷。

二、在线接口

这里推荐腾讯自家的接口，长期稳定可靠，其它非大厂的都不推荐

接口1

https://minico.qq.com/qrcode/get?type=2&r=1&size=300&b=miniapp&text=https://www.qq.com

• text 是网址
• size 尺寸
• type 未知，必须且只能填2
• b 未知，非必填，填miniapp中间会有小logo
• r 样式，1是方形，2是圆形

接口2

https://qun.qq.com/qrcode/index?data=https://www.qq.com&size=300

• data 网址
• size 尺寸
  这个固定会有白边

三、在线网站

在线网站就很多了，首推 草料二维码 https://cli.im/url
优点是功能强大，不止生成网址，文本、视频、图片、批量都支持，但是没有接口调用，只能生成后粘贴过来使用。

四、本地程序

本地程序优点是稳定可控，缺点是需要导入库，手撕代码。
目前也有很多插件、代码可以复制，不同语言有不同方式，这里以vue3+qrcodejs2做示范：

• 安装
  npm install qrcodejs2 --save
• 使用

<template>
<div id="qrcode" ref="qrcodeRef"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import QRCode from 'qrcodejs2' // 引入插件

const qrcodeRef = ref()
const initQrcode = () => {
  qrcodeRef.value.innerHTML = '' // 这里可以每次调用时清除，根据实际情况来使用
  if (state.qrCode) return
  state.qrCode = new QRCode(qrcodeRef.value, {
    text: 'https://blog.csdn.net/', // 网址
    width: 200,  // 宽
    height: 200, // 高
    colorDark: '#000000',  // 主颜色
    colorLight: '#ffffff', // 背景色
  })
}
onMounted(() => {
  initQrcode()
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如果帮到您，点个赞再走~