微信支付功能相比较支付宝支付，有点点繁琐，整理记录下来，以便日后所需

　　项目用VUE+EL搭建而成，支付用EL的radio来做的

　　<el-radiov-model="radio"label="weixin">

　　 <iclass="iconfonticon-weixin"></i>

　　 <divclass="list">

　　 <h5>微信支付</h5>

　　 <span>推荐安装最新版微信使用</span>

　　 </div>

　　 </el-radio>

　　 <el-radiov-model="radio"label="zhifubao">

　　 <iclass="iconfonticon-zhifubao"></i>

　　 <divclass="list">

　　 <h5>支付宝</h5>

　　 <span>推荐有支付宝账户的用户使用</span>

　　 </div>

　　坑来了。。。。

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

　　就是这个坑，问了好多人，都在说是不是没有配置安全域名或接口白名单什么的，但后端真真的已经配置了，后来我们换了一种方法，由前端来提供code授权成功之后，返回给后端

　　在mounted()获取code：

　　this.code=''

　　 varlocal=window.location.href//获取页面url

　　 varappid=''

　　 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`

　　 };

　　

　　functiongetUrlCode(){

　　 varurl=location.search

　　 //this.winUrl=url

　　 //alert(this.winUrl)

　　 vartheRequest=newObject()

　　 if(url.indexOf("?")!=-1){

　　 varstr=url.substr(1)

　　 varstrs=str.split("&")

　　 for(vari=0;i<strs.length;i++){

　　 theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])

　　 }

　　 }

　　 returntheRequest

　

　　然后再点击按钮中写判断了

　　methods:{

　　 Compay(){

　　

　　 letradio_data=this.radio

　　 if(radio_data=='weixin'){

　　 if(this.code){//如果没有code，则去请求

　　

　　 this.$axios({

　　 method:"post",

　　 url:"后台接口",

　　 params:{code:this.code}//将code传给后台，如果有其他参数需要传递，请一并传递

　　 }).then((res)=>{

　　 //调取微信支付

　　 varthat=this;

　　 functiononBridgeReady(){

　　 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('恭喜您，支付成功！')

　　 }elseif(res.err_msg=="get_brand_wcpay_request:cancel"){

　　 alert('支付失败！');

　　 }elseif(res.err_msg=="get_brand_wcpay_request:fail"){

　　 alert('调起微信支付失败');

　　 }

　　 }

　　 );

　　 }

　　 onBridgeReady();

　　 //微信支付

　　 })

　　 }

　　 }elseif(radio_data=='zhifubao'){

　　 this.$axios.post('后台接口',data).then((res)=> {

　　 this.html=res.data

　　 varform=res.data;

　　constdiv=document.createElement('div')//创建div

　　div.innerHTML=form//此处form就是后台返回接收到的数据

　　document.body.appendChild(div)

　　varqueryParam=''; Array.prototype.slice.call(document.querySelectorAll("input[type=hidden]")).forEach(function(ele){

　　 queryParam+='&'+ele.name+"="+encodeURIComponent(ele.value);

　　 });

　　 vargotoUrl=document.querySelector("#alipaysubmit").getAttribute('action')+queryParam;

　　 _AP.pay(gotoUrl);//在微信中用浏览器跳转到支付宝支付

　　 })

　　 }

　　

　　 }

　　 }