移动端页面调用微信支付

最新推荐文章于 2024-07-23 09:36:59 发布

先来个小漩涡

最新推荐文章于 2024-07-23 09:36:59 发布

阅读量3.6k

点赞数

分类专栏：基本文章标签：微信支付移动端

本文链接：https://blog.csdn.net/weixin_43023873/article/details/99943359

版权

基本专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.话不对说，先来个小漩涡
2.步骤：
（1）第一个接口创建订单号，并且后端携带电子签名
（2）第二个接口通过后端返回信息，调用微信支付接口callpay方法
3，上代码

//创建订单，做了一些接口判断，可以根据各自后台协议作出相应更改
          axios.post(allApi.UpdateOrders,{AddressId:addressId,Orders:Orders}
          ).then(function (res) {
            if(res.data.IsSuccess==true){
              //PayType 2支付宝 4离线支付 5微信支付
              axios.post(allApi.PayOrder,{PayType:5,Id:id}
              ).then(function (res) {
                // self.AddOrUpdateAddresses=res.data.Result;
                if(res.data.ErrorCode==7){
                  axios.post('/webapi/Login/GetWxAuthLogin?redirectCode=7',
                  ).then(function (res) {
                    location.href = res.data.Result;
                  }).catch(function (res) {
                    console.log(res)
                  });
                }else {
                  publicFun.funcUrlDel('code');
                  publicFun.funcUrlDel('state');
                  if (res.data.IsSuccess == true) {
                    if (res.data.Result.IsValid == true) {
                      var OpenId = res.data.Result.OpenId;
                      var WxJsApiParam = res.data.Result.WxJsApiParam;
                      var ReturnUrl = res.data.Result.ReturnUrl;
                      var IsNeedPay = res.data.Result.IsNeedPay;
                      if (IsNeedPay == false) {
                        location.href = ReturnUrl;
                      } else {
                        publicFun.callpay(WxJsApiParam, ReturnUrl);
                      }
                    }
                  } else {
                    mui.alert(res.data.ErrorMsg, "", "确定关闭", function () {});
                  }
                }
                console.log(res);
              }).catch(function (res) {
                console.log(res)
              });
            }else {
              mui.alert(res.data.ErrorMsg)
            }
          }).catch(function (res) {
            console.log(res)
          });
        },

4.注意，以上代码此处为重点，通过后台返回数据传入微信支付函数callpay

 var OpenId = res.data.Result.OpenId;
                      var WxJsApiParam = res.data.Result.WxJsApiParam;
                      var ReturnUrl = res.data.Result.ReturnUrl;
                      var IsNeedPay = res.data.Result.IsNeedPay;
                      if (IsNeedPay == false) {
                        location.href = ReturnUrl;
                      } else {
                        publicFun.callpay(WxJsApiParam, ReturnUrl);
                      }

5.微信支付函数

//调用微信JS api 支付
function jsApiCall(wxJsApiParam, returnUrl) {
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest',
    $.parseJSON(wxJsApiParam), //josn串
    function (res) {
      WeixinJSBridge.log(res.err_msg);
      if (res.err_msg == "get_brand_wcpay_request:ok") {
        window.location.href = returnUrl; //成功后跳转到提示页面
      }
    }
  );
}
function callpay(wxJsApiParam, returnUrl) {
  if (typeof WeixinJSBridge == "undefined") {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', jsApiCall(wxJsApiParam, returnUrl), false);
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', jsApiCall(wxJsApiParam, returnUrl));
      document.attachEvent('onWeixinJSBridgeReady', jsApiCall(wxJsApiParam, returnUrl));
    }
  } else {
    jsApiCall(wxJsApiParam, returnUrl);
  }
}

6.到这里支付就ok，
7.总结，就是两个步骤：（1）将订单信息传入后台，后台创建订单信息返回前端，（2）创建订单成功后，调用微信支付函数即可。