微信小程序支付前端代码

以下是一个简单的微信小程序支付的前端代码示例：

// 小程序页面中的支付按钮点击事件
pay: function() {
  // 调用后台接口获取预支付订单信息
  wx.request({
    url: '后台接口地址',
    method: 'POST',
    data: {
      // 传递给后台的参数，如商品信息、订单金额等
    },
    success: function(res) {
      // 获取后台返回的预支付订单信息
      const orderInfo = res.data;

      // 调用微信支付接口
      wx.requestPayment({
        timeStamp: orderInfo.timeStamp,
        nonceStr: orderInfo.nonceStr,
        package: orderInfo.package,
        signType: 'MD5',
        paySign: orderInfo.paySign,
        success: function(res) {
          // 支付成功的处理逻辑
          console.log('支付成功');
        },
        fail: function(res) {
          // 支付失败的处理逻辑
          console.log('支付失败');
        }
      })
    },
    fail: function(res) {
      // 请求失败的处理逻辑
      console.log('请求失败');
    }
  })
}

在上述代码中，首先通过调用小程序内置的 `wx.request` 方法向后台发送请求，获取预支付订单信息。然后，使用 `wx.requestPayment` 方法调用微信支付接口，传入预支付订单信息进行支付操作。

在支付成功或失败的回调函数中，可以根据实际需求进行相应的处理，如更新订单状态、跳转到支付成功/失败页面等。

请注意，上述代码中的部分参数和接口地址需要根据实际情况进行替换和配置。同时，为了确保支付的安全性，需要在小程序后台服务器中进行签名验证和订单处理等操作。