微信小程序--微信支付流程

今天做微信支付，记录一下

微信支付，对于我们前端来说还是比较简单的，知道大致流程之后，调用api，进行相应提示即可

使用微信支付，首先得是企业级用户，也就是有营业执照的，有两种注册方式：

①公众号注册（每年认证一次，300元/年）  可扩展10个微信小程序，与公众号是同一个主体，同一个营业执照 ，一般选用这种方式，比较划算
②直接注册成小程序，也是300元/年

详情请看官方介绍  微信支付官方

下面介绍下前端流程的大致步骤：

用户点击下单，将订单信息传给后台，由后台调用微信立即下单接口，生成预支付订单，并将参数返回给客户端，客户端使用request.payment  吊起微信支付，用户输入密码支付，支付成功客户端收到通知，提示用户支付成功并跳转到指定页面

当然，我们不能过度依赖接口返回的，如果想要更安全的情况下，可以再次向后台发送请求是否成功，更严谨一点

api相关用法请看官方链接小程序官方api文档

 //创建订单
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Payment/payment',
      method:'post',
      data: {
        uid: that.data.userId,
        cart_id: that.data.cartId,
        type:that.data.paytype,
        aid: that.data.addrId,//地址的id
        remark: that.data.remark,//用户备注
        price: that.data.total,//总价
        vid: that.data.vid,//优惠券ID
      },
      header: {
        'Content-Type':  'application/x-www-form-urlencoded'
      },
      success: function (res) {
        //--init data        
        var data = res.data;
        if(data.status == 1){
          //创建订单成功
          if(data.arr.pay_type == 'cash'){//支付类型
              wx.showToast({
                 title:"请自行联系商家进行发货!",
                 duration:3000
              });
              return false;
          }
          if(data.arr.pay_type == 'weixin'){
            //调用微信支付
            that.wxpay(data.arr);
          }
        }else{
          wx.showToast({
            title:"下单失败!",
            duration:2500
          });
        }
      },
      fail: function (e) {
        wx.showToast({
          title: '网络异常！err:createProductOrder',
          duration: 2000
        });
      }
    });
  },

这里，微信支付我封装成了一个函数

  //调起微信支付
  wxpay: function(order){
      wx.request({
        url: app.d.ceshiUrl + '/Api/Wxpay/wxpay',//后台url 后端去调用立即下单接口
        data: {
          order_id:order.order_id,//订单id
          order_sn:order.order_sn,//订单号
          uid:this.data.userId,
        },
        method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        header: {
          'Content-Type':  'application/x-www-form-urlencoded'
        }, // 设置请求的 header
        success: function(res){
          if(res.data.status==1){
            var order=res.data.arr;
            wx.requestPayment({
              timeStamp: order.timeStamp,//时间戳
              nonceStr: order.nonceStr,//随机字符串
              package: order.package,//统一下单接口返回的 prepay_id 参数值
              signType: 'MD5',//签名算法
              paySign: order.paySign,//签名
              success: function(res){
                wx.showToast({
                  title:"支付成功!",
                  duration:2000,
                });
                setTimeout(function(){
                  wx.navigateTo({
                    url: '../user/dingdan?currentTab=1&otype=deliver',
                  });
                },2500);
              },
              fail: function(res) {
                wx.showToast({
                  title:res,
                  duration:3000
                })
              }
            })
          }else{
            wx.showToast({
              title: res.data.err,
              duration: 2000
            });
          }
        },
        fail: function() {
          // fail
          wx.showToast({
            title: '网络异常！err:wxpay',
            duration: 2000
          });
        }
      })
  },

以上方法仅供参考，大家可以根据的自己的需求进行相应的调整