vue2 spa单页项目实现微信支付

spa单页项目实现微信支付坑比较多，一步一步来分析吧，相关技术vue2、 vue-router、vue-resource。服务器api不扯了。

具体功能：充值模块

• 实现思路

1.前端充值页面Recharge.vue请求服务器/api/user/recharge生成本地订单并返回订单号order_id
2.根据orderId请求服务器/api/wx/make-order来创建微信支付订单（微信统一下单api，涉及支付签名），该api主要功能是创建微信订单并且返回微信H5拉取支付控件chooseWXPay(params)的params参数

{
    appId: '',
    noceStr: '',
    package: '',
    paySign: '',
    signType: '',
    timestamp: ''    
}

3.通过调用wx.chooseWXpay(params)来拉取支付控件

params.success = res => {
    // 支付成功
};
wx.chooseWXPay(params);

4.剩下的就是服务器支付回调notify处理了

• 实现方案

服务端api

// 充值下单api
post /api/user/recharge
// 创建微信订单api  
// @params orderId
post /api/wx/make-order
// 生成sdk配置参数
// @params url 当前页面url地址
post /api/wx/sdk-config

充值路由 routes.js

import Recharge from './pages/home/Recharge.vue';
let routes = [
    { path: '/home/recharge',  component: Recharge},
]

充值组件 pages/home/Recharge.vue

<template>
    <div></div>
</template>
<script>
    export default {
        
    }
</script>

步骤

微信支付需要引入jssdk，先安装npm包npm install weixin-js-sdk --save
1.在Recharge.vue组件引入jssdk
2.配置jssdk的config即：

wx.config({
    debug: true,
    appId: '',
    timestamp: '', // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [
        'chooseWXPay'
    ]
})

由于涉及到签名，所以这些参数我通过服务器生成并返回，Recharge.vue代码如下：

<template>
    <div>
    </div>
</template>
<script>
    import wx from 'weixin-js-sdk'
    export default {
        data() {
            return {
                 wx: null
            }
        }
        created() {
            let config = {};
            config.url = window.location.href; // 当前页面url

            // 请求api返回sdk配置参数
            this.$http.post('/api/wx/sdk-config', config).then(ret => {
                config = ret.data.config;
                config.debug = true;
            
                config.jsApiList = [
                    'chooseWXPay'
                ];
                wx.config(config);
                wx.ready(() => {
                    this.wx = wx;
                });
            });
        }
    }
</script>

sdk配置就完成了。
3.下单并拉取支付控件

// Recharge.vue
methods : {
    // 请求api创建本地订单
    makeOrder() {
        this.$http.post('/api/user/recharge').then(ret => {
            this.makeWxOrder(ret.data.orderId);
        });
    },

    // 请求api创建微信订单并拉取支付控件
    makeWxOrder(orderId) {
         this.$http.post('/api/wx/make-order', {orderId: orderId}).then(ret => {
            // 得到返回的支付参数
            let params = ret.data.params;
            params.success = res => {
                // 支付成功
            };
            this.wx.chooseWXPay(params);
        });
    }
}

• 填坑

授权目录问题

微信授权目录是要精确到二级或三级目录，我用的vue-router hash模式，支付目录是www.xxx.com/#/home/recharge，但是微信支付目录验证不支持这种hash模式，所以在微信看来目录是错误。
网上有一种解决办法是在当前支付页面的#号前边加上?号www.xxx.com/?#/home/recharge，这样微信目录验证会忽略掉?号后的参数，微信会把请求页面的目录看做www.xxx.com/，但是目录要精确到二级或三级。
我的解决方法是所有微信前端都加上/wx前缀，在微信看来/wx下所有加了?号的hash页面都是支付目录，那微信支付目录就填的是www.xxx.com/wx/。
如何给当前页面加上?号呢，就是加载Rechage.vue组件时候判断url是否带有?号，没有则加上并跳转一下。

// Recharge.vue
created() {
    let config = {};
    config.url = window.location.href;
    // 判断当前url是否存在?参数匹配符
    if(!config.url.match(/\?/)) {
        location.replace(window.location.href.split('#')[0] + '?' + window.location.hash);
        return ;
    }
}