微信小程序生成二维码

男娘i 2023-07-18 09:40 150阅读 0赞

今天写代码有个需求，需要将已有的数据转换成二维码。

大概搜到有两个写法的版本，也不详细介绍他们是怎么写的了。

我照着他们的写法，搞了好几个小时，也不知道为啥，就是不出。

有的写的太复杂，有的写的太简单。。。

阿西吧，还好我弄出来了。

话不多说，开搞。来一个比较好上手的教程

### **1.**git地址：[https://github.com/yingye/weapp-qrcode][https_github.com_yingye_weapp-qrcode] ###

### 从他的dist目录下找到[weapp.qrcode.min.js][]文件，拷贝到项目目录下，这里我放到了utils目录下 ###

### 2.XXX.wxml ###

### 3.XXX.js ###

import QRCode from '../../utils/weapp.qrcode.min.js'
    let qrcode 
    
    onReady() {
    
        qrcode = new QRCode({
          // usingIn: this, // usingIn 如果放到组件里使用需要加这个参数
          text: "1243vgf",//需要转换成二维码的数据
          canvasId: 'qrcodeNewest',//这里一定要和XXX.xml中<canvas>>中得data-id所绑定得名称一致
          colorDark: "#DA4967",
          colorLight: "white",
          correctLevel: 1,
        });
    
      }

### 4.编译 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk4OTI5Mw_size_16_color_FFFFFF_t_70][]

### 完成 ###

[https_github.com_yingye_weapp-qrcode]: https://github.com/yingye/weapp-qrcode
[weapp.qrcode.min.js]: https://github.com/yingye/weapp-qrcode/blob/master/dist/weapp.qrcode.min.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk4OTI5Mw_size_16_color_FFFFFF_t_70]: /images/20230528/cd555ec277784b1cad892c78b28d9ec3.png