spa單頁(yè)項(xiàng)目實(shí)現(xiàn)微信支付坑比較多，一步一步來(lái)分析吧痘绎，相關(guān)技術(shù)
vue2津函、 vue-router、vue-resource孤页。服務(wù)器api不扯了尔苦。
具體功能：充值模塊
-
實(shí)現(xiàn)思路
1.前端充值頁(yè)面Recharge.vue請(qǐng)求服務(wù)器/api/user/recharge生成本地訂單并返回訂單號(hào)order_id
2.根據(jù)orderId請(qǐng)求服務(wù)器/api/wx/make-order來(lái)創(chuàng)建微信支付訂單（微信統(tǒng)一下單api，涉及支付簽名）行施，該api主要功能是創(chuàng)建微信訂單并且返回微信H5拉取支付控件chooseWXPay(params)的params參數(shù)
{
appId: '',
noceStr: '',
package: '',
paySign: '',
signType: '',
timestamp: ''
}
3.通過(guò)調(diào)用wx.chooseWXpay(params)來(lái)拉取支付控件
params.success = res => {
// 支付成功
};
wx.chooseWXPay(params);
4.剩下的就是服務(wù)器支付回調(diào)notify處理了
-
實(shí)現(xiàn)方案
服務(wù)端api
// 充值下單api
post /api/user/recharge
// 創(chuàng)建微信訂單api
// @params orderId
post /api/wx/make-order
// 生成sdk配置參數(shù)
// @params url 當(dāng)前頁(yè)面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: '', // 必填，生成簽名的時(shí)間戳
nonceStr: '', // 必填蛾号，生成簽名的隨機(jī)串
signature: '',// 必填稠项，簽名
jsApiList: [
'chooseWXPay'
]
})
由于涉及到簽名，所以這些參數(shù)我通過(guò)服務(wù)器生成并返回鲜结，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; // 當(dāng)前頁(yè)面url
// 請(qǐng)求api返回sdk配置參數(shù)
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 : {
// 請(qǐng)求api創(chuàng)建本地訂單
makeOrder() {
this.$http.post('/api/user/recharge').then(ret => {
this.makeWxOrder(ret.data.orderId);
});
},
// 請(qǐng)求api創(chuàng)建微信訂單并拉取支付控件
makeWxOrder(orderId) {
this.$http.post('/api/wx/make-order', {orderId: orderId}).then(ret => {
// 得到返回的支付參數(shù)
let params = ret.data.params;
params.success = res => {
// 支付成功
};
this.wx.chooseWXPay(params);
});
}
}
-
填坑
授權(quán)目錄問(wèn)題
微信授權(quán)目錄是要精確到二級(jí)或三級(jí)目錄，我用的vue-router hash模式精刷，支付目錄是www.xxx.com/#/home/recharge拗胜，但是微信支付目錄驗(yàn)證不支持這種hash模式，所以在微信看來(lái)目錄是錯(cuò)誤怒允。
網(wǎng)上有一種解決辦法是在當(dāng)前支付頁(yè)面的#號(hào)前邊加上?號(hào)www.xxx.com/?#/home/recharge埂软，這樣微信目錄驗(yàn)證會(huì)忽略掉?號(hào)后的參數(shù)，微信會(huì)把請(qǐng)求頁(yè)面的目錄看做www.xxx.com/纫事，但是目錄要精確到二級(jí)或三級(jí)勘畔。
我的解決方法是所有微信前端都加上/wx前綴迷殿，在微信看來(lái)/wx下所有加了?號(hào)的hash頁(yè)面都是支付目錄，那微信支付目錄就填的是www.xxx.com/wx/咖杂。
如何給當(dāng)前頁(yè)面加上?號(hào)呢庆寺，就是加載Rechage.vue組件時(shí)候判斷url是否帶有?號(hào)，沒(méi)有則加上并跳轉(zhuǎn)一下诉字。
// Recharge.vue
created() {
let config = {};
config.url = window.location.href;
// 判斷當(dāng)前url是否存在?參數(shù)匹配符
if(!config.url.match(/\?/)) {
location.replace(window.location.href.split('#')[0] + '?' + window.location.hash);
return ;
}
}
