为微信小程序生成信息二维码

需求概述：要求用户在小程序某页面填写信息之后，点击提交信息，然后生成一个二维码，相关确认人员通过扫描二维码来确认用户的信息，相关的需求，比如我们平时的电影票二维码生成等等，所以说二维码在我们的业务中需求量还是很大的，那我们就一起看看小程序生成二维码

1. 当然小程序里边生成二维码当然离不开带三方库，下载地址：
   

   https://gitee.com/WeiDoctor/weapp-qrcode-canvas-2d

    

2. 直接点击“克隆/下载”，将下载的包解压，dist下边的文件就是我们需要的
   

    

    

3. 然后我们需要把这四个文件放在我们小程序的文件里，地址随便放，方便自己引入使用就行，我是放在一个utils文件夹的下边
   

    

    

4. 然后我们需要在我们的要生成的二维码的写代码，就是生成二维码的位置
   

   <canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas>

    

5. 然后在对应的js将我们刚才下载的第三方库引入
   

   import drawQrcode from '../../../utils/weapp.qrcode.esm.js'
   

   　　

    

    

    

6. 然后在下边就需要写我们的代码了，要生成的二维码的样式，大小，携带的信息等等，一起来看一下代码
   

   onLoad: function (options) {
       const query = wx.createSelectorQuery()
       query.select('#myQrcode')
           .fields({
               node: true,
               size: true
           })
           .exec((res) => {
               var canvas = res[0].node
       
               // 调用方法drawQrcode生成二维码
               drawQrcode({
                   canvas: canvas,
                   canvasId: 'myQrcode',
                   width: 260,
                   padding: 30,
                   background: '#ffffff',
                   foreground: '#000000',
                   text:JSON.stringify(options),  //text后边的就是我们想给二维码携带的信息
               })
       
               // 获取临时路径
               wx.canvasToTempFilePath({
                   canvasId: 'myQrcode',
                   canvas: canvas,
                   x: 0,
                   y: 0,
                   width: 260,
                   height: 260,
                   destWidth: 260,
                   destHeight: 260,
                   success(res) {
                       console.log('二维码临时路径：', res.tempFilePath)
                   },
                   fail(res) {
                       console.error(res)
                   }
               })
           })
     },

    

7. 这样的话，我们就生成了一个二维码
   

    

    

8. 在使用的过程中，我还遇到了一个问题
   
   ！！！ 二维码携带的信息不应该太多，太多的话二维码就变的很难看，应该说是二维码看起来不是很正式，但是不影响信息的携带，只是我个人的看法而已
   
   到这里就结束了，小程序的二维码生成就没问题了，而且这个三方库的文件很小，很方便使用