VUE爬坑之----微信支付功能

微信支付功能相比较支付宝支付,有点点繁琐,整理记录下来,以便日后所需
项目用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调取微信支付成功,code授权一定要前端提供给后端,这是目前我们找到的唯一解决方法,如果各位大神有更好的方法,欢迎提供【比心】

发布了8 篇原创文章 · 获赞 23 · 访问量 6256

猜你喜欢

转载自blog.csdn.net/weixin_45102071/article/details/90411379