移动端实现微信支付功能

目录

移动端微信支付有以下好处：

1.前端实现

2.后端实现

---

移动端微信支付有以下好处：

1. 方便快捷：用户只需要打开微信，扫码或输入商家提供的支付金额，即可完成支付。

2. 安全可靠：微信支付采用高级加密技术，确保用户支付信息的安全性。

3. 全天候服务：微信支付支持24小时不间断的支付服务，用户可以随时随地进行付款。

4. 适用范围广：微信支付已经覆盖了众多消费场合，包括线上购物、线下实体店铺、公共交通等。

5. 管理简单：商家可以通过微信支付后台管理系统轻松管理支付，包括查询交易记录、退款等操作。

总之，移动端微信支付方便快捷、安全可靠，是一种用户体验良好的支付方式

这是一个简单的Java + Vue实现移动端微信支付的例子：

1.前端实现

在Vue项目中添加一个支付页面，用户可选择支付金额，点击支付按钮后调用后端接口获取微信支付参数，并使用WeixinJSBridge调起微信支付。

<template>
  <div>
    <h2>支付页面</h2>
    <div>
      <label>支付金额：</label>
      <select v-model="amount">
        <option value="1">1元</option>
        <option value="10">10元</option>
        <option value="100">100元</option>
      </select>
    </div>
    <br>
    <div>
      <button @click="pay">支付</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PayPage',

  data() {
    return {
      amount: '1'
    }
  },

  methods: {
    // 调用后端接口获取微信支付参数
    getPayParams() {
      return this.$axios.get('/api/pay/params', {
        params: {
          amount: this.amount
        }
      })
    },

    // 调起微信支付
    callWeixinPay(payParams) {
      return new Promise((resolve, reject) => {
        if (typeof WeixinJSBridge == "undefined") {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
          }
        } else {
          onBridgeReady(payParams);
        }

        function onBridgeReady(payParams) {
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
              "appId": payParams.appId, // 公众号名称，由商户传入
              "timeStamp": payParams.timestamp, // 时间戳，自1970年以来的秒数
              "nonceStr": payParams.nonceStr, // 随机串
              "package": payParams.package, // 微信规定格式的订单详情扩展字符串，固定值"prepay_id="加微信订单号
              "signType": "MD5", // 微信签名方式：
              "paySign": payParams.paySign // 微信支付签名
            },
            function(res) {
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                resolve();
              } else {
                reject(res.err_desc || "支付失败");
              }
            }
          );
        }
      })
    },

    // 支付按钮点击事件
    pay() {
      // 调用后端接口获取微信支付参数
      this.getPayParams().then((response) => {
        // 调起微信支付
        this.callWeixinPay(response.data).then(() => {
          this.$router.push('/pay-success')
        }).catch((error) => {
          alert(error)
        })
      }).catch((error) => {
        alert(error)
      })
    }
  }
}
</script>

2.后端实现

在Spring Boot项目中添加一个支付接口，用户传递支付金额，后端使用微信官方提供的统一下单API生成预支付订单，返回给前端支付参数。

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

    @Autowired
    private WxConfig wxConfig;

    /**
     * 获取微信支付参数
     */
    @GetMapping("/params")
    public ResultData<Map<String, String>> getPayParams(@RequestParam int amount) {
        try {
            String nonceStr = UUID.randomUUID().toString().replace("-", "");
            String outTradeNo = UUID.randomUUID().toString().replace("-", "");

            // 组装请求参数
            Map<String, String> data = new HashMap<>();
            data.put("appid", wxConfig.getAppId());
            data.put("mch_id", wxConfig.getMchId());
            data.put("nonce_str", nonceStr);
            data.put("body", "测试支付");
            data.put("out_trade_no", outTradeNo);
            data.put("total_fee", String.valueOf(amount));
            data.put("spbill_create_ip", "127.0.0.1");
            data.put("notify_url", "http://localhost:8080/api/pay/notify");
            data.put("trade_type", "APP");

            // 签名
            String sign = WxPayUtil.generateSignature(data, wxConfig.getMchKey());
            data.put("sign", sign);

            // 统一下单
            String xml = WxPayUtil.mapToXml(data); // 将请求参数转换为XML格式
            String responseXml = HttpUtil.post("https://api.mch.weixin.qq.com/pay/unifiedorder", xml); // 发送POST请求
            Map<String, String> responseMap = WxPayUtil.xmlToMap(responseXml); // 转换为Map格式

            // 组装支付参数
            Map<String, String> payParams = new HashMap<>();
            payParams.put("appId", wxConfig.getAppId());
            payParams.put("timeStamp", String.valueOf(System.currentTimeMillis() / 1000));
            payParams.put("nonceStr", UUID.randomUUID().toString().replace("-", ""));
            payParams.put("package", "prepay_id=" + responseMap.get("prepay_id"));
            payParams.put("signType", "MD5");
            payParams.put("paySign", WxPayUtil.generateSignature(payParams, wxConfig.getMchKey()));

            return ResultData.success(payParams);
        } catch (Exception e) {
            e.printStackTrace();
            return ResultData.error(ResultCode.FAIL, "获取支付参数失败");
        }
    }

    /**
     * 支付结果通知接口
     */
    @PostMapping("/notify")
    public String payNotify(HttpServletRequest request) {
        try {
            String xml = HttpUtil.readData(request.getInputStream());
            Map<String, String> data = WxPayUtil.xmlToMap(xml);
            if (WxPayUtil.isSignatureValid(data, wxConfig.getMchKey())) {
                if (data.get("return_code").equals("SUCCESS") && data.get("result_code").equals("SUCCESS")) {
                    // 支付成功，业务处理
                    // ...

                    // 返回通知结果
                    Map<String, String> resultMap = new HashMap<>();
                    resultMap.put("return_code", "SUCCESS");
                    resultMap.put("return_msg", "OK");
                    return WxPayUtil.mapToXml(resultMap);
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        // 返回通知结果
        Map<String, String> resultMap = new HashMap<>();
        resultMap.put("return_code", "FAIL");
        resultMap.put("return_msg", "ERROR");
        return WxPayUtil.mapToXml(resultMap);
    }
}

以上是一个简单的Java + Vue实现移动端微信支付的例子