java 微信支付开发（vue前端）

java 微信支付开发

1.所需依赖

		<dependency>
            <groupId>com.github.wxpay</groupId>
            <artifactId>wxpay-sdk</artifactId>
            <version>0.0.3</version>
        </dependency>

2.创建生成微信支付二维码和查询订单支付状态接口

• 创建WxPayController.java类

package com.xiaogui.wxpay.controller;

import com.xiaogui.security.common.results.ResultEnum;
import com.xiaogui.security.common.results.ResultResponse;
import com.xiaogui.wxpay.service.WxPayService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.Map;

/**
 * 微信支付
 */

@CrossOrigin
@RestController
@Api(value = "微信支付", tags = "微信支付")
@RequestMapping("/wxPay")
public class WxPayController {

    @Autowired
    private WxPayService wxPayService;

    @PostMapping("createQRCode")
    @ApiOperation(value = "生成微信支付二维码", notes = "生成微信支付二维码")
    public ResultResponse createQRCode() {
        //返回信息，包含二维码地址，还有其他需要的信息
        Map<String,String> map = wxPayService.createQRCode();
        return ResultResponse.of(map, ResultEnum.SUCCESS,true);
    }

    //参数：订单号，根据订单号查询 支付状态
    @PostMapping("queryPayStatus/{orderNo}")
    @ApiOperation(value = "查询订单支付状态", notes = "查询订单支付状态")
    public ResultResponse queryPayStatus(@PathVariable String orderNo) {
        Map<String,String> map = wxPayService.queryPayStatus(orderNo);
        System.out.println("*****查询订单状态map集合:"+map);
        if(map == null) {
            return ResultResponse.failed(ResultEnum.FAILURE,true);
        }
        //如果返回map里面不为空，通过map获取订单状态
        if(map.get("trade_state").equals("SUCCESS")) {//支付成功
            //添加记录到支付表，更新订单表订单状态
            wxPayService.updateOrdersStatus(map);
            return ResultResponse.of(true,101,"支付成功");
        }
        return ResultResponse.of(true,102,"支付中");

    }
}

• 创建 WxPayService.java类

package com.xiaogui.wxpay.service;

import com.github.wxpay.sdk.WXPayUtil;
import com.xiaogui.wxpay.utils.HttpClient;
import com.xiaogui.wxpay.utils.OrderNumberUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.Map;

@Service
@Slf4j
public class WxPayService {

	/**
     *生成微信支付二维码
     */
    public Map<String,String> createQRCode() {
        try {
            // 1.查询订单
            //2 使用map设置生成二维码需要参数
            Map<String,String> map = new HashMap<String, String>();
            // appid
            map.put("appid", "你的appid");
            // 商户号
            map.put("mch_id", "你的商户号");
            map.put("nonce_str", WXPayUtil.generateNonceStr());
            //标题
            map.put("body", "测试微信支付");
            //交易订单号
            map.put("out_trade_no", OrderNumberUtils.getOrderNumber());
            // 支付金额
            map.put("total_fee", "1");
            map.put("spbill_create_ip", "127.0.0.1");
            // 回调地址
            map.put("notify_url", "你的微信回调地址");
            // 扫码支付
            map.put("trade_type", "NATIVE");

            //3 发送httpclient请求，传递参数xml格式，微信支付提供的固定的地址
            HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder");
            //设置xml格式的参数
            // 商户key
            client.setXmlParam(WXPayUtil.generateSignedXml(map, "你的商户key"));
            client.setHttps(true);
            //执行post请求发送
            client.post();

            //4 得到发送请求返回结果
            //返回内容，是使用xml格式返回
            String xml = client.getContent();

            //把xml格式转换map集合，把map集合返回
            Map<String, String> resultMap = WXPayUtil.xmlToMap(xml);

            //最终返回数据 的封装
            Map<String,String> resultMaps = new HashMap<String, String>();
            //返回二维码操作状态码
            resultMaps.put("result_code", resultMap.get("result_code"));
            //二维码地址
            resultMaps.put("code_url", resultMap.get("code_url"));

            return resultMaps;
        } catch (Exception e) {
            e.printStackTrace();
            log.error("生成二维码失败");
            return null;
        }
    }

    /**
     *查询订单支付状态
     */
    public Map<String, String> queryPayStatus(String orderNo) {
        try {
            //1、封装参数
            Map<String,String> map = new HashMap<>();
            map.put("appid", "你的appid");
            // 商户号
            map.put("mch_id", "你的商户号");
            // 交易订单号
            map.put("out_trade_no", orderNo);
            // 随机数字符串
            map.put("nonce_str", WXPayUtil.generateNonceStr());

            //2 发送httpclient
            HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/orderquery");
            
            // 商户key
            client.setXmlParam(WXPayUtil.generateSignedXml(map,"你的商户key"));
            client.setHttps(true);
            client.post();

            //3 得到请求返回内容
            String xml = client.getContent();

            //4、转成Map再返回
            return WXPayUtil.xmlToMap(xml);
        }catch(Exception e) {
            e.printStackTrace();
            log.error("查询订单支付状态异常");
            return null;
        }
    }

    /**
     * 更新支付状态
     */
    public void updateOrdersStatus(Map<String, String> map) {
        // TODO
    }
}

• 前端可以使用vue的 vue-qriously插件
• 安装：npm install vue-qriously --save-dev
• main.js 入口文件：

		import Vue from 'vue'
		import VueQriously from 'vue-qriously'
		Vue.use(VueQriously)

• 需要展示二维码的vue页面中：

<template>
	<!-- qCode: 是你在你的vue实例中定义好的变量   
	size:是这个Canvas的大小，这里要根据你的视觉稿来决定-->
    <qriously :value="qCode" :size="300"/>     
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                qCode: '你自定定义的值url'
            }
        }
    }
</script>