vue 移动端，支付宝支付和微信支付，和解决WeixinJSBridge is not defined 报错的方法

微信支付

   <button class="parkPay" @click="topPayWei()" v-show="payMoney" :disabled="payButton">需支付{{lastPrice}}元,去支付</button>


//  点击立即缴费调取支付接口
      topPayWei(){ 
                    const that =this;
                    this.$http.post( publicPath+'/server-park/h5/park/createOrder',
                      { "shopId": this.shopId,
                        "openId":this.openId,
                        "memberId":this.memberId,
                        "plateNumber": this.carNum,
                        "canUseParkcouponIds":this.canUseParkcouponIds,
                        "usePoints":this.count,
                        "isUseMemberRight": this.isUseMemberRight
                      }).then(function(res){
                      if(res.data.code==0){
                      
                        that.wxpay(res.data.data);//调取支付

                      }else{
                        alert(res.data.msg);
                      }
                    },function(res){
                        alert("请求失败")
                    });
    

      },
      wxpay(data){
        var vm= this;
      //下面是解决WeixinJSBridge is not defined 报错的方法
        if (typeof WeixinJSBridge == "undefined"){//微信浏览器内置对象。参考微信官方文档
          if( document.addEventListener ){
            document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
          }else if (document.attachEvent){
            document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
            document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
          }
        }else{
          vm.onBridgeReady(data);
        }

      },
      onBridgeReady:function(data){
        var vm= this;
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',{//下面参数内容都是后台返回的
            debug:true,
            "appId":data.appId,//公众号名称，由商户传入
            "timeStamp":data.timeStamp,//时间戳
            "nonceStr":data.nonceStr,//随机串
            "package":data.packageValue,//预支付id
            "signType":data.signType,//微信签名方式
            "paySign":data.paySign,//微信签名
          },
          function(res){
            // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            if(res.err_msg == "get_brand_wcpay_request:ok" ){         
                vm.$router.push("/successPay");
            }else{           
//                alert("支付失败,请跳转页面"+res.err_msg);
            }
          }
        );
      },

支付宝支付

  <button class="parkPay" @click="topPayWei()" v-show="payMoney" :disabled="payButton">需支付{{lastPrice}}元,去支付</button>

//  点击立即缴费调取支付接口
      topPayWei(){
        const that =this;
               //先请求后台获取到需要跳转用到的form数据
                  this.$http.post( publicPath+'/server-park/h5/park/alipay/createOrder',
                    { "shopId": this.shopId,
                      "openId":this.openId,
                    
                    }).then(function(res){
                    if(res.data.code==0){


                        const form=res.data.form;  
                        const div = document.createElement('div');
                        div.innerHTML = form; //此处form就是后台返回接收到的数据
                        document.body.appendChild(div);
                        document.forms[0].submit();
// document.body.appendChild(div); document.forms[0].submit();这两步是关键，此时只要后台返回form正确，就可以直接跳转到支付宝页面




                    }else{
                      alert(res.data.msg);
                    }
                  },function(res){
                    //               alert("请求失败")
                  });

              }

      },

    

上面两种方法，亲测有效，不过微信支付的前提，是需要引入jweixin.js，这个可以去官网上自行下载

祝工作顺利，身体健康