UniApp + SpringBoot 实现微信支付和退款功能

UniApp 是一款跨平台的移动应用开发框架，通常可同时构建出 iOS 和 Android 应用。SpringBoot 是一款流行的 Java Web 开发框架，提供了快速搭建 web 应用的能力。通过结合起来，可以实现微信支付和退款功能。

第一步：注册微信开发者账号

如果没有微信开发者账号，需要手动注册一个。注册成功后，需要进行微信支付相关的配置，包括商户 ID、商户密钥、应用 ID 等等。

第二步：配置 Java 后端

1. SpringBoot 配置文件中添加微信支付相关配置参数

properties
wechat.pay.url=https://api.mch.weixin.qq.com/
wechat.pay.app-id=your-app-id
wechat.pay.mch-id=your-merchant-id
wechat.pay.api-key=your-api-key
2. 实现微信支付

编写后端支付接口，调用微信支付的 API 完成支付操作。

```java
@PostMapping("/wxpay")
public WxPayResponse wxpay(@RequestParam("openid") String openid,
@RequestParam("fee") int fee,
@RequestParam("description") String description,
HttpServletRequest request) {

  // 创建 WxPayUnifiedOrderRequest 对象
  WxPayUnifiedOrderRequest wxPayUnifiedOrderRequest = new WxPayUnifiedOrderRequest();
  wxPayUnifiedOrderRequest.setDeviceInfo("WEB");
  ...
  wxPayUnifiedOrderRequest.setTotalFee(fee);
  wxPayUnifiedOrderRequest.setDescription(description);

  // 调用统一下单 API
  try {
      WxPayUnifiedOrderResult result = wxPayService.unifiedOrder(wxPayUnifiedOrderRequest);
      // 返回前端调用微信支付 SDK 的参数
      return buildWxPayResponse(result);
  } catch (Exception e) {
      logger.error(e.getMessage());
  }
  return null;

}
```

1. 实现微信退款

编写后端退款接口，调用微信退款的 API 完成退款操作。

```java
@PostMapping("/refund")
public boolean refund(int orderId, HttpServletRequest request) {
// 根据订单号获取订单信息
Order order = orderService.getOrderById(orderId);

  // 创建退款请求对象
  WxPayRefundRequest wxPayRefundRequest = new WxPayRefundRequest();
  wxPayRefundRequest.setOutTradeNo(order.getOutTradeNo());
  wxPayRefundRequest.setOutRefundNo(order.getOutRefundNo());
  wxPayRefundRequest.setTotalFee(order.getTotalFee());
  wxPayRefundRequest.setRefundFee(order.getRefundFee());

  // 调用退款 API
  try {
      WxPayRefundResult result = wxPayService.refund(wxPayRefundRequest);
      if (result.getReturnCode().equals("SUCCESS") && result.getResultCode().equals("SUCCESS")) {
          return true;
      }
  } catch (Exception e) {
      logger.error(e.getMessage());
  }
  return false;

}
```

第三步：配置 UniApp 前端

在 UniApp 项目中，需要使用微信支付 SDK 完成支付和退款操作。

1. 安装微信支付 SDK

bash
npm install weixin-js-sdk

1. 调用微信支付 SDK

javascript
export function pay(openid, fee, description) {
uni.request({
url: '/wxpay',
data: {
openid,
fee,
description
},
method: 'POST',
success: function (res) {
if (res.statusCode === 200) {
let data = res.data;
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
'appId': data.appId,
'timeStamp': data.timeStamp,
'nonceStr': data.nonceStr,
'package': data.package,
'signType': data.signType,
'paySign': data.paySign
},
function (res) {
if (res.err_msg === "get_brand_wcpay_request:ok") {
uni.showModal({
content: "支付成功",
showCancel: false
});
} else {
uni.showModal({
content: "支付失败" + res.err_msg,
showCancel: false
});
}
});
} else {
uni.showModal({
content: "支付失败",
showCancel: false
});
}
}
});
}

1. 调用微信退款 SDK

javascript
export function refund(orderId) {
uni.request({
url: '/refund',
data: {
orderId
},
method: 'POST',
success: function (res) {
if (res.statusCode === 200 && res.data === true) {
uni.showModal({
content: "退款成功",
showCancel: false
});
} else {
uni.showModal({
content: "退款失败" + res.err_msg,
showCancel: false
});
}
}
});
}

示例

• 微信支付宝方式支付价值599元高清图库
• 微信支付宝支付开发流程