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\n");//回調地址
            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>