Skip to content
微信小程序生成二维码
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
qrCode.js

README.md

#小程序生成二维码

创建qrCode

本地新建一个qrCode.js,复制我的qrCode.js,保存

引入qrCode

在需要生成的二维码页面的小程序js里面顶部引入let qrCode=('../../utils/qrCode.js') console.log(qrCode) 如果可以直接输出一个api的对象即为引入成功

配置参数

wxml

<canvas style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="qrcCanvas"/>

<input value='{{qrcStr}}' bindblur="onQrcStrBlur" type="text" maxlength="255" />

js

data:{
    qrStr:'xxx'  需要生成字段
    canvasId: "qrcCanvas",//需要绘画的元素
 }
 
 //适配不同屏幕大小的canvas  
   setCanvasSize(){  
     var size={};  
     try {  
         var res = wx.getSystemInfoSync();  
         var scale = 750/686;//不同屏幕下canvas的适配比例;设计稿是750宽  
         var width = res.windowWidth/scale;  
         var height = width;//canvas画布为正方形  
         size.w = width;  
         size.h = height;  
       } catch (e) {  
         // Do something when catch error  
         console.log("获取设备信息失败"+e);  
       }   
     return size;  //返回大小
   } ,  
   
   createQrCode(str,canvasId,cavW,cavH){  
       //调用插件中的draw方法,绘制二维码图片  
       qrCode.api.draw(str,canvasId,cavW,cavH);  
     
    },  
     
   //获取input输入的值  
   onQrcStrBlur(e) {  
       this.setData({qrcStr: e.detail.value});  
   },  
     
   //在  onReady调用
   onReady: function() {  
       let size = this.setCanvasSize();//动态设置画布大小  
       this.createQrCode(this.data.qrcStr, this.canvasId, size.w, size.h);  
    },    
You can’t perform that action at this time.