微信小程序-二维码绘制

原创

于 2025-02-22 15:57:09 发布 · 2.2k 阅读

标签

#微信小程序 #小程序

收录于

wxml

<view bindlongtap="saveQrcode">
  <!-- 二维码 -->
  <view style="position: absolute;background-color: #FFFAEC;width: 100%;height: 100vh;">
    <canvas canvas-id="myQrcode" style="width: 200px; height: 200px;background-color: azure;position: fixed;top: 999px;" ></canvas>
  </view>
  <!-- 绘制的背景图 -->
  <canvas type="2d" id="newQrcode" style="width: 100%;height: 700px;z-index: 99;"></canvas>
</view>

wxss

/* pages/QRcode/QRcode.wxss */
.canvas {
    width: 100%;
    height: -webkit-calc(100% - 44px);
    height: -moz-calc(100% - 44px);
    height: calc(100% - 44px);
    background: #fff;
  }

// pages/index/index.js
import QRCode from './weapp.qrcode.esm';

let textCanvas;

Page({
  data: {
    qrcodeVisible: true // 控制二维码是否显示
  },

  onReady() {
    // 等待二维码绘制完成后再获取临时文件路径
    this.generateQRCode().then((t