H5微信支付WeixinJSBridge.invoke

1:先获取code给后端去解析openid

getAuthorize(){
      const code = this.getUrlParam('code') // 截取路径中的code,如果没有就去微信授权,如果已经获取到了就直接传code给后台获取openId
      // 此方法用来判断是不是在微信中打开
      const isWechat = () => { 
        let ua = window.navigator.userAgent.toLowerCase();
        return ua.match(/MicroMessenger/i) == 'micromessenger';
      }
      //是微信中打开,则进行一下操作
      if(isWechat){
        //先判断有没有授权(判断地址栏code,有就-用户同意了授权,没有-没授权或者拒绝授权)
        var str = this.getUrlParam("code"); //此处使用的是history路由模式,hash这么拿不到。this.getUrlParam()方法在下面
        if (str) {
          this.code = str;
          // 走后端接口(把code传给后台,让后台根据code获取openID与用户信息)
          console.log('str',str);
          //  通过code 获取openid
          // let params = {
          //   code:str,
          // }
          // getopenid(params).then(res=>{
          //   // console.log('response',response.data);
          //   // localStorage.setItem("openid",response.data.openid) ;// 此处我将openid 进行了存储
          //   console.log('获取到了openid了',res);
          //   // alert(res)
          // })
        } else {
          var appid = 'wx675f6b21818a3d92';
          var redirect_uri ='http://k2xrew.natappfree.cc';
          var newRedirect = encodeURIComponent(redirect_uri); // 此处需要将你的回调页面进行转码,此方法直接使用
          window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+"&redirect_uri="+newRedirect +"&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
        }
      }
    },


 created() {
    this.getAuthorize();
  },

2:调用api接口拿到订单号去发起微信支付

gopay(cardType){    
      // 支付
      let that = this;
      that.cardType = cardType;
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) { 
          document.addEventListener(
              "WeixinJSBridgeReady",
              that.onBridgeReady,
              false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", that.onBridgeReady);
          document.attachEvent("onWeixinJSBridgeReady",that. onBridgeReady);
        }
      } else {
        this.onBridgeReady();
      }
    },
    // 微信支付方法
    onBridgeReady() {
      let that = this;
      let param = {
        // ... 支付相关参数,商品名称价格等等
        eri: "0a4ea440ff5711ec8cbb00e683ddca5e",
        phone: that.inputphone,
        cardType: that.cardType,
        code: that.code
      };
      // 调用获取支付签名接口
      getPaySign(param).then((res)=>{ 
        // let {appid:appId,timeStamp,nonce_str:nonceStr,packageStr,signType,sign:paySign} = data;
        // if(res.)
        WeixinJSBridge.invoke(
            "getBrandWCPayRequest",
            {
              appId: res.data.appId, // 微信的appid
              timeStamp: (res.data.timeStamp).toString(),  //时间戳,这里时间戳转化为字符串格式,不然IOS调用会提示缺少参数timeStamp,而且此处的时间戳必须和生成微信预支付订单使用的时间戳保持一致
              nonceStr: res.data.nonceStr, //随机串
              package: res.data.package,  // 订单号
              signType: res.data.signType, //微信签名方式:
              paySign: res.data.paySign //微信签名
            },
            function(res) {
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示:
                //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
                that.$toast("支付成功")
              } else {
                that.$toast("支付失败,请重新支付");
                this.getAuthorize();
              }
            }
        );
      })
    },

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值