Uniapp 前端代码
创建支付按钮及事件处理
首先，我们需要在前端创建一个支付按钮，并在点击按钮时触发支付事件。
<template> <view> <!-- 支付按钮 --> <button type="primary" @click="requestPayment">支付</button> </view> </template> <script> export default { methods: { async requestPayment() { try { // 请求后端接口，获取支付参数 const response = await uni.request({ url: 'http://your-backend-api-url/alipay/order', method: 'POST', data: { amount: 0.01, // 支付金额，单位：元 orderDescription: '测试订单' } }); const { tradeNO } = response.data; // 调用支付宝支付API uni.requestPayment({ provider: 'alipay', orderInfo: tradeNO, // 后端返回的订单号 success: function (res) { console.log('支付成功', res); }, fail: function (err) { console.error('支付失败', err); } }); } catch (err) { console.error('支付请求失败', err); } } } }; </script>
说明：
requestPayment方法中，我们首先向后端发送请求，获取支付参数（订单号）。- 调用
uni.requestPayment方法进行支付。
后端 Java 代码
创建订单接口
在后端，我们需要一个接口来生成订单并返回支付宝支付所需的参数。
import com.alipay.api.AlipayApiException; import com.alipay.api.AlipayClient; import com.alipay.api.DefaultAlipayClient; import com.alipay.api.request.AlipayTradeCreateRequest; import com.alipay.api.response.AlipayTradeCreateResponse; import org.springframework.web.bind.annotation.*; @RestController @RequestMapping("/alipay") public class AlipayController { private final AlipayClient alipayClient; public AlipayController() { // 初始化AlipayClient this.alipayClient = new DefaultAlipayClient( "https://openapi.alipay.com/gateway.do", // 支付宝网关 "your-app-id", // 支付宝AppID "your-app-private-key", // 应用私钥 "json", "UTF-8", "your-alipay-public-key", // 支付宝公钥 "RSA2" // 签名类型 ); } @PostMapping("/order") public Map<String, Object> createOrder(@RequestBody Map<String, Object> request) { Map<String, Object> responseMap = new HashMap<>(); try { // 创建支付请求 AlipayTradeCreateRequest alipayRequest = new AlipayTradeCreateRequest(); alipayRequest.setBizContent("{\"out_trade_no\":\"" + System.currentTimeMillis() + "\"," + "\"total_amount\":\"" + request.get("amount") + "\"," + "\"subject\":\"" + request.get("orderDescription") + "\"," + "\"buyer_id\":\"2088102176495904\"}"); // 发送请求 AlipayTradeCreateResponse response = alipayClient.execute(alipayRequest); if (response.isSuccess()) { responseMap.put("tradeNO", response.getTradeNo()); } else { responseMap.put("error", "支付宝订单创建失败"); } } catch (AlipayApiException e) { responseMap.put("error", "调用支付宝API失败"); } return responseMap; } }
说明：
- 初始化
AlipayClient，需要配置支付宝网关、应用ID、应用私钥和支付宝公钥等参数。 - 在
createOrder方法中，接收前端请求，生成订单并调用支付宝API创建支付订单，最后将订单号返回给前端。
配置文件（application.properties）
确保在 application.properties 文件中配置必要的支付宝信息。
alipay.app-id=your-app-id alipay.private-key=your-app-private-key alipay.public-key=your-alipay-public-key alipay.gateway-url=https://openapi.alipay.com/gateway.do alipay.sign-type=RSA2
总结
通过上述代码，我们实现了一个简单的Uniapp支付宝小程序支付功能。前端通过点击按钮请求后端创建订单，并调用支付宝支付接口进行支付。后端使用Java与支付宝API进行交互，生成订单并返回支付参数。这是一个基础示例，可以根据实际需求进行扩展和优化。
