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 ;
}
}
