您的位置：首页 > 移动开发 > 微信开发

微信公众号H5支付踩的坑

2017-07-17 00:00 78 查看

摘要: 微信公众号H5支付

微信demo里面jsapi.php的代码

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>微信支付样例-支付</title>
<script type="text/javascript">
//调用微信JS api 支付
function jsApiCall()
{
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
<?php echo $jsApiParameters; ?>,
function(res){
WeixinJSBridge.log(res.err_msg);
alert(res.err_code+res.err_desc+res.err_msg);
}
);
}

function callpay()
{
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', jsApiCall);
document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
}
}else{
jsApiCall();
}
}
</script>
<script type="text/javascript">
//获取共享地址
function editAddress()
{
WeixinJSBridge.invoke(
'editAddress',
<?php echo $editAddress; ?>,
function(res){
var value1 = res.proviceFirstStageName;
var value2 = res.addressCitySecondStageName;
var value3 = res.addressCountiesThirdStageName;
var value4 = res.addressDetailInfo;
var tel = res.telNumber;

alert(value1 + value2 + value3 + value4 + ":" + tel);
}
);
}

window.onload = function(){
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', editAddress, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', editAddress);
document.attachEvent('onWeixinJSBridgeReady', editAddress);
}
}else{
editAddress();
}
};

</script>
</head>
<body>
<br/>
<font color="#9ACD32"><b>该笔订单支付金额为<span style="color:#f00;font-size:50px">1分</span>钱</b></font><br/><br/>
<div align="center">
<button style="width:210px; height:50px; border-radius: 15px;background-color:#FE6714; border:0px #FE6714 solid; cursor: pointer;  color:white;  font-size:16px;" type="button" onclick="callpay()" >立即支付</button>
</div>
</body>
</html>

然而，这里用php直接输出JS api 支付参数，是可以的，但是如果用于前后端分离的话，或者是前端调用后端的api接口拿到的支付参数，这里就有一个很大的坑，因为前端拿到的数据json解析出来后参数的顺序就不一样了，这样发起支付就会报错，但是微信那边却没有给出报错的原因，经后来多次反复实验，才知道是参数顺序的问题。解决方法：json解析出来，再重新拼接，和php直接模版输出不一样。

下面是angularjs调用后端的api接口方法来实现的代码：

$http({
method:'get',
url:base_url+"/api/weixin/pay?client=android&accesstoken="+$rootScope.accesstoken+"&order_no="+order_no+"&openid="+openid,
headers:{'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: function(obj) {
var str = [];
for(var p in obj){
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
}
}).success(function(req){
console.log(req);
if(req.code == 0){
$scope.wei_xin_pay_data = req.data;
// json解析出来，再重新拼接，和php直接模版输出不一样
$scope.wei_xin_pay_data = JSON.parse($scope.wei_xin_pay_data);
console.log($scope.wei_xin_pay_data);
console.log(typeof($scope.wei_xin_pay_data));
}else{
alert(req.msg);
$rootScope.checkLogin(req.msg);
}
});
$scope.payCommit =function () {
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', $scope.jsApiCall(), false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', jsApiCall);
document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
}
}else{
$scope.jsApiCall();
}
}
$scope.jsApiCall = function(){
if(typeof($scope.wei_xin_pay_data) == 'object'){
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
"appId":$scope.wei_xin_pay_data.appId,
"timeStamp":$scope.wei_xin_pay_data.timeStamp,
"nonceStr":$scope.wei_xin_pay_data.nonceStr,
"package":$scope.wei_xin_pay_data.package,
"signType":$scope.wei_xin_pay_data.signType,
"paySign":$scope.wei_xin_pay_data.paySign
},
function(res){
WeixinJSBridge.log(res.err_msg);
// alert(res.err_msg);
// console.log(res.err_msg);
if(res.err_msg == "get_brand_wcpay_request:ok" ) {
// 跳转到订单详情页
var obj = {
orderid:orderid
};
$rootScope.jump('tabs.orderDetails',1,obj);
}
}
);
}else{
alert('微信支付数据出错');
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 公众号

相关文章推荐

新的分享

章节导航