Vue实现微信支付功能遇到的坑有哪些
小编给大家分享一下Vue实现微信支付功能遇到的坑有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
我们提供的服务有:成都网站设计、成都网站制作、微信公众号开发、网站优化、网站认证、路桥ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的路桥网站制作公司
项目用VUE+EL搭建而成,支付用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/oauth3/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实现微信支付功能遇到的坑有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
分享名称:Vue实现微信支付功能遇到的坑有哪些
分享路径:http://myzitong.com/article/iggsgo.html