vue--微信支付

2023-12-01 22:14:34

这次项目有用到微信支付，之前没接触过，这是我查阅文档后实现成功支付的相关笔记。有需要的可以了解下

不说废话，

我们都知道微信支付首先需要获取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--微信支付

码农公寓

相关文章