小程序生成二维码

简单粗暴

一、效果

 二、具体步骤、代码

1、小程序wxml文件

<view class="container">
  <view class="form-field">
    <text>优惠码：</text>
    <input type="text" placeholder="请输入优惠码" bindinput="onCodeInput" />
  </view>
  <view class="form-field">
    <text>优惠金额：</text>
    <input type="number" placeholder="请输入优惠金额" bindinput="onValueInput" />
  </view>
  <view class="form-field">
    <text>优惠标题：</text>
    <input type="text" placeholder="请输入优惠标题" bindinput="onTitleInput" />
  </view>

  <button class="btn-generate" type="primary" bindtap="generateQRCode">生成优惠券二维码</button>

  <view class="qrcode-container">
    <canvas canvas-id="myCanvas" style="width: 100px; height: 100px;margin:0 auto"></canvas>
  </view>
</view>

2、小程序wxss代码

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.form-field {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
  text {
    width: 100rpx;
  }

  input {
    flex: 1;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 5rpx 10rpx;
    text-align: center;
    font-size: 30rpx;
  }

.btn-generate {
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 10rpx;
  font-size: 32rpx;
  line-height: 80rpx;
  text-align: center;
  margin-bottom: 30rpx;
}

.qrcode-container {
  width: 200rpx;
  height: 200rpx;
  border: 1px solid #ccc;
}

2、小程序js代码

Page({
  data: {
    couponCode: '',
    couponValue: 0,
    couponTitle: ''
  },

  onCodeInput(e) {
    this.setData({
      couponCode: e.detail.value
    })
  },

  onValueInput(e) {
    this.setData({
      couponValue: e.detail.value
    })
  },

  onTitleInput(e) {
    this.setData({
      couponTitle: e.detail.value
    })
  },
  generateQRCode() {
    const { couponCode, couponValue, couponTitle } = this.data;
  
    // 构造二维码链接
    const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=${encodeURIComponent(`优惠码：${couponCode}，优惠金额：${couponValue}，优惠标题：${couponTitle}`)}`;
  
    // 下载二维码图片资源
    wx.downloadFile({
      url: qrCodeUrl,
      success: (res) => {
        // 下载成功后获取图片本地路径
        const filePath = res.tempFilePath;
        // 在canvas中生成二维码图片
        const context = wx.createCanvasContext('myCanvas');
        context.drawImage(filePath, 0, 0, 100, 100);
        context.draw();
      },
      fail: (err) => {
        console.error(err);
      }
    });
  }


})

直接cv就行