vue + springboot 做微信支付代码

以下是一个简单的示例代码，演示如何使用Vue和Spring Boot实现微信支付：

前端Vue代码：

<template>
  <div>
    <button @click="pay">微信支付</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  methods: {
    pay() {
      axios.post('/api/wechat/pay').then(response => {
        const data = response.data
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            'appId': data.appId, //公众号名称，由商户传入
            'timeStamp': data.timeStamp, //时间戳，自1970年以来的秒数
            'nonceStr': data.nonceStr, //随机串
            'package': data.packageValue,
            'signType': data.signType, //微信签名方式：
            'paySign': data.paySign //微信签名
          },
          function (res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
              alert('支付成功')
            } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
              alert('取消支付')
            } else {
              alert('支付失败')
            }
          }
        )
      })
    }
  }
}
</script>

后端Spring Boot代码：

@RestController
@RequestMapping("/api/wechat")
public class WechatController {

    @Autowired
    private WechatPayService wechatPayService;

    @PostMapping("/pay")
    public Map<String, String> pay() throws Exception {
        return wechatPayService.unifiedOrder();
    }
}

@Service
public class WechatPayServiceImpl implements WechatPayService {

    @Autowired
    private WechatPayConfig wechatPayConfig;

    @Override
    public Map<String, String> unifiedOrder() throws Exception {
        //生成微信支付参数
        Map<String, String> parameters = new HashMap<>();
        parameters.put("appid", wechatPayConfig.getAppId());
        parameters.put("mch_id", wechatPayConfig.getMchId());
        parameters.put("nonce_str", UUID.randomUUID().toString().replace("-", ""));
        parameters.put("body", "测试商品");
        parameters.put("out_trade_no", UUID.randomUUID().toString().replace("-", ""));
        parameters.put("total_fee", "1");
        parameters.put("spbill_create_ip", "127.0.0.1");
        parameters.put("notify_url", wechatPayConfig.getNotifyUrl());
        parameters.put("trade_type", "JSAPI");
        parameters.put("openid", "openid");
        String sign = WechatPayUtil.generateSignature(parameters, wechatPayConfig.getKey());
        parameters.put("sign", sign);
        //调用微信支付统一下单API
        String xml = WechatPayUtil.mapToXml(parameters);
        String result = HttpUtil.post(wechatPayConfig.getUnifiedOrderUrl(), xml);
        Map<String, String> resultMap = WechatPayUtil.xmlToMap(result);
        //生成前端需要的支付参数
        Map<String, String> payParameters = new HashMap<>();
        payParameters.put("appId", wechatPayConfig.getAppId());
        payParameters.put("timeStamp", String.valueOf(System.currentTimeMillis() / 1000));
        payParameters.put("nonceStr", UUID.randomUUID().toString().replace("-", ""));
        payParameters.put("packageValue", "prepay_id=" + resultMap.get("prepay_id"));
        payParameters.put("signType", "MD5");
        String paySign = WechatPayUtil.generateSignature(payParameters, wechatPayConfig.getKey());
        payParameters.put("paySign", paySign);
        return payParameters;
    }
}

@Configuration
@ConfigurationProperties(prefix = "wechat.pay")
public class WechatPayConfig {

    private String appId; //公众账号ID
    private String mchId; //商户号
    private String key; //商户密钥
    private String unifiedOrderUrl; //统一下单地址
    private String notifyUrl; //支付结果通知地址

    //省略getter和setter方法
}

以上代码示例中，前端Vue代码中使用axios发送POST请求到后端的`/api/wechat/pay`接口，后端Spring Boot代码中生成微信支付参数，调用微信支付统一下单API，然后将生成的前端需要的支付参数返回给前端。前端再将支付参数传给微信客户端进行支付。