vue h5公众号支付

Posted lovemiao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue h5公众号支付相关的知识,希望对你有一定的参考价值。

调用:this.onBridgeReady(JSON.parse(res.data.data));

onBridgeReady: function (data) {
let vm = this;
vm.isPaying = false;
WeixinJSBridge.invoke(
‘getBrandWCPayRequest‘, {
"appId": data.appId,
"nonceStr": data.nonceStr,
"package": data.package,
"signType": ‘MD5‘,
"timeStamp": data.timeStamp,
"paySign": data.sign
},
function (res) {
if (res.err_msg === "get_brand_wcpay_request:ok") {
window.location.replace(‘http://‘ + vm.$route.query.state + ‘一级域名/#/payResult?out_trade_no=‘ + vm.$route.query.majorOrderCode)
      } else if ((res.err_msg === "get_brand_wcpay_request:cancel")) {
window.location.replace(‘http://‘ + vm.$route.query.state + ‘一级域名
/#/orders/wait‘)
      }
}
);
},

公众号支付先获取
openId
created() {
let vm = this;
if (!this.$route.query.code && !this.$route.query.openId && this.$route.query.payType === ‘wx_app_pay‘) {
vm.showLoading = true;
this.axios.post(API.order.queryOpenId).then((res) => {
if (res.data.status === 0) {
vm.$router.replace({
path: ‘/wxAppPay‘,
query: {
payType: vm.$route.query.payType,
majorOrderCode: vm.$route.query.majorOrderCode,
openId: res.data.data.openId
}
})
} else {
vm.$router.replace({
path: ‘/wxAppPay‘,
query: {payType: vm.$route.query.payType, majorOrderCode: vm.$route.query.majorOrderCode}
})
}
});
} else if (this.$route.query.payType !== ‘wx_app_pay‘) {
vm.hasOpenId = true;
}
}


wxAppPay.vue
<template>
<div class="pay-box"></div>
</template>

<script>
export default {
name: "wxAppPay",
data() {
return {}
},
mounted() {
let vm = this;
let local = window.location.href;
if (this.$route.query.openId) {
let token = localStorage.getItem(‘token‘);
let majorOrderCode = vm.$route.query.majorOrderCode;
let host = local.split(‘.‘)[0];
let state = host.split(‘//‘)[1];
window.location.replace(‘http://一级域名/#/pay?payType=wx_app_pay&majorOrderCode=‘ + majorOrderCode +
‘&state=‘ + state + ‘&token=‘ + token + ‘&openId=‘ + vm.$route.query.openId)
} else {
if (local.indexOf(‘code‘) === -1) {
let hasState = local.split(‘.‘)[0];
let state = hasState.split(‘//‘)[1];
let majorOrderCode = vm.$route.query.majorOrderCode;
let token = localStorage.getItem(‘token‘);
let stateData = state + ‘+‘ + majorOrderCode + ‘+‘ + token;

window.location.replace(‘https://open.weixin.qq.com/connect/oauth2/authorize?appid=####‘ +
‘&redirect_uri=‘ + encodeURIComponent(‘http://一级域名/#/wxAppPay‘) +
‘&response_type=code&scope=snsapi_base&state=‘ + stateData + ‘&connect_redirect=1#wechat_redirect‘)

} else {
let hasCode = local.split(‘code=‘)[1];
let code = hasCode.split(‘&‘)[0];
let hasState = local.split(‘state=‘)[1];

if (hasState.indexOf(‘#‘) > -1) {
hasState = hasState.split(‘#‘)[0]
}

let state = hasState.split(‘+‘)[0];
let majorOrderCode = hasState.split(‘+‘)[1];
let token = hasState.split(‘+‘)[2];

localStorage.setItem(‘token‘, token);
window.location.replace(‘http://一级域名/#/pay?payType=wx_app_pay&code=‘ + code + ‘&majorOrderCode=‘ +
majorOrderCode + ‘&state=‘ + state)
}
}

},
methods: {},
filters: {}
}
</script>

<style scoped>
.pay-box {
width: 750px;
height: 100%;
background: #f6f6f6;
}
</style>

 















































































































以上是关于vue h5公众号支付的主要内容,如果未能解决你的问题,请参考以下文章

企业号微信支付 公众号支付 H5调起支付API示例代码 JSSDK C# .NET

微信公众号支付H5-java版代码

微信H5支付demo

微信公众号支付踩坑记

微信支付-公众号支付H5调用支付详解

微信公众号支付H5调用支付详解