vue整合微信支付

1.准备工作

首先在微信公众平台进行申请 https://mp.weixin.qq.com/ 这里需要几个值 关联的公众号appid、商户号和商户key ，当我们申请通过后就可以拿到这三个数据，就可以集成微信支付功能。

2.微信二维码接口

2.1 安装依赖

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

2.2 生成二维码

步骤：

1.根据订单号查询订单信息
2.根据map设置二维码需要参数
3.发送httpclient请求，传递参数
4.得到发送请求返回结果

1）创建工具类httpclient，用于发送请求

package com.gh.mp.eduOrder.utils;

import org.apache.http.Consts;
import org.apache.http.HttpEntity;
import org.apache.http.NameValuePair;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.*;
import org.apache.http.conn.ssl.SSLConnectionSocketFactory;
import org.apache.http.conn.ssl.SSLContextBuilder;
import org.apache.http.conn.ssl.TrustStrategy;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.message.BasicNameValuePair;
import org.apache.http.util.EntityUtils;

import javax.net.ssl.SSLContext;
import java.io.IOException;
import java.security.cert.CertificateException;
import java.security.cert.X509Certificate;
import java.text.ParseException;
import java.util.HashMap;
import java.util.LinkedList;
import java.util.List;
import java.util.Map;

/**
 * http请求客户端
 * 
 * @author qy
 * 
 */
public class HttpClient {
    private String url;
    private Map<String, String> param;
    private int statusCode;
    private String content;
    private String xmlParam;
    private boolean isHttps;

    public boolean isHttps() {
        return isHttps;
    }

    public void setHttps(boolean isHttps) {
        this.isHttps = isHttps;
    }

    public String getXmlParam() {
        return xmlParam;
    }

    public void setXmlParam(String xmlParam) {
        this.xmlParam = xmlParam;
    }

    public HttpClient(String url, Map<String, String> param) {
        this.url = url;
        this.param = param;
    }

    public HttpClient(String url) {
        this.url = url;
    }

    public void setParameter(Map<String, String> map) {
        param = map;
    }

    public void addParameter(String key, String value) {
        if (param == null)
            param = new HashMap<String, String>();
        param.put(key, value);
    }

    public void post() throws ClientProtocolException, IOException {
        HttpPost http = new HttpPost(url);
        setEntity(http);
        execute(http);
    }

    public void put() throws ClientProtocolException, IOException {
        HttpPut http = new HttpPut(url);
        setEntity(http);
        execute(http);
    }

    public void get() throws ClientProtocolException, IOException {
        if (param != null) {
            StringBuilder url = new StringBuilder(this.url);
            boolean isFirst = true;
            for (String key : param.keySet()) {
                if (isFirst)
                    url.append("?");
                else
                    url.append("&");
                url.append(key).append("=").append(param.get(key));
            }
            this.url = url.toString();
        }
        HttpGet http = new HttpGet(url);
        execute(http);
    }

    /**
     * set http post,put param
     */
    private void setEntity(HttpEntityEnclosingRequestBase http) {
        if (param != null) {
            List<NameValuePair> nvps = new LinkedList<NameValuePair>();
            for (String key : param.keySet())
                nvps.add(new BasicNameValuePair(key, param.get(key))); // 参数
            http.setEntity(new UrlEncodedFormEntity(nvps, Consts.UTF_8)); // 设置参数
        }
        if (xmlParam != null) {
            http.setEntity(new StringEntity(xmlParam, Consts.UTF_8));
        }
    }

    private void execute(HttpUriRequest http) throws ClientProtocolException,
            IOException {
        CloseableHttpClient httpClient = null;
        try {
            if (isHttps) {
                SSLContext sslContext = new SSLContextBuilder()
                        .loadTrustMaterial(null, new TrustStrategy() {
                            // 信任所有
                            public boolean isTrusted(X509Certificate[] chain,
                                    String authType)
                                    throws CertificateException {
                                return true;
                            }
                        }).build();
                SSLConnectionSocketFactory sslsf = new SSLConnectionSocketFactory(
                        sslContext);
                httpClient = HttpClients.custom().setSSLSocketFactory(sslsf)
                        .build();
            } else {
                httpClient = HttpClients.createDefault();
            }
            CloseableHttpResponse response = httpClient.execute(http);
            try {
                if (response != null) {
                    if (response.getStatusLine() != null)
                        statusCode = response.getStatusLine().getStatusCode();
                    HttpEntity entity = response.getEntity();
                    // 响应内容
                    content = EntityUtils.toString(entity, Consts.UTF_8);
                }
            } finally {
                response.close();
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            httpClient.close();
        }
    }

    public int getStatusCode() {
        return statusCode;
    }

    public String getContent() throws ParseException, IOException {
        return content;
    }

}

2）创建生成二维码接口，传递参数是订单号

    /**
     * 生成微信二维码接口,参数是订单号
     * @param orderNo
     * @return
     */
    @GetMapping("createNative/{orderNo}")
    public R createNative(@PathVariable String orderNo){
        Map map= tPayLogService.createNative(orderNo);
        return R.ok().data(map);
    }

3）创建service层，用于生成二维码

@Override
    public Map createNative(String orderNo) {
        try {
            //1.根据订单号查询订单信息
            QueryWrapper<TOrder> queryWrapper=new QueryWrapper<TOrder>();
            queryWrapper.eq("order_no",orderNo);
            TOrder order = orderService.getOne(queryWrapper);
            //2.根据map设置二维码需要参数
            Map m = new HashMap();
            m.put("appid", "wx74862e0dfcf69954");
            m.put("mch_id", "1558950191"); //商户号
            m.put("nonce_str", WXPayUtil.generateNonceStr()); //生成随机字符串
            m.put("body", order.getCourseTitle()); //生成二维码的名字
            m.put("out_trade_no", orderNo); //填写订单号
            m.put("total_fee", order.getTotalFee().multiply(new BigDecimal("100")).longValue()+"");//转换价格
            m.put("spbill_create_ip", "127.0.0.1"); //ip地址
            m.put("notify_url", "http://guli.shop/api/order/weixinPay/weixinNotify
");//回调地址
            m.put("trade_type", "NATIVE"); //支付类型
            //3.发送httpclient请求，传递参数
            HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder");
            //client设置参数
            client.setXmlParam(WXPayUtil.generateSignedXml(m, "T6m9iK73b0kn9g5v426MKfHQH7X8rKwb"));
            client.setHttps(true);
            //执行请求发送
            client.post();
            //4.得到发送请求返回结果,返回内容是使用xml格式返回
            String xml = client.getContent();
            //把xml格式转换成map集合，把map集合返回
            Map<String, String> resultMap = WXPayUtil.xmlToMap(xml);
            //最终返回数据的封装
            Map map = new HashMap();
            map.put("out_trade_no", orderNo);
            map.put("course_id", order.getCourseId());
            map.put("total_fee", order.getTotalFee());
            map.put("result_code", resultMap.get("result_code"));//返回二维码操作状态码
            map.put("code_url", resultMap.get("code_url"));//二维码地址
            return map;
        }catch (Exception e){
            e.printStackTrace();
            throw new EduException(20001,"获取二维码失败");
        }
    }

4）前端页面

首先通过命令 npm install vue-qriously 安装插件

在配置文件使用插件

import VueQriously from 'vue-qriously'

Vue.use(VueQriously)

创建前端页面 _pid.vue 用于展示二维码

<template>
    <div class="cart py-container">
        <!--主内容-->
        <div class="checkout py-container  pay">
            <div class="checkout-tit">
                <h4 class="fl tit-txt"><span class="success-icon"></span><span
                        class="success-info">订单提交成功，请您及时付款！订单号：{{payObj.out_trade_no}}</span>
                </h4>
                <span class="fr"><em class="sui-lead">应付金额：</em><em
                        class="orange money">￥{{payObj.total_fee}}</em></span>
                <div class="clearfix"></div>
            </div>
            <div class="checkout-steps">
                <div class="fl weixin">微信支付</div>
                <div class="fl sao">
                    <p class="red">请使用微信扫一扫。</p>
                    <div class="fl code">
                        <!-- <img id="qrious" src="~/assets/img/erweima.png" alt=""> -->
                        <!-- <qriously value="weixin://wxpay/bizpayurl?pr=R7tnDpZ" :size="338"/> -->
                        <qriously :value="payObj.code_url" :size="338" />
                        <div class="saosao">
                            <p>请使用微信扫一扫</p>
                            <p>扫描二维码支付</p>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
                <!-- <p><a href="pay.html" target="_blank">> 其他支付方式</a></p> -->

            </div>
        </div>
    </div>
</template>
<script>
    import { createNative, queryPayStatus } from '@/api/order'
    export default {
        data() {
            return {
                orderId: '',
                payObj: {},
                time1: ''
            }
        },
        created() {
            this.orderId = this.$route.params.pid
            this.createNative()
        },
        mounted() {
            this.time1 = setInterval(() => {
                 this.queryOrder()
            }, 3000)
        },
        methods: {
            createNative() {
                createNative(this.orderId).then(res => {
                    this.payObj = res.data.data
                })
            },
            queryOrder() {
                queryPayStatus(this.payObj.out_trade_no).then(res => {
                    if (res.data.success) {
                        clearInterval(this.time1)
                        this.$message({
                            type: 'success',
                            message: '支付成功'
                        })
                        //跳转到课程详情页面
                        this.$router.push({ path: '/course/' + this.payObj.course_id })
                    }
                })
            }
        }

    }
</script>