如何为微信小程序添加扫码支付和二维码收款功能

添加扫码支付和二维码收款功能的微信小程序需要依赖微信支付和二维码生成的接口。下面是一个详细的代码案例来添加这两个功能。

1. 扫码支付功能

首先，你需要在微信支付商户平台上创建一个支付应用，并获取到相关的商户号和支付密钥。

在小程序的前端页面，你需要引入微信支付的 JS SDK，并初始化支付配置。可以在 app.js 文件中添加如下代码：

App({
  onLaunch: function() {
    wx.request({
      // 获取支付配置
      url: 'https://your-domain.com/api/getPaymentConfig',
      success: function(res) {
        // 初始化支付配置
        wx.requestPayment({
          timeStamp: res.data.timeStamp,
          nonceStr: res.data.nonceStr,
          package: res.data.package,
          signType: 'MD5',
          paySign: res.data.paySign,
          success: function(res) {
            // 支付成功的回调
            console.log('支付成功');
          },
          fail: function(res) {
            // 支付失败的回调
            console.log('支付失败');
          }
        })
      }
    })
  }
})

在后端服务器上，你需要提供一个接口来获取支付配置。可以使用 Node.js 的 Express 框架来创建一个简单的服务器，代码如下：

const express = require('express');
const app = express();

app.get('/api/getPaymentConfig', function(req, res) {
  const timeStamp = Math.floor(Date.now() / 1000).toString();
  const nonceStr = 'your-nonceStr';
  const package = 'prepay_id=your-prepay-id';
  const paySign = 'your-paysign';

  res.json({
    timeStamp: timeStamp,
    nonceStr: nonceStr,
    package: package,
    paySign: paySign
  });
});

app.listen(3000, function() {
  console.log('Server listening on port 3000');
});

1. 二维码收款功能

在小程序的前端页面，你可以使用 wx.createCanvasContext 创建一个画布，然后使用 context.drawImage 方法来绘制二维码。代码如下：

Page({
  onReady: function() {
    const context = wx.createCanvasContext('qrcodeCanvas');

    wx.request({
      // 获取二维码信息
      url: 'https://your-domain.com/api/getQRCodeInfo',
      success: function(res) {
        const qrCodeText = res.data.qrCodeText;

        // 绘制二维码
        context.drawImage('/path/to/qrcode.png', 0, 0, 200, 200);

        // 绘制二维码文本
        context.setFontSize(14);
        context.fillText(qrCodeText, 20, 230);

        context.draw();
      }
    })
  }
})

在后端服务器上，你需要提供一个接口来获取二维码信息。可以使用 Node.js 的 Express 框架来创建一个简单的服务器，代码如下：

const express = require('express');
const app = express();

app.get('/api/getQRCodeInfo', function(req, res) {
  const qrCodeText = 'your-qrCodeText';

  res.json({
    qrCodeText: qrCodeText
  });
});

app.listen(3000, function() {
  console.log('Server listening on port 3000');
});

以上是一个简单的小程序代码案例，实现了扫码支付和二维码收款功能。当然，你需要根据自己的需求和实际情况，对这些代码进行适当的修改和扩展。