版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
实现html5微信支付以及微信公众号内微信支付
微信公众号内微信支付
- 首先进行微信授权获取code
/*获取授权拿到code*/
getCodeApi(state){//获取code
let urlNow=encodeURIComponent(window.location.href);//授权之后重定向到当前页面
let scope='snsapi_userinfo'; //snsapi_base //静默授权 用户无感知
let appid='微信公众号配置的appid';
let url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
window.location.replace(url);
},
getUrlKey:function(name){//获取url 参数
return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
},
/*获取授权拿到code*/
2.通过后台接口获取到openid并且在成功的回调里面调用支付的接口
/*从后台接口获取到openID开始*/
getOpenIdApi:function(code){
this.url=this.serverSrc+"/pay/getOpenId";
this.$http.get(this.url, {params:{code:code}}).then(res => {
if (res.status === 200) {
console.log("获取openid成功");
localStorage.setItem("openid", res.data);
/*调起后台的支付接口开始*/
this.openid=res.data;
this.url=this.serverSrc+"/pay/jsWxpay";
this.$http.post(this.url,{orderNo:this.orderNo,money:this.totalPrice*100,orderType:this.orderType,openid:this.openid}).then(res => {
console.log(res);
console.log("开始支付请求");
this.jsSdk(res);
}).catch((response) => {
console.log(response);
alert(JSON.stringify(response));
})
/*调起后台的支付接口结束*/
} else {
console.log("获取openid失败");
}
}).catch(() => {
console.log("获取openId失败,跳出");
})
},
/*从后台接口获取到openID结束*/
/*微信调起支付开始*/
jsSdk(res){
// 判断微信的WeixinJSBridge
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
}
}else{
this.onBridgeReady(res);
}
},
// 支付sdk准备完成
onBridgeReady(res) {
let that = this;
// 触发微信支付
WeixinJSBridge.invoke(
'getBrandWCPayRequest',{
appId: res.data.appId, //公众号名称，由商户传入
timeStamp: res.data.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: res.data.nonceStr, //随机串
package: res.data.package, //prepay_id用等式的格式
signType: res.data.signType, //微信签名方式：
paySign: res.data.paySign, //微信签名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ) {
// 支付成功 返回成功页
// alert("支付成功");
that.$router.replace({ path: "/paySuccess" });
} else{
// 取消支付或者其他情况 get_brand_wcpay_request:cancel get_brand_wcpay_request:fail
// alert(JSON.stringify(res));
that.$router.replace({ path: "/payFail" });
}
}
);
},
HTML5微信支付
1.直接调用后台接口获取支付链接，然后重定向到支付链接即可
this.url = this.serverSrc + "/pay/hWxpay";
this.$http.post(this.url, {
orderNo: this.orderNo,
money: this.totalPrice * 100,
orderType: this.orderType
}).then(res => {
console.log(res);
console.log("开始支付请求");
window.location.replace(res.data.mwebUrl);
}).catch((response) => {
console.log(response);
alert(JSON.stringify(response));
})
}
点击微信支付按钮的代码
html代码
<div class="goPay" @click="pay()">立即支付</div>
script代码
/*支付开始*/
pay: function () {
/*判断是否在微信浏览器内开始*/
if (this.isWeiXin()) {
console.log("在微信内置浏览器内");
/*微信公众号内支付开始*/
/*首先获取授权拿到code开始*/
let code = this.getUrlKey("code");
console.log(code);
if (code) {
/*调用后台接口获取openId开始*/
if (localStorage.openid) {
console.log("有openid");
this.openid = localStorage.getItem('openid');
this.url = this.serverSrc + "/pay/jsWxpay";
this.$http.post(this.url, {
orderNo: this.orderNo,
money: this.totalPrice * 100,
orderType: this.orderType,
openid: this.openid
}).then(res => {
console.log(res);
console.log("开始支付请求");
this.jsSdk(res);
}).catch((response) => {
console.log(response);
alert(JSON.stringify(response));
})
} else {
this.getOpenIdApi(code);
}
// this.getOpenIdApi(code);
/*调用后台接口获取openId结束*/
} else {
this.getCodeApi("123"); //授权获取code
}
/*首先获取授权拿到code结束*/
/*微信公众号内支付结束*/
} else {
console.log("不在微信内置浏览器内");
this.url = this.serverSrc + "/pay/hWxpay";
this.$http.post(this.url, {
orderNo: this.orderNo,
money: this.totalPrice * 100,
orderType: this.orderType
}).then(res => {
console.log(res);
console.log("开始支付请求");
window.location.replace(res.data.mwebUrl);
}).catch((response) => {
console.log(response);
alert(JSON.stringify(response));
})
}
/*微信公众号内支付结束*/
},
/*支付结束*/
需要注意的问题
1.在开始写代码之前一定要把公众号和商户号配置好，包括包括设置支付授权目录、测试支付目录和白名单、设置JS接口安全域名以及设置授权回调页面域名
2.前台的签名和后台的一定要一致，一定要一致，一定要一致，否则会出现很多问题
3.微信开发者工具可以测试授权但是支付需要在真机测试
4.测试的时候苹果手机会报具体错误但是安卓手机没有提示，可以使用 alert(JSON.stringify(response));弹出错误提示
5.进行支付开发的时候一定要前端和后台合作完成，光靠前端的力量是无法完成的。
6.如果你只需要进行微信公众号支付这一个功能不需要分享等别的功能，建议使用jssdk，不需要使用微信api