前端生成二维码
uni-app 2022-05-19 11:05:29

 

view： 

XML/HTML Code复制内容到剪贴板
  1. <canvas canvas-id="qrcode-canvas" id="canvas1"  
  2.             style="width:360rpx; height:360rpx;" @longpress="saveQrcode"></canvas>  

 

 

JavaScript Code复制内容到剪贴板
  1. export default {  
  2.     data() {  
  3.         return {  
  4.             qrcode: {  
  5.                 // 二维码绘制对象  
  6.                 qrcode        : null,  
  7.                 // 二维码尺寸，单位 rpx  
  8.                 qrcodeSize    : 360,  
  9.                 // 二维码数据  
  10.                 qrcodeContent : '',  
  11.                 // 二维码背景颜色  
  12.                 qrcodeBgColor : '#FFFFFF',  
  13.                 // 二维码颜色  
  14.                 qrcodeColor   : '#008AFF',  
  15.                 // 画布 id  
  16.                 qrcodeId      : 'qrcode-canvas'  
  17.             }  
  18.         }  
  19.     },  
  20.     onLoad(options) {  
  21.         // 绘制二维码  
  22.         this.drawQrcode()  
  23.     },  
  24.     methods: {  
  25.         // 绘制二维码  
  26.         drawQrcode() {  
  27.             // 生成二维码  
  28.             this.qrcode.qrcodeContent = '/enterprise/poster-qrcode?scene='+this.id+","+this.userid  
  29.             // this.qrcode.qrcodeContent = 'https://www.graceui.com'  
  30.             console.log('分享链接', this.qrcode.qrcodeContent)  
  31.             setTimeout(()=>{  
  32.                 this.qrcode.qrcode = new QRCode(this.qrcode.qrcodeId, {  
  33.                     text         : this.qrcode.qrcodeContent,  
  34.                     width        : uni.upx2px(this.qrcode.qrcodeSize),  
  35.                     height       : uni.upx2px(this.qrcode.qrcodeSize),  
  36.                     colorDark    : this.qrcode.qrcodeColor,  
  37.                     colorLight   : this.qrcode.qrcodeBgColor,  
  38.                     correctLevel : QRCode.CorrectLevel.H  
  39.                 });  
  40.                 console.log(this.qrcode.qrcode)  
  41.             },1000);  
  42.         },  
  43.     }  
  44. }  

 

 

 

本文来自于：http://www.yoyo88.cn/study/uniapp/624.html

上一篇 微信小程序保存到相册
下一篇 vue调用监控（海康威视）
相关的文章
Powered by yoyo苏ICP备15045725号