Vue 中微信支付,显示WeiXinJSBridge is not defined的问题

勿在created中触发,通过button点击触发或者延时触发,目的是等待WeixinJSBridge加载完毕

created() {
  let _this = this;
  setTimeout(() => {
    _this.pay(_this.payment);
  }, 3000);
},

var vm = this;
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) {
    console.log(res.err_msg)
    //debugger;
    // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
    if (res.err_msg == "get_brand_wcpay_request:ok") {
      alert("支付成功")
      //vm.$router.push("/reservedBerth");
    } else {
      //alert("支付失败,请跳转页面"+res.err_msg);
    }
  });
},
上一篇 微信JS-SDK使用步骤
下一篇 支付宝和微信的JSSDK发起支付
目录
文章列表
1 Spring Security 之多AuthenticationProvider认证模式实现
Spring Security 之多AuthenticationProvider认证模式实现
2
CentOS下安装ActiveMQ
CentOS下安装ActiveMQ
3
微信小程序日期时间选择器
微信小程序日期时间选择器
4
Vue全局Filter体验
Vue全局Filter体验
5
Vue项目中使用qrcode生成二维码
Vue项目中使用qrcode生成二维码
最新评论
一位WordPress评论者
一位WordPress评论者
2月12日
您好,这是一条评论。若需要审核、编辑或删除评论,请访问仪表盘的评论界面。评论者头像来自 Gravatar。