vue–微信支付

中天 • • 微信开发技术 • 190 阅读

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

不说废话，

我们都知道微信支付首先需要获取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–微信支付的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>