首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
› React
广告
ciaochaos
V2EX  ›  React

前端实现艺术二维码生成～

  ciaochaos ·
ciaochaos · 2020-05-27 15:07:19 +08:00 · 41335 次点击
这是一个创建于 1650 天前的主题，其中的信息可能已经有所发展或是发生改变。

用 React 做了一个二维码生成器，欢迎来玩！

Github 仓库
github.com/ciaochaos/qrbtf

访问网站
qrbtf.com

图文介绍

第 1 条附言  ·  2020-06-06 21:49:36 +08:00
C2 样式操作演示视频来啦！
b23.tv/CxkcTU
第 2 条附言  ·  2020-06-11 19:23:27 +08:00

！！！

你们要的 React 库来啦

Github
github.com/cpunisher/react-qrbtf

安装

npm install react-qrbtf --save
第 3 条附言  ·  2020-06-28 09:30:15 +08:00
我们的二维码生成 API 开始测试啦！

https://www.yuque.com/qrbtf/docs/api

http://api.qrbtf.com/qrcode?data=https://qrbtf.com&level=M&style=base&type=round&size=50&opacity=30&posType=planet&otherColor=%23000000&posColor=%23000000
  • 二维码
  • 生成器
  • GitHub
  • React
    167 条回复  •  2020-09-03 12:34:38 +08:00
    1  2  
    ❮ ❯
    guanhui07
        101
    guanhui07  
       2020-06-19 11:16:41 +08:00   ❤️ 1
    可以可以
    robinlovemaggie
        102
    robinlovemaggie  
       2020-06-19 16:19:33 +08:00   ❤️ 1
    @ciaochaos 99 常年用 VX 大扫除
    ciaochaos
        103
    ciaochaos  
    OP
       2020-06-19 16:52:23 +08:00
    @robinlovemaggie 哈哈可能是背景图的问题？ C2 可以不
    robinlovemaggie
        104
    robinlovemaggie  
       2020-06-19 17:26:35 +08:00
    @ciaochaos 102 网站 C2 可以
    ciaochaos
        105
    ciaochaos  
    OP
       2020-06-19 17:44:18 +08:00
    @robinlovemaggie OK 了解了
    ciaochaos
        106
    ciaochaos  
    OP
       2020-06-21 22:53:23 +08:00
    新样式发布！ A — a1

    浏览图：i.v2ex.co/Eypg4rIh.jpeg
    ciaochaos
        107
    ciaochaos  
    OP
       2020-06-22 15:16:37 +08:00
    新样式发布！ A — b1 、A — b2
    ciaochaos
        108
    ciaochaos  
    OP
       2020-06-22 20:19:07 +08:00 via iPhone
    @hlayk @violetlai Shift 已经改为拖拽啦
    mtmzorro
        109
    mtmzorro  
       2020-06-24 11:03:42 +08:00   ❤️ 1
    漂亮那 赞个 star
    ciaochaos
        110
    ciaochaos  
    OP
       2020-06-24 11:09:16 +08:00
    @mtmzorro 开心～
    vissssa
        111
    vissssa  
       2020-06-24 15:57:20 +08:00   ❤️ 1
    好看，点赞
    ciaochaos
        112
    ciaochaos  
    OP
       2020-06-24 16:06:37 +08:00
    @vissssa 最近又加了一波新样式，一起来写哈哈
    QMore
        113
    QMore  
       2020-06-24 19:16:54 +08:00
    用过这个 https://cli.im/
    ciaochaos
        114
    ciaochaos  
    OP
       2020-06-24 19:24:33 +08:00
    @QMore Yes，他们的产品经理告诉我草料刚刚换上了新的美化器，快去试试吧～
    vincent321
        115
    vincent321  
       2020-06-24 22:55:37 +08:00   ❤️ 1
    秀儿 为什么你可以这么优秀。换 QR CODE 走起
    ciaochaos
        116
    ciaochaos  
    OP
       2020-06-24 23:50:12 +08:00
    @vincent321 哈哈哈哈哈换吧换吧！
    AoTmmy
        117
    AoTmmy  
       2020-06-24 23:56:54 +08:00   ❤️ 1
    提个小建议，输入网址后自动生成二维码，这样方便多了
    参考 https://www.the-qrcode-generator.com/
    ciaochaos
        118
    ciaochaos  
    OP
       2020-06-25 00:01:19 +08:00
    @AoTmmy 嗯嗯！这样当然是最爽的哈哈，代码改动量也不会超过一行（ onblur vs. onchange ），但是我们考虑到某些二维码样式会有比较大的运算量，onchange 会出现比较糟糕的延时，就弃用了。尤其是当 URL 特别长的时候，生成速度就会……肉眼可见的慢。
    ciaochaos
        119
    ciaochaos  
    OP
       2020-06-26 10:04:42 +08:00 via iPhone
    ![]( )
    smileherd
        120
    smileherd  
       2020-06-26 14:53:04 +08:00   ❤️ 1
    赞！很棒！
    ciaochaos
        121
    ciaochaos  
    OP
       2020-06-26 15:34:17 +08:00
    @smileherd ✌️
    iMusic
        122
    iMusic  
       2020-06-26 16:44:08 +08:00   ❤️ 1
    赞
    linvaux
        123
    linvaux  
       2020-06-26 16:51:57 +08:00   ❤️ 1
    挺有意思的，已 star
    MaxSoloware
        124
    MaxSoloware  
       2020-06-26 17:09:34 +08:00   ❤️ 1
    牛逼牛逼
    ciaochaos
        125
    ciaochaos  
    OP
       2020-06-26 19:39:57 +08:00
    @iMusic @linvaux @fengyiqicoder 嘻嘻谢谢！
    poorcai
        126
    poorcai  
       2020-06-26 22:41:32 +08:00
    可以生成微信二维码吗？
    ciaochaos
        127
    ciaochaos  
    OP
       2020-06-26 23:12:13 +08:00 via iPhone
    @poorcai 嗯嗯可以的
    MomoS
        128
    MomoS  
       2020-06-27 21:58:57 +08:00 via Android   ❤️ 1
    好漂亮啊，啧啧啧
    ciaochaos
        129
    ciaochaos  
    OP
       2020-06-27 22:21:54 +08:00 via iPhone
    @MomoS ✊🏻
    janda
        130
    janda  
       2020-06-28 11:36:25 +08:00
    为什么这里面的所有字都是绿色的？其它主题的就是默认的？
    ciaochaos
        131
    ciaochaos  
    OP
       2020-06-28 11:39:01 +08:00
    @janda 哈？你是说 V2EX NodeJS 的 CSS 配色吗
    janda
        132
    janda  
       2020-06-28 17:34:30 +08:00
    @ciaochaos 是的、至少这个主题是这样的
    ciaochaos
        133
    ciaochaos  
    OP
       2020-06-28 23:16:57 +08:00
    @janda 哈哈哈哈是了，我也没办法 😂
    kajweb
        134
    kajweb  
       2020-06-30 20:22:55 +08:00
    支持 微信小程序码吗？
    ciaochaos
        135
    ciaochaos  
    OP
       2020-06-30 20:58:47 +08:00
    @kajweb 之前有位朋友写了一个不需要依赖和框架的版本，看这里 👉 https://github.com/ciaochaos/qrbtf/issues/8
    Dashy
        136
    Dashy  
       2020-07-02 09:04:02 +08:00   ❤️ 1
    star +1
    ciaochaos
        137
    ciaochaos  
    OP
       2020-07-02 09:23:33 +08:00 via iPhone
    @Dashy 🌟
    amwyyyy
        138
    amwyyyy  
       2020-07-02 14:25:48 +08:00   ❤️ 1
    有点意思
    ciaochaos
        139
    ciaochaos  
    OP
       2020-07-02 14:51:27 +08:00
    @amwyyyy 😉
    sparrow02
        140
    sparrow02  
       2020-07-02 15:54:06 +08:00   ❤️ 1
    很有趣，star ！
    ciaochaos
        141
    ciaochaos  
    OP
       2020-07-02 16:15:11 +08:00 via iPhone
    @sparrow02 谢谢！
    ae
        142
    ae  
       2020-07-04 11:30:25 +08:00   ❤️ 1
    很不错
    ciaochaos
        143
    ciaochaos  
    OP
       2020-07-04 12:04:10 +08:00 via iPhone
    @ae ✊🏻
    mopengiio
        144
    mopengiio  
       2020-07-06 15:31:22 +08:00   ❤️ 1
    奈斯啊老哥
    ciaochaos
        145
    ciaochaos  
    OP
       2020-07-07 09:17:25 +08:00 via iPhone
    @mopengiio 耶！
    patrick961214
        146
    patrick961214  
       2020-07-08 14:57:10 +08:00   ❤️ 1
    赞 b(￣▽￣)d
    brader
        147
    brader  
       2020-07-09 09:53:41 +08:00   ❤️ 1
    请问作者，你这个生成的二维码，我放到各个二维码解析网站，都显示解析不了，但是实际扫码又是能正常使用的，是什么问题？
    其他网站生成的二维码，能正常解析的。
    ciaochaos
        148
    ciaochaos  
    OP
       2020-07-09 11:53:47 +08:00 via iPhone
    @patrick961214 ✌🏻
    ciaochaos
        149
    ciaochaos  
    OP
       2020-07-09 11:55:05 +08:00 via iPhone
    @brader 因为微信的识别引擎太优秀了哈哈，一般的扫描工具，尤其是前端，都做不到这么高的识别效率和容错。
    dox1994
        150
    dox1994  
       2020-07-09 21:18:21 +08:00   ❤️ 1
    已 star，网站 ui 好漂亮，ui 是用什么做的呀
    ciaochaos
        151
    ciaochaos  
    OP
       2020-07-10 02:12:20 +08:00
    @dox1994 是我自己用 CSS 写的～没有用 UI 库
    HangoX
        152
    HangoX  
       2020-08-04 14:10:02 +08:00   ❤️ 1
    非常赞！！！
    vertigo
        153
    vertigo  
       2020-08-04 14:17:50 +08:00   ❤️ 1
    nice!
    ciaochaos
        154
    ciaochaos  
    OP
       2020-08-04 15:32:35 +08:00
    @vertigo ✌🏻
    ciaochaos
        155
    ciaochaos  
    OP
       2020-08-04 15:33:15 +08:00
    @HangoX thx ！
    zjf
        156
    zjf  
       2020-08-05 09:26:59 +08:00   ❤️ 1
    太帅了
    ciaochaos
        157
    ciaochaos  
    OP
       2020-08-05 20:47:03 +08:00 via iPhone
    @zjf 👏🏻
    Hallujah
        158
    Hallujah  
       2020-08-06 11:35:28 +08:00   ❤️ 1
    好看，帮顶一个
    ciaochaos
        159
    ciaochaos  
    OP
       2020-08-06 21:41:59 +08:00
    @Hallujah 谢谢～
    lijie0981
        160
    lijie0981  
       2020-08-11 22:09:08 +08:00   ❤️ 1
    很棒！
    ciaochaos
        161
    ciaochaos  
    OP
       2020-08-11 22:12:50 +08:00
    @lijie0981 😉
    palmers
        162
    palmers  
       2020-08-12 17:35:04 +08:00   ❤️ 1
    非常优秀!
    ciaochaos
        163
    ciaochaos  
    OP
       2020-08-12 17:36:04 +08:00
    @palmers 🙌🏻
    Handle
        164
    Handle  
       2020-08-21 18:44:39 +08:00   ❤️ 1
    我们是两位大一的学生，太可怕了
    IssacTomatoTan
        165
    IssacTomatoTan  
       2020-08-21 21:55:18 +08:00 via Android   ❤️ 1
    那个人很厉害
    ciaochaos
        166
    ciaochaos  
    OP
       2020-08-25 12:52:32 +08:00
    @Handle 😂😂😂
    machunning9843
        167
    machunning9843  
       2020-09-03 12:34:38 +08:00
    很强，点赞！
    1  2  
    ❮ ❯
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5552 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 03:39 · PVG 11:39 · LAX 19:39 · JFK 22:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.