vue 微信支付

微信支付

1.相关官方文档

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

2.给支付按钮绑定点击事件

<span class="three" @click="pay()" v-if="payshow">立即支付</span>

3.调起微信支付的接口

 pay() {
     function isWeiXin() {
     //此处是一段ua判断
        var ua = window.navigator.userAgent.toLowerCase();
        console.log(ua);
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          return true;
        } else {
          return false;
        }
      }
      if (isWeiXin()) {
        // alert("微信"); 根据前面的此处可以判断是在微信内打开的
        //后端返回所需数据
        this.$axios({
          method: "post",
          url: "",   //你的接口地址
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
          .then(res => {
            //console.log(res);  
            var that = this;
            if (res.data.status == 1) {
              function onBridgeReady() {
                // const pay_params = JSON.parse(params);
                var str =
                  "appId=" +
                  res.data.data.appId +
                  "&timeStamp=" +
                  res.data.data.timeStamp +
                  "&nonceStr=" +
                  res.data.data.nonceStr +
                  "&prepay_id=" +
                  res.data.data.package +
                  "&signType=" +
                  res.data.data.signType +
                  "&paySign=" +
                  res.data.data.sign;
                console.log(str);
                WeixinJSBridge.invoke(
                  "getBrandWCPayRequest",
                  {
                    appId: res.data.data.appId, //公众号名称，由商户传入
                    timeStamp: res.data.data.timeStamp, //时间戳，自1970年以来的秒数
                    nonceStr: res.data.data.nonceStr, //随机串
                    package: res.data.data.package,
                    signType: res.data.data.signType, //微信签名方式：
                    paySign: res.data.data.sign //微信签名sign
                  },
                  function(res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                    //此处是调起微信支付成功的回调，可以在此处跳转支付成功的页面，和你的业务逻辑
                      that.paymentData = "支付成功";
                      // 使用以上方式判断前端返回,微信团队郑重提示：
                      //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                    //此处是调起取消微信支付的回调，可以在此处跳转您已取消支付的页面，和你的业务逻辑
                      
                    } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                    //此处是调起微信支付失败的回调
                   }
                   
                    // alert(JSON.stringify(res));   //此处可以弹出调起微信支付的失败或成功的信息
                  }
                );
              }
              onBridgeReady();
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      } else {
        // alert('微信外')  根据前面的ua判断，可以判断出是在微信外调起的微信支付
        //向后台请求相关的数据
        // this.$axios({
        //     method: "post",
        //     url: "", 你的接口地址
        //     headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        //   })
        //   .then(res => {
        //       console.log(res)
        //   })
        // console.log(this.$refs.link)  返回支付路径
        // this.$refs.link.href = "";   跳转支付页面
      }
    }

4.说明

4.1微信支付测试必须放在服务器上测试才能发现问题，因为微信支付主要是利用微信的onBridgeReady()内置对象来调起支付
4.2微信外H5支付，主要是后端返回前端的url地址 前端进行跳转
4.3 如果发现支付调不起来，或者是一闪而过，应该是授权目录没有配置好
4.4 如果返回一段路径未注册，需要配置授权目录
4.5 可以利用微信开发者工具测试后端返回的res数据

5.关于安卓和ios的授权目录支付的问题

//此编文章详细的介绍了，希望能够帮到你
https://blog.csdn.net/pkueecser/article/details/52438231