微信小程序支付教程

微信小程序支付教程

Person：

• 微信小程序支付有几种版本，分别是什么，写一个详细教程介绍下

ChatGPT：

• 微信小程序支付主要有两种版本，分别为：JSSDK版本（v1.0）和WeixinJSBridge版本（v2.0）。这两种版本都支持微信支付，但在实现方式和一些功能上有所差异。下面将详细介绍这两种版本的使用方法。

1. JSSDK版本（v1.0）

1.1 获取支付参数
首先，你需要与服务器进行通信，获取微信支付所需的参数。这些参数通常包括：appId（小程序ID）、timeStamp（时间戳）、nonceStr（随机字符串）、package（数据包）、signType（签名方式）和paySign（签名）。

1.2 引入微信JSSDK
在小程序页面的js文件中，引入微信JSSDK：

const wxpay = require('path/to/your/wechat_jssdk.js');

1.3 发起支付请求
使用微信支付参数，调用JSSDK中的wx.requestPayment()方法发起支付请求：

wxpay.wx.requestPayment({
   
  timeStamp: timeStamp, // 时间戳
  nonceStr: nonceStr, // 随机字符串
  package: packageValue, // 数据包
  signType: signType, // 签名方式
  paySign: paySign, // 签名
  success(res) {
   
    // 支付成功后的回调函数
    console.log("支付成功", res);
  },
  fail(err) {
   
    // 支付失败后的回调函数
    console.log("支付失败", err);
  },
  complete() {
   
    // 支付完成后的回调函数（不论成功或失败）
  },
});

1. WeixinJSBridge版本（v2.0）

2.1 获取支付参数
同样，你需要与服务器进行通信，获取微信支付所需的参数。

2.2 调用WeixinJSBridge发起支付请求
在小程序页面的js文件中，调用WeixinJSBridge的invoke()方法发起支付请求：

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();
}

function onBridgeReady() {
   
  WeixinJSBridge.invoke(
    "getBrandWCPayRequest",
    {
   
      appId: appId, // 小程序ID
      timeStamp: timeStamp, // 时间戳
      nonceStr: nonceStr, // 随机字符串
      package: packageValue, // 数据包
      signType: signType, // 签名方式
      paySign: paySign, // 签名
    },
    function (res) {
   
      if (res.err_msg == "get_brand_wcpay_request:ok") {
   
        // 支付成功后的回调函数
        console.log("支付成功", res);
      } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
   
        // 支付取消后的回调函数
        console.log("支付取消", res);
      } else {
   

Person：

• 继续

ChatGPT：

// 支付失败后的回调函数
    console.log("支付失败", res);
  }
}

);
}

这就是微信小程序支付的两种版本及其使用方法。根据你的项目需求和偏好，可以选择合适的版本进行支付功能的实现。同时，不论使用哪种版本，都要确保与后端服务器的通信安全，以保证支付过程的顺利进行。

Person：

• 用Java如何实现，不要用官方的demo和api

ChatGPT：

• 在Java中实现微信小程序支付，你需要完成以下步骤：

1. 创建Maven项目并添加依赖
   创建一个Maven项目，并在pom.xml文件中添加以下依赖：

<dependencies>
    <dependency>
        <groupId>com.github.binarywang</groupId>
        <artifactId>wx-java-miniapp</artifactId>
        <version>4.2.0</version>
    </dependency>
    <dependency>
        <groupId>com.github.binarywang</groupId>
        <artifactId>wx-java-common</artifactId>
        <version>4.2.0</version>
    </dependency>
</dependencies>

1. 配置微信支付参数
   在src/main/resources目录下创建一个名为wxpay.properties的配置文件，并添加以下内容：

wx.miniapp.appid=你的小程序ID
wx.miniapp.secret=你的小程序密钥
wx.miniapp.token=你的token
wx.miniapp.aesKey=你的消息加解密密钥
wx.pay.mchId=你的商户ID
wx.pay.mchKey=你的商户密钥
wx.pay.notifyUrl=你的支付回调URL

1. 初始化WxMaService和WxPayService
   在项目中创建一个名为WxConfig的配置类，用于初始化WxMaService和WxPayService：

import me.chanjar.weixin.common.util.crypto.WxCryptUtil;
import me.chanjar.weixin.miniapp.api.WxMaService;
import me.chanjar.weixin.miniapp.api.impl.WxMaServiceImpl;
import me.chanjar.weixin.miniapp.config.impl.WxMaDefaultConfigImpl;
import me.chanjar.weixin.mp.config.impl.WxPayDefaultConfigImpl;
import me.chanjar.weixin.pay.api.WxPayService;
import me.chanjar.weixin.pay.api.impl.WxPayServiceImpl;

import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;

public class WxConfig {
   
    private static WxMaService wxMaService;
    private static WxPayService wxPayService;

    static {
   
        Properties prop = new Properties();
        try (InputStream is = WxConfig.class.getClassLoader().getResourceAsStream("wxpay.properties")) {
   
            prop.load(is);
        } catch (IOException e) {
   
            e.printStackTrace();
        }

        WxMaDefaultConfigImpl wxMaConfig = new WxMaDefaultConfigImpl();
        wxMaConfig.setAppid(prop.getProperty("wx.miniapp.appid"));
        wxMaConfig.setSecret(prop.getProperty("wx.miniapp.secret"));
        wxMaConfig.setToken(prop.getProperty("wx.miniapp.token"));
        wxMaConfig.setAesKey(prop.getProperty("wx.miniapp.aesKey"));

        wxMaService = new WxMaServiceImpl();
        wxMaService.setWxMaConfig(wxMaConfig);

        WxPayDefaultConfigImpl wxPayConfig = new WxPayDefaultConfigImpl();
        wxPayConfig.setAppId(prop.getProperty("wx.miniapp.appid"));
        wxPayConfig.setMchId(prop.getProperty("wx.pay.mchId"));
        wxPayConfig.setMchKey(prop.getProperty("wx.pay.mchKey"));
        wxPayConfig.setNotifyUrl(prop.getProperty("wx.pay.notifyUrl"));

        wxPayService = new WxPayServiceImpl();
        wxPayService.setConfig(wxPayConfig);
    }

    public static WxMaService getWxMaService() {
   
        return

Person：

• 继续

ChatGPT：

wxMaService;
}

public static WxPayService getWxPayService() {
   
    return wxPayService;
}

}

4. 创建支付接口
创建一个名为`WxPayController`的控制器类，用于处理支付请求：
```java
import com.github.binarywang.wxpay.bean.order.WxPayUnifiedOrderRequest;
import com.github.binarywang.wxpay.bean.order.WxPayUnifiedOrderResult;
import com.github.binarywang.wxpay.exception.WxPayException;
import me.chanjar.weixin.miniapp.api.WxMaService;

import java.math.BigDecimal;
import java.util.HashMap;
import java.util.Map;

public class WxPayController {
   
    private WxMaService wxMaService = WxConfig.getWxMaService();
    private WxPayService wxPayService = WxConfig.getWxPayService();

    public Map<String, String> unifiedOrder(String openId, BigDecimal amount, String body) {
   
        WxPayUnifiedOrderRequest orderRequest = new WxPayUnifiedOrderRequest();
        orderRequest.setBody(body)