url带#号,微信支付那些坑

现在前端很多框架的前端路由都带#号,主要为了做到无刷新跳转页面。

在微信公众号做微信支付时,配置的支付路径比如是http://www.eee.com/#/order,在调微信支付的方法时错误信息是‘URL未注册’。

我的解决方案是,写一个专门做为微信支付的页面,ajax请求后台返回需要调取微信支付的数据(签名等信息),然后把这些信息暂存起来(可以用h5的缓存,记得支付完清掉,如果用node,可以用node的缓存,以自己的实际项目方便)。跳转到支付的页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body></body>
<script type="text/javascript">
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
var request = {};
if (sessionStorage && sessionStorage.wechatPayRequest) {
request = JSON.parse(sessionStorage.wechatPayRequest);
}
WeixinJSBridge.invoke("getBrandWCPayRequest", {
appId : request.appId,
timeStamp : request.timeStamp,
nonceStr : request.nonceStr,
"package" : request.packageInfo,
signType : request.signType,
paySign : request.paySign
}, function(res) {
sessionStorage.wechatPayRequest = ''
if ("get_brand_wcpay_request:ok" == res.err_msg) {
// 支付成功
}else {
// 支付失败
}
});
})
</script>
</html>

一个空的页面即可,此处package是关键字,所以需要后台返回一个新的字段代替package。

然后处理支付成功和支付失败的回调

再把这个页面在当前域名下配一个路径,比如当前项目域名是http://www.eeeee.com,就把页面域名指定为http://www.eeeee.com/pay/wechat

然后在微信公众号的后台把支付路径配置为http://www.eeeee.com/pay/

这个方法有个缺点,就是调取支付要跳转页面,用户体验不好,支付完成还要再跳转到相应的页面。

posted @ 2016-12-03 19:29  love星期六  阅读(3212)  评论(0编辑  收藏  举报