vue 移动端，支付宝支付和微信支付，和解决WeixinJSBridge is not defined 报错的方法
微信支付
// 点击立即缴费调取支付接口
topPayWei(){
const that =this;
this.$http.post( publicPath+'/server-park/h5/park/createOrder',
{ "shopId": this.shopId,
"openId":this.openId,
"memberId":this.memberId,
"plateNumber": this.carNum,
"canUseParkcouponIds":this.canUseParkcouponIds,
"usePoints":this.count,
"isUseMemberRight": this.isUseMemberRight
}).then(function(res){
if(res.data.code==0){
that.wxpay(res.data.data);//调取支付
}else{
alert(res.data.msg);
}
},function(res){
alert("请求失败")
});
},
wxpay(data){
var vm= this;
//下面是解决WeixinJSBridge is not defined 报错的方法
if (typeof WeixinJSBridge == "undefined"){//微信浏览器内置对象。参考微信官方文档
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
}
}else{
vm.onBridgeReady(data);
}
},
onBridgeReady:function(data){
var vm= this;
WeixinJSBridge.invoke(
'getBrandWCPayRequest',{//下面参数内容都是后台返回的
debug:true,
"appId":data.appId,//公众号名称，由商户传入
"timeStamp":data.timeStamp,//时间戳
"nonceStr":data.nonceStr,//随机串
"package":data.packageValue,//预支付id
"signType":data.signType,//微信签名方式
"paySign":data.paySign,//微信签名
},
function(res){
// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
if(res.err_msg == "get_brand_wcpay_request:ok" ){
vm.$router.push("/successPay");
}else{
// alert("支付失败,请跳转页面"+res.err_msg);
}
}
);
},
支付宝支付
// 点击立即缴费调取支付接口
topPayWei(){
const that =this;
//先请求后台获取到需要跳转用到的form数据
this.$http.post( publicPath+'/server-park/h5/park/alipay/createOrder',
{ "shopId": this.shopId,
"openId":this.openId,
}).then(function(res){
if(res.data.code==0){
const form=res.data.form;
const div = document.createElement('div');
div.innerHTML = form; //此处form就是后台返回接收到的数据
document.body.appendChild(div);
document.forms[0].submit();
// document.body.appendChild(div); document.forms[0].submit();这两步是关键，此时只要后台返回form正确，就可以直接跳转到支付宝页面
}else{
alert(res.data.msg);
}
},function(res){
// alert("请求失败")
});
}
},
上面两种方法，亲测有效，不过微信支付的前提，是需要引入jweixin.js，这个可以去官网上自行下载
祝工作顺利，身体健康