前两天接了微信支付宝的支付，中间遇到了一些问题，简单记录一下前提你需要一个支付的二维码（后台会返回）
用户扫码之后跳到手机页面 需要先在页面里判断扫码的是微信还是支付宝
function IsWeixinOrAlipay(){
var ua = window.navigator.userAgent;
//判断是不是微信
if ( ua.indexOf("MicroMessenger") > 0 ) {
dealUserInfo(); //微信支付需要先获取用户信息
}
//判断是不是支付宝
if ua.indexOf("Alipayclient") > 0‘‘) {
aliPay(); // 支付宝支付
}
}
首先说一下支付宝支付，相比微信支付它比较简单 直接跳转即可 代码如下
function aliPay() {
$.ajax({
type: ‘GET‘,
url: 支付宝支付的接口,
contentType: ‘application/json; charset=utf-8‘,
headers: {
‘Content-Type‘: ‘application/json; charset=utf-8‘,
‘Authorization‘: token,
},
success: function(res) {
$(‘body‘).append(res) // 放入支付宝的表单数据
$(‘form‘).attr(‘target‘, ‘_blank‘) // 打开新窗口跳转
},
error: function(error) {
alert(‘失败了‘, error);
}
})
},
接下来一起来实现一下微信支付，首先获取用户信息
// 获取地址栏参数
function getQuery(name){ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }
function dealUserInfo() { const parmas = { str: getQuery("code") // 从地址栏获取code } if (Pay.getQuery("code")) { // 获取用户信息 $.ajax({ type: ‘POST‘, url: "xxx/getWxUser", data: JSON.stringify(parmas), dataType: ‘json‘, contentType: ‘application/json; charset=utf-8‘, headers: { ‘Content-Type‘: ‘application/json; charset=utf-8‘, ‘Authorization‘: token, }, success: function(res) { if (res.code != 200) { alert("微信登录失败，请稍候重试"); setTimeout(() => {
// 微信登陆失败需要再次重定向 window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=xxxl&response_type=code&scope=snsapi_base&state=" + getQuery(‘state‘) + "#wechat_redirect";; }, 2000) return; } // 去支付 Pay.getWechatConfig(); } }); } else {
// 点击支付，第一次支付肯定是不存在openid的，那么就要跳转URL获取code 既重定向 会带回所需code参数
// 重定向参数（appid redirect_uri） APPID是商户的APPID,REDIRECT_URI是页面跳转后跳回来的URL，会带在REDIRECT_URI上
// 如果需要带参数回来可以通过state可以放一些我们自定义的内容 我这里需要带支付码 写法如下
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxx&redirect_uri=xxxx&response_type=code&scope=snsapi_base&state=" + getQuery(‘pay‘) + "#wechat_redirect"; } },
}
}
接下来需要调用后台接口微信支付
function getWechatConfig() {
const parmas = {
str: getQuery(‘pay‘) || getQuery(‘state‘)
};
$.ajax({
type: ‘POST‘,
url: "微信支付/wxJsApi",
data: JSON.stringify(parmas),
dataType: ‘json‘,
contentType: ‘application/json; charset=utf-8‘,
headers: {
‘Content-Type‘: ‘application/json; charset=utf-8‘,
‘Authorization‘: token,
},
success: function(res) {
if (res.code != 200) {
alert("支付失败，请稍候重试");
}
if (res.data) {
if (res.data.type == 0) {
window.location = ‘’; // 支付失败页
}
weConfig = res.data; // 微信支付所需参数
toWechatPay();//去微信支付
}
},
error: function(error) {
alert(‘失败了‘, error);
}
})
},
最后一步微信支付了
function toWechatPay() {
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener(‘WeixinJSBridgeReady‘, onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent(‘WeixinJSBridgeReady‘, onBridgeReady);
document.attachEvent(‘onWeixinJSBridgeReady‘, onBridgeReady);
}
} else {
Pay.onBridgeReady();
}
},
// 微信支付
function onBridgeReady() {
WeixinJSBridge.invoke(
‘getBrandWCPayRequest‘, {
"appId": weConfig.appId, //公众号名称，由商户传入
"timeStamp": weConfig.timeStamp, //时间戳，自1970年以来的秒数
"nonceStr": weConfig.nonceStr, //随机串
"package": weConfig.package,
"signType": weConfig.signType, //微信签名方式：
"paySign":weConfig.paySign //微信签名
},
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") { // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回 ok，但并不保证它绝对可靠。
window.location = ‘’;//跳转支付成功页
} else {
layer.msg("支付失败", {
time: 2000
});
setTimeout(() => {
window.location = ‘’;//跳转支付失败页
}, 2000)
}
}
);
},
这样就完成了一个基本的h5支付了 希望能解决你的一些困惑 继续搬砖啦！！！