Vue+springboot 微信支付步骤（Native）

干的不能再干，分享给你们！！！！

微信支付步骤：

学习内容来自网络，学习地址推荐在最后
步骤比较多，需要花费点时间看完

一.注册成为微信支付的商户

如果你无法注册成商户
可以使用下面提供的千峰商户信息用于开发，我们使用的是Nateive支付
开发文档：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_1

二.下载SDK

选择好自己的语言来下载

三.在SDK中开发

1.解压SDK将pom.xml中的依赖复制到你项目中的pom.xml中，或者重新创建一个项目将pom.xml文件导入

利用maven加载依赖

2.将SDK文件下的所有文件复制到你的项目中

3.编写配置类MyWXPayDomain实现IWXPayDomain接口

public class MyWXPayDomain implements IWXPayDomain {
    @Override
    public void report(String domain, long elapsedTimeMillis, Exception ex) {

    }

    @Override
    public DomainInfo getDomain(WXPayConfig config) {
        DomainInfo domainInfo = new DomainInfo("api.mch.weixin.qq.com",true);
        return domainInfo;
    }
}

4.编写配置类MyWXPayConfig继承WXPayConfig

public class MyWXPayConfig extends WXPayConfig{
    /*商家注册微信支付之后会生成一个应用ID*/
    @Override
    String getAppID() {
        return "wx632c8f211f8122c6";
    }

    /*商户的ID*/
    @Override
    String getMchID() {
        return "1497984412";
    }

    @Override
    String getKey() {
        return "sbNCm1JnevqI36LrEaxFwcaT0hkGxFnC";
    }

    @Override
    InputStream getCertStream() {
        return null;
    }

    @Override
    IWXPayDomain getWXPayDomain() {
        MyWXPayDomain myWXPayDomain = new MyWXPayDomain();
        return myWXPayDomain;
    }
}

5.编写Controller实现支付效果
   5-1   通过图片的形式讲解用户下单-支付的整个流程

                                                            图片来自网络

   5-2   创建WXPayController

@RestController
@RequestMapping("/wxpay")
public class WXPayController {

    //编写下单接口
    @RequestMapping("/daPay/{enrollPay}")
    public void doPay(HttpServletResponse response,
                      @PathVariable("enrollPay") String enrollPay) throws Exception {
        //用于生成订单编号的随机数
        DateTimeUtil dateTimeUtil = new DateTimeUtil();
        String pid = "2020";//商品id
        String orderId = dateTimeUtil.getOrder()+pid;
        Double pay = Double.valueOf(enrollPay);

        System.out.println(pay+"-----------======");
        pay = pay*100;
        System.out.println(pay.intValue()+"-----------======2");//double转换为int
        String total_fee = String.valueOf(pay.intValue());

        //创建配置对象
        MyWXPayConfig config = new MyWXPayConfig();
        //创建支付对象
        WXPay wxpay = new WXPay(config);
        //将一些源数据存入到Map集合中
        Map<String, String> data = new HashMap<String, String>();
        data.put("body", "wz-社团报名费用");
        data.put("out_trade_no", orderId);//订单编号
        data.put("device_info", "");//设备信息
        data.put("fee_type", "CNY");//货币单位：分
        data.put("total_fee", total_fee);//1分
        data.put("spbill_create_ip", "123.12.12.123");//过滤的IP地址，为了让某些用户不可以扫我的码
        data.put("notify_url", "http://localhost/wxpay/notify_url");//回调接口，获取此次微信支付的信息
        data.put("trade_type", "NATIVE");  // 此处指定为扫码支付
        data.put("product_id", pid);//商品ID

        //向微信后台发起支付请求
        Map<String, String> resp = wxpay.unifiedOrder(data);

        System.out.print(resp);
        //得到一个二维码的链接  code_url
        String code_url = resp.get("code_url");
    }

    //用户扫码支付成功之后会调用这个接口
    @RequestMapping("/notify_url")
    public void getNotifyURL(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //在请求消息中获得数据
        ServletInputStream inputStream = request.getInputStream();
        byte[] b = new byte[1024];
        int len = 0;
        while((len = inputStream.read(b)) != -1) {
            String str = new String(b, 0, len);
            System.out.print(str);
        }
        //返回一个标准格式的回信，返回给前端，这个用户支付成功了，可以进行下一步操作了
        response.getWriter().write("<xml><return_code><![CDATA[SUCCESS]]></return_code>  <return_msg><![CDATA[OK]]></return_msg></xml> ");

      
}

本模块提供了一个回调接口http://localhost/wxpay/notify_url是微信后台所调用的，所以我们的localhost不能这样写，应该应用内网穿透工具将本地服务器暴露在公网上，以便微信后台可以直接访问。
下面介绍内网穿透

   5-3   内网穿透
内网穿透是将本地服务器暴露在公网上，供公网的用户访问

(1)推荐使用natapp.cn 浏览器地址栏输入即可
进去之后是这样的
(2)注册自己的账号登录购买免费隧道

（3）查看已有隧道，里面有个我们要用到的authtoken值

（4）下载客户端

（5）打开token.txt文件

（6）在你刚刚解压的文件目录下点击上方文件目录框，输入cmd点击回车

（7）将token.txt文件中的哪一行命令复制到这里，回车

6.导入ZXing自动生成二维码
  6-1导包

<!--ZXing-->
        <dependency>
            <groupId>com.google.zxing</groupId>
            <artifactId>core</artifactId>
            <version>3.2.0</version>
        </dependency>
        <dependency>
            <groupId>com.google.zxing</groupId>
            <artifactId>javase</artifactId>
            <version>3.2.0</version>
        </dependency>

  6-2重新编写WXPayController

@RestController
@RequestMapping("/wxpay")
public class WXPayController {

    //编写下单接口--学生点击报名按钮时调用
    @RequestMapping("/daPay/{enrollPay}")
    public void doPay(HttpServletResponse response,
                      @PathVariable("enrollPay") String enrollPay) throws Exception {
        //用于生成订单编号的随机数
        DateTimeUtil dateTimeUtil = new DateTimeUtil();
        String pid = "2020";//商品id
        String orderId = dateTimeUtil.getOrder()+pid;
        Double pay = Double.valueOf(enrollPay);

        System.out.println(pay+"-----------======");
        pay = pay*100;
        System.out.println(pay.intValue()+"-----------======2");//double转换为int
        String total_fee = String.valueOf(pay.intValue());

        //创建配置对象
        MyWXPayConfig config = new MyWXPayConfig();
        //创建支付对象
        WXPay wxpay = new WXPay(config);
        //将一些源数据存入到Map集合中
        Map<String, String> data = new HashMap<String, String>();
        data.put("body", "wz-社团报名费用");
        data.put("out_trade_no", orderId);//订单编号
        data.put("device_info", "");//设备信息
        data.put("fee_type", "CNY");//货币单位：分
        data.put("total_fee", total_fee);//1分
        data.put("spbill_create_ip", "123.12.12.123");//过滤的IP地址，为了让某些用户不可以扫我的码
        data.put("notify_url", "http://jdxg6z.natappfree.cc/wxpay/notify_url");//回调接口，获取此次微信支付的信息
        data.put("trade_type", "NATIVE");  // 此处指定为扫码支付
        data.put("product_id", pid);//商品ID

        //向微信后台发起支付请求
        Map<String, String> resp = wxpay.unifiedOrder(data);

        System.out.print(resp);
        //得到一个二维码的链接  code_url
        String code_url = resp.get("code_url");

        //运用ZXing自动生成二维码
        HashMap<EncodeHintType, Object> hints = new HashMap<>();
        hints.put(EncodeHintType.CHARACTER_SET, "UTF-8");
        hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.M);
        hints.put(EncodeHintType.MARGIN, 2);
        try {
            BitMatrix bitMatrix = new MultiFormatWriter().encode(code_url, BarcodeFormat.QR_CODE, 200, 200, hints);
            MatrixToImageWriter.writeToStream(bitMatrix, "PNG", response.getOutputStream());
            System.out.print("二维码创建完成");
        }catch (Exception e) {
            e.printStackTrace();
        }
    }

    //用户扫码支付成功之后会调用这个接口
    @RequestMapping("/notify_url")
    public void getNotifyURL(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //在请求消息中获得数据
        ServletInputStream inputStream = request.getInputStream();
        byte[] b = new byte[1024];
        int len = 0;
        while((len = inputStream.read(b)) != -1) {
            String str = new String(b, 0, len);
            System.out.print(str);
        }
        //返回一个标准格式的回信，返回给前端，这个用户支付成功了，可以进行下一步操作了
        response.getWriter().write("<xml><return_code><![CDATA[SUCCESS]]></return_code>  <return_msg><![CDATA[OK]]></return_msg></xml> ");
    }
}

6.导入GoEasy

6-1后台是springboot中导入GoEasy依赖包

6-2编写WXPayController

6-3在vue中的mian.js文件中导入以下代码

6-4编写vue支付页面

6-5利用GoEasy完成服务端向客户端推送，即后台springboot数据变化时前端vue也发生改变