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--微信支付的主要内容,如果未能解决你的问题,请参考以下文章

vue+微信公众号+jssdk调用微信支付

vue实现-微信网页中唤起支付宝支付

vue--微信支付

vue--微信支付

微信支付完成 vue 页面不跳转问题

vue项目使用微信公众号支付总结