微信小程序生成二维码

2021-01-09  本文已影响0人  kattes
// WXML
<view class="qrcode">
   <canvas class="code" :style="{ width: qrcode_width + 'px', height: qrcode_width + 'px' }" canvas-id='qrcodeNode'></canvas>
</view>
// JS
import QRCode from '../../utils/qrcode.min.js';(白嫖往这儿看: https://github.com/suncunxu/Notes )
  // 生成二维码
  getQrcode: function (phone) {
    const W = wx.getSystemInfoSync().windowWidth;
    const rate = 750.0 / W;
    const qrcode_width = 120 / rate;
    // 生成二维码
    new QRCode({
      // usingIn: this, // usingIn 如果放到组件里使用需要加这个参数
      text: "https://www.xxx.com/qrCode/integral?action=gogogo&phone=" + phone,//需要转换成二维码的数据
      canvasId: 'qrcodeNode',//一定要和页面中<canvas>中得data-id名称一致
      colorDark: "#DA4967",
      colorLight: "white",
      correctLevel: 1,
      width: qrcode_width ,
      height: qrcode_width ,
    });
  }
// WXSS
.qrcode {
  padding: 10rpx 10rpx;
  background-color: #fff;
  box-sizing: border-box;
}
.code{
  width: 120rpx;
  height: 120rpx;
}
上一篇 下一篇

猜你喜欢

热点阅读