微信小程序使用weapp-qrcode插件实现二维码展示

758 阅读1分钟

image.png

npm i weapp-qrcode

import qrcode from 'weapp-qrcode' npm构建后 在当前页面js中引入

创建了一个新的二维码对象。它设置了二维码的宽度和高度(都是250像素),以及用于渲染二维码的画布ID(‘useQRcode’)。

画布的类名和ID都是’useQRcode’,这与上面创建二维码对象时指定的画布ID相匹配。因此,当二维码对象被创建时,二维码将被渲染到这个画布上。

总的来说,这段代码的目的是在微信小程序中生成一个二维码,并将其渲染到指定的画布上。二维码的内容由aaaaa指定。

<view class="OffUsebg">
  <canvas class="useQRcode" canvas-id="useQRcode" ></canvas>
</view>
.OffUsebg{
  background: #fff;
  padding: 40rpx 20rpx;box-sizing: border-box;
}
.useQRcode{
  z-index: 999;
  margin: auto;
  width: 450rpx;
  height: 450rpx;
}

js
import qrcode from 'weapp-qrcode'

适配不同手机宽高 展示的二维码完整还是不完整
const systemInfo = wx.getSystemInfoSync()
const width = 250 * systemInfo.windowWidth / 375
const height = width
let drawnCode = e.currentTarget.dataset["drawncode"];
this.setData({ show: true });
new qrcode({
  width: width,
  height: height,
  canvasId: 'myQRcode',
  text: 'drawnCode',
});