【原创】微信支付前端相关，微信商城开发

最近在开发一个微信的商城项目，给大家分享一下关于微信支付的相关的把，先说说商城开发的流程，商城不管是否用微信登录，都应该可以浏览，一直到支付之前才会调用微信登录。微信登录可以参考我之前的一片博客，里面写了纯前端的微信登录（特殊需求，正常应该走后台），

先说说完整的微信支付的流程把：

首先，应该调用后台的一个接口，达到创建订单，接口要返回订单号，订单需要支付的金额。

第二步，调用后台的接口实现微信支付，返回微信jsapi所需要的appid，timestamp，noncestr,package,signtype,paysign

第三步调用微信jsapi唤起微信支付。回调函数来判断支付成功、失败、取消

第四步根据不同状态进行不同操作，成功前往成功页面，失败和取消调用取消订单，将支付中改为代付款

流程就是这样，当然每个项目都要根据具体情况来实现，比如我们就是通过用户的userId后台在数据库检索appid 分享一下我们的流程把

$.ajax({
        type: "POST",
        url: "http://ip:port/order/create",
        crossDomain: true,

        data: JSON.stringify({
          userCode: this.userId,
          shopCode: this.$route.query.shopId,
          distributionType: pstype,
          addressProvince: arr[0],
          addressCity: arr[1],
          addressBlock: arr[2],
          addressStreet: this.AddressObj.address,
          contactPhone: this.AddressObj.phone,
          contactName: this.AddressObj.name,
          isFreightInsurance: 0,
          expressAmount: 0,
          description: this.liuyan,
          orderCargoList: [
            {
              cargoCode: this.$route.query.cargoId,
              cargoCount: this.num,
              presentPrice: 1,
              originalPrice: 1,
              cargoSpec: this.pug,
              cargoTitle: this.goodtitle,
              cargoPicture: this.checkimgUrl
            }
          ]
        }),
        contentType: "application/json",

        success: res => {
       
          let data = JSON.stringify({
            userCode: this.userId,
            orderNumber: res.data.orderNumber,
            paymentAmount: res.data.paymentAmount,
            paymentMode: 2,
            paymentSource: "JSAPI",
            
          });
          
          $.ajax({
            type: "POST",
            url: "http://ip:port/order/payment",

            crossDomain: true,
            data: data,
            contentType: "application/json",
            success: result => {
              console.log(result);
       
              WeixinJSBridge.invoke(
                "getBrandWCPayRequest",
                {
                  appId: result.data.appId,
                  timeStamp: result.data.timeStamp,
                  nonceStr: result.data.nonceStr,
                  package: result.data.package,
                  signType: result.data.signType,
                  paySign: result.data.paySign
                },
                function(wxres) {
                    alert(wxres.err_msg);
                  if (wxres.err_msg == "get_brand_wcpay_request:ok") {
                    // 支付成功
                      
                  } else if (wxres.err_msg == "get_brand_wcpay_request:cancel") {
                    // 支付取消
                   
                    alert(JSON.stringify(wxres));
                    alert('已经取消 准备发送ajax');
                    alert(res.data.orderNumber);
                               $.ajax({
                          url:"http://ip:port/order/payment/cancel",
                          type : "post",
                          data:JSON.stringify({
                            paymentMode:2,
                            orderNumber:res.data.orderNumber,
                            message:"用户取消支付",
                          }),
                         contentType: "application/json",

                          success:res=>{
                              alert('ajax成功')
                            this.tipText = "支付取消",
                            this.tip = true;
                            setTimeout(()=>{
                              this.tip = false;
                            },1000);
                          },
                          error:err=>{
                              alert('ajax失败')
                            console.log(err);
                          }
                        })
                  } else {
                       alert('失败')
                             $.ajax({
                          url:"http://ip:port/order/payment/cancel",

                          data:JSON.stringify({
                            paymentMode:2,
                            orderNumber:res.data.orderNumber,
                            message:"用户取消支付",
                          }),
                          type : "post",
                          success:res=>{
                            this.tipText = "支付取消",
                            this.tip = true;
                            setTimeout(()=>{
                              this.tip = false;
                            },1000);
                          },
                          error:err=>{
                            console.log(err);
                          }
                        })
                  }
                }
              );
            },
            error: err => {
                alert('支付出现问题了')
              console.log(err);
            },
            dataType: "json"
          });
        },
        error: err => {
            alert('创建订单出现问题了');
          console.log(err);
        },
        dataType: "json"
      });

这个就是微信支付的流程，每一步都需要异步去操作，当然可以把ajax封装好，直接调用即可。

ps:本文仅作为我们当前项目的需要，所传参数不一定所有都是如此调用，重点看流程。