vue--微信支付
Posted riven.lcs
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue--微信支付相关的知识,希望对你有一定的参考价值。
这次项目有用到微信支付,之前没接触过,这是我查阅文档后实现成功支付的相关笔记。有需要的可以了解下
不说废话,
我们都知道微信支付首先需要获取openID,而获取openID则需要先获取code。
获取code方法如下
export default{ getUrlKey:function(name){ return decodeURIComponent((new RegExp(\'[?|&]\'+name+\'=\'+\'([^&;]+?)(&|#|;|$)\').exec(location.href)||[,""])[1].replace(/\\+/g,\'%20\'))||null; } }
根据后台配置微信公众号上code命名调用此方法获取code
created(){ //获取url地址code this.wxcode=this.$utils.getUrlKey("code") },
因为code有时效性,所以获取code之后立马获取openID,将openID通过本地存储暂存,(因为存在跨域问题,获取openID的方法可由后台写,获取ip地址也由后台实现,给强大的后台点个赞!)
getOpenid( this.wxcode ).then((res)=>{ if(res.resultCode==1){ this.wxopenId=res.resultData local.set({ wxopenId:this.wxopenId }) } })
openID获取成功之后便是唤起微信支付了
//微信支付 if(this.play==0){ if(local.get(\'wxopenId\')){ this.wxopenId = local.get(\'wxopenId\') } weixinPay( this.orderId, this.wxopenId, this.appName ).then((res)=>{ if(res.resultCode==1){ var appid = res.resultData.appid var timestamp = res.resultData.timestamp var nonceStr = res.resultData.nonceStr var prepayId = res.resultData.prepayId var paySign = res.resultData.sign var paymentNo = res.resultData.paymentNo //唤起微信支付 function onBridgeReady(){ WeixinJSBridge.invoke( \'getBrandWCPayRequest\', { "appId":appid, //公众号名称,由商户传入 "timeStamp":timestamp, //时间戳,自1970年以来的秒数 "nonceStr":nonceStr, //随机串 "package":"prepay_id="+prepayId, "signType":"MD5", //微信签名方式: "paySign":paySign //微信签名 }, function(res){ if(res.err_msg == "get_brand_wcpay_request:ok" ) { //查询支付结果 getPayResult( paymentNo ).then((response)=>{ if(response.resultData=="UN_PAY"){ Toast({ message:\'未支付\', duration: 1500 }) } else if(response.resultData=="PAY_SUCCESS"){ payResult=true; } else if(response.resultData=="PAY_FAIL"){ payResult=false; } setTimeout(()=>{ vm.$router.push({path:\'/paymentresults\',query:{isSuccess:payResult}}); },1000) }) } // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回 ok,但并不保证它绝对可靠。 } ); } if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener(\'WeixinJSBridgeReady\', onBridgeReady, false); }else if (document.attachEvent){ document.attachEvent(\'WeixinJSBridgeReady\', onBridgeReady); document.attachEvent(\'onWeixinJSBridgeReady\', onBridgeReady); } }else{ onBridgeReady(); } return false; } }) }
参考文档:微信文档--获取openID
参考文档:微信文档--唤起支付
参考文档:vue获取url参数
以上是关于vue--微信支付的主要内容,如果未能解决你的问题,请参考以下文章