uni-app 中如何使用 wx.requestCommonPayment

在 uni-app 中，虽然 wx.requestCommonPayment 不是 uni-app 官方直接提供的 API，但你可以通过条件编译来调用微信小程序提供的原生支付接口 wx.requestPayment。对于其他平台（如 H5、App、支付宝小程序等），则需要分别调用各自平台的支付接口。

以下是一个示例，展示如何在 uni-app 中针对微信小程序平台使用 wx.requestPayment 进行支付：

1. 确保你已经获取到了微信支付的必要参数，这些参数通常由后端服务生成，包括 timeStamp、nonceStr、package、signType 和 paySign。

2. 在 uni-app 中编写支付逻辑：

// 在支付页面或组件的 methods 中定义支付函数
methods: {
  // 发起微信支付
  wxRequestPayment(paymentData) {
    #ifdef MP-WEIXIN // 条件编译，仅微信小程序有效
      wx.requestPayment({
        timeStamp: paymentData.timeStamp,
        nonceStr: paymentData.nonceStr,
        package: paymentData.package,
        signType: paymentData.signType,
        paySign: paymentData.paySign,
        success(res) {
          console.log('支付成功', res);
          // 支付成功后的逻辑处理
        },
        fail(err) {
          console.error('支付失败', err);
          // 支付失败后的逻辑处理
        }
      });
    #endif

    // 对于其他平台，可以在这里添加相应的支付逻辑
    #ifndef MP-WEIXIN
      console.warn('当前平台不支持直接使用 wx.requestPayment');
      // 调用对应平台的支付接口逻辑
    #endif
  }
}

// 在需要发起支付的地方调用这个函数
onLoad() {
  // 假设从后端获取的支付参数已经通过某种方式传递给了前端
  const paymentData = {
    timeStamp: '1633072899',
    nonceStr: 'randomString',
    package: 'prepay_id=wx20161010095653bf028842430795069078',
    signType: 'MD5',
    paySign: 'sign=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
  };
  this.wxRequestPayment(paymentData);
}

1. 注意事项：
   • paymentData 中的参数应该由你的后端服务生成，并确保其安全性和正确性。
   • 微信支付需要在微信公众平台上配置好支付目录和授权域名等。
   • 对于非微信小程序平台，你需要根据各自平台的支付文档进行适配，比如使用支付宝小程序的 my.tradePay，H5 的 WeixinJSBridge 接口等。

通过上述代码，你可以在 uni-app 中针对微信小程序平台实现支付功能。对于其他平台，你需要参考对应平台的支付文档进行实现。