Vue在实现微信支付功能时遇到的坑

相比支付宝支付，微信支付功能有点繁琐，记录下来是为了以后的需要

这个项目是由VUE艾尔建造的，费用是用艾尔的收音机支付的

El-radio v-model=' radio ' label=' weixin ' I class=' icon font icon-weixin '/I div class=' list' H5微信支付/h5 span建议安装最新版本的微信使用/span/div/El-radio El-radio v-model=' radio ' label='芝罘宝' I class=' icon font icon-芝罘宝'/I div class=' list ' H5支付宝/h5 span建议有支付宝账户的用户使用/span /div /el-radio pit。

以前一直是前端请求后台接口，微信支付接口在后台调用。但点击微信支付后，总是提示跨域、重定向问题

这就是坑。问了很多人，说是没有安全域名或者接口白名单什么的，但是后端真的已经配置好了。后来我们换了一个方法，成功后前端提供代码授权。回到后端，

在挂载时获取代码():

这个。代码='' var local=window。location.href//get网页网址var appid=' '这。code=geturlcode()。code//截取代码if(this . code==null | | this . code===' '){ window . location . href=` https://open . weixin . QQ.com/connect/oauth 2/authorize？appid=$ { appid } redirect _ uri=$ { encodeURIComponent(local)} response _ type=code scope=snsapi _ base state=123 #微信_ redirect `}；函数GetURLcode(){ var URL=location . search//this . WinURl=URL//alert(this . WinURl)var Request=new Object()if(URL . indexof('？') !=-1){ var str=URL . substr(1)var strs=str . split(')for(var I=0；i strs.lengthI){ Terquest[strs[I]。split('=')[0]]=(strs[i]。split('=')[1])} } return Request }；然后点击按钮，写出判断

方法： { Compay(){ let radio _ data=this。radio if(radio _ data==' weixin '){ if(this。代码){//如果没有代码，则去请求这个$axios({ method: 'post '，url: '后台接口，params : {代码： this。代码}//将密码传给后台，如果有其他参数需要传递，请一并传递}).然后((res)={ //调取微信支付变量=这个；函数onBridgeReady(){ weixinsbridge。invoke(' getBrandWCPayRequest '，{ appId: res.data.appId，//公众号名称，由商户传入时间戳： RES .数据。时间戳，//时间戳，自1970年以来的秒数非波峰： RES .数据。非波峰，//随机串package: res.data.package，signType: res.data.signType，//微信签名方式：paySign: res.data.paySign //微信签名符号},函数(RES){ if(RES . err _ msg==' get _ brand _ wcpay _ request : ok '){ alert('恭喜您，支付成功！)} else if(RES . err _ msg==' get _ brand _ wcpay _ request : cancel '){ alert('支付失败！');} else if(RES . err _ msg==' get _ brand _ wcpay _ request : fail '){ alert('调起微信支付失败');} } );} OnbridgeReady()；//微信支付})} } else if(radio _ data==' zhifubao '){ this .$axios.post('后台接口，数据)。然后((RES)={ this.html=RES .数据var形式=RES .数据；const div=文档。创建元素(' div ')//创建div。div。innerHTMl=form//此处形式就是后台返回接收到的数据文件。尸体。append child(div)var queryParam=' '；数组。原型。切片。调用(文档。query selectorall(' input[type=hidden]).forEach(function(ele){ query param=' ele。name '=' encodeURIComponent(ele。值)；});var GoTour=文档。queryselector(' alipaysubmit ').getAttribute(' action ')查询参数；_ AP。支付(GoTour)；//在微信中用浏览器跳转到支付宝支付}) } } }总结

以上所述是小编给大家介绍的某视频剪辑软件实现微信支付功能遇到的坑，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！