微信小程序如何实现点击按钮 弹出二维码程序

以下是一个简单的微信小程序代码示例，实现点击按钮弹出二维码的功能：

1. 在wxml文件中添加一个按钮

<view>
  <button bindtap="showQRCode">显示二维码</button>
</view>

2. 在js文件中添加showQRCode()方法，用于生成二维码并弹出对话框显示

const QRCode = require('utils/weapp-qrcode.js'); // 引入二维码生成库

Page({
  showQRCode: function() {
    // 生成二维码图片
    var qrcode = new QRCode('canvas', {
      text: 'https://www.example.com', // 二维码内容
      width: 150, // 二维码宽度
      height: 150, // 二维码高度
      colorDark: '#000000', // 二维码颜色
      colorLight: '#ffffff', // 二维码背景色
      correctLevel: QRCode.CorrectLevel.H, // 二维码容错率
    });
    // 将生成的二维码图片转换成base64编码格式
    wx.canvasToTempFilePath({
      canvasId: 'canvas',
      success: function(res) {
        // 弹出对话框显示二维码图片
        wx.previewImage({
          urls: [res.tempFilePath],
        });
      },
    });
  },
});

3. 在wxml文件中添加一个canvas组件，用于生成二维码图片

<canvas id="canvas" style="display: none;"></canvas>

需要注意的是，在使用微信小程序提供的canvasToTempFilePath()方法将canvas生成的图片转换成base64编码时，需要将canvas组件的style属性设置为"display: none;"，否则会导致页面显示异常。另外，在弹出对话框显示二维码图片时，需要将图片的base64编码放入一个数组中，并将该数组作为urls参数传递给wx.previewImage()方法。