1.首先判断它是否是微信浏览器,只有在微信浏览器才能拉去微信支付,其他的需要走H5支付流程

// 判断是否是微信浏览器
    isWx() {
      let uAgent = navigator.userAgent.toLowerCase();
      return /micromessenger/.test(uAgent) ? true : false;
    },

2.需要后端接口提供你一个openId

  // 支付按钮
 async goPay() {
      if (this.isWx()) {
        let data1 = await getOpenId();
        if (data1.data == "") {
          let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx284cfd5aae6b9a3a&redirect_uri=${encodeURIComponent(
            window.location.href
          )}&response_type=code&scope=snsapi_userinfo&state=2#wechat_redirect`;
          window.location.href = url;
          console.log(window.location.href);
          // return false;
        } else {
          //微信支付流程
          this.WXPay();
        }
      } else {
        //H5支付流程
        this.H5Pay();
      }
    },

3.如果是微信浏览器,那就拉取预支付订单

appId  取自己公众号上面配置的

 async WXPay() {
      let result = await prepay_official_accounts({
        orderId: this.orderId,
      });
      let data = result.data;
      // 调用微信支付
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: "wx284cXXXXXXXXX", //公众号名称,由商户传入
          timeStamp: data.timeStamp, //时间戳,自1970年以来的秒数
          nonceStr: data.nonceStr, //随机串
          package: data.packageValue,
          signType: "MD5", //微信签名方式:
          paySign: data.paySign, //微信签名
        },
        (res) => {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            //支付成功后跳转的页面,需要修改路径
            window.location.href = `https://olg.scsjb.cn/sjb/#/pages/payresult/payresult?status=0&orderId=${this.orderId}`;
          } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
            window.location.href = `https://olg.scsjb.cn/sjb/#/pages/payresult/payresult?status=1&orderId=${this.orderId}`;
          } else if (res.err_msg == "get_brand_wcpay_request:fail") {
            WeixinJSBridge.call("closeWindow");
          } //使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
        }
      );
    },

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐