Vue实现微信支付功能遇到的坑
程序员文章站
2022-04-09 12:50:14
微信支付功能相比较支付宝支付,有点点繁琐,整理记录下来,以便日后所需
项目用vue+el搭建而成,支付用el的radio来做的
微信支付功能相比较支付宝支付,有点点繁琐,整理记录下来,以便日后所需
项目用vue+el搭建而成,支付用el的radio来做的
<el-radio v-model="radio" label="weixin" > <i class="iconfont icon-weixin"></i> <div class="list"> <h5>微信支付</h5> <span>推荐安装最新版微信使用</span> </div> </el-radio> <el-radio v-model="radio" label="zhifubao"> <i class="iconfont icon-zhifubao"></i> <div class="list"> <h5>支付宝</h5> <span>推荐有支付宝账户的用户使用</span> </div> </el-radio>
坑来了。。。。
之前一直是前端请求后台接口,后台调取微信支付接口,但点击微信支付后一直提示跨域、重定向问题
就是这个坑,问了好多人,都在说是不是没有配置安全域名或接口白名单什么的,但后端真真的已经配置了,后来我们换了一种方法,由前端来提供code 授权成功之后,返回给后端
在mounted()获取code:
this.code = '' var local = window.location.href // 获取页面url var appid = '' this.code = geturlcode().code // 截取code if (this.code == null || this.code === ''){ window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeuricomponent(local)}&response_type=code&scope=snsapi_base&state=123#wechat_redirect` }; function geturlcode(){ var url = location.search // this.winurl = url // alert(this.winurl) var therequest = new object() if (url.indexof("?") != -1){ var str = url.substr(1) var strs = str.split("&") for(var i = 0; i < strs.length; i ++){ therequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]) } } return therequest };
然后再点击按钮中写判断了
methods:{ compay(){ let radio_data = this.radio if(radio_data == 'weixin'){ if (this.code) { // 如果没有code,则去请求 this.$axios({ method: "post", url: "后台接口", params: {code: this.code} //将code传给后台,如果有其他参数需要传递,请一并传递 }).then((res)=>{ //调取微信支付 var that = this; function onbridgeready(){ weixinjsbridge.invoke("getbrandwcpayrequest",{ appid: res.data.appid, //公众号名称,由商户传入 timestamp: res.data.timestamp, //时间戳,自1970年以来的秒数 noncestr: res.data.noncestr, //随机串 package: res.data.package, signtype: res.data.signtype, //微信签名方式: paysign: res.data.paysign //微信签名sign }, function(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('后台接口',data).then((res)=> { this.html = res.data var form= res.data; const div = document.createelement('div') //创建div div.innerhtml = form//此处form就是后台返回接收到的数据 document.body.appendchild(div) var queryparam = ''; array.prototype.slice.call(document.queryselectorall("input[type=hidden]")).foreach(function (ele) { queryparam += '&' + ele.name + "=" + encodeuricomponent(ele.value); }); var gotourl = document.queryselector("#alipaysubmit").getattribute('action') + queryparam; _ap.pay(gotourl); //在微信中用浏览器跳转到支付宝支付 }) } } }
总结
以上所述是小编给大家介绍的vue实现微信支付功能遇到的坑,希望对大家有所帮助