uniapp接入微信支付流程

### UniApp 中集成微信支付功能

#### 一、准备工作

为了在 UniApp 应用中成功集成微信支付，需先完成必要的前期准备。这包括但不限于获取并配置微信支付所需的各项参数。

确保已拥有有效的 `appId` 和其他必要凭证，这些信息可在微信公众平台和微信支付商户平台上找到[^2]。

pay:
  appId: wxxxxxxxxxxxxxxx # 小程序应用ID
  apiKey: xxxxxxxxxxxxxxxx # 商户私钥Key
  mchId: xxxxxxxxxxxxxxxx # 商户号
  appSecret: xxxxxxxxxxxxxxxx # 小程序密钥
  notifyUrl: https://example.com/callback # 支付回调地址

#### 二、服务端接口开发

服务端负责处理来自客户端的请求以及与微信官方服务器之间的通信。通常情况下，会采用 Spring Boot 框架来构建后端逻辑，并通过 MyBatis 进行数据库操作[^3]。

编写用于发起预支付订单的服务端 API：

@RestController
@RequestMapping("/api/pay")
public class PayController {

    @PostMapping("/createOrder")
    public ResponseEntity<String> createOrder(@RequestBody Map<String, Object> body) {
        String outTradeNo = (String)body.get("out_trade_no");
        BigDecimal totalFee = new BigDecimal((Double)body.get("total_fee"));
        
        WxPayService wxPayService = new WxPayServiceImpl();
        try {
            WXPayResult result = wxPayService.createOrder(outTradeNo, totalFee);
            return ResponseEntity.ok(result.toJson());
        } catch (Exception e) {
            log.error(e.getMessage(), e);
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
        }
    }

}

此部分代码展示了创建预支付订单的过程，其中涉及到了调用微信支付 SDK 的方法来生成交易单据。

#### 三、前端页面设计

利用 Vue.js 或者 uni-app 提供的各种组件快速搭建起美观易用的界面。当用户点击“立即付款”按钮时触发相应的事件处理器函数，在该函数内部执行如下 JavaScript 代码片段以启动微信内置浏览器内的 JSAPI 支付流程[^1]。

methods: {
    async handlePayment() {
      const res = await this.$http.post('/api/pay/createOrder', { /* 订单详情 */ });
      
      if (!res.success) throw new Error('Failed to get prepay id');
      
      let paymentInfo = JSON.parse(res.data);

      // 调用微信JS-SDK中的chooseWXPay方法来进行支付
      wx.chooseWXPay({
          timestamp: paymentInfo.timeStamp,
          nonceStr: paymentInfo.nonceStr,
          package: 'prepay_id=' + paymentInfo.prepayId,
          signType: "MD5",
          paySign: paymentInfo.paySign,

          success(response){
              console.log('payment succeeded:', response);
          },
          
          fail(error){
              console.warn('payment failed:', error);
          }
      })
    }
}

上述代码实现了从前端向后端发送请求获取预支付 ID 并最终调用微信提供的 chooseWXPay 方法完成实际支付行为的核心过程。

---