微信小程序前端微信支付功能 支付流程

小程序支付（纯前端）

前提（实现微信小程序支付功能需要appid主体为企业，以及开通了微信商家服务的小程序才能实现，个人小程序是无法实现这个功能的）

前期准备：
1.开通了微信支付，并且小程序绑定了微信支付；
2.准备好小程序的appid，微信支付的商户号，支付秘钥。

商户系统和微信支付系统主要交互：
1、小程序内调用登录接口，获取到用户的openid 方法见：【小程序登录API】
2、调用商户服务器支付统一下单接口，进行预支付（后台）
3、调用商户服务器再次签名接口，返回支付数据
4、小程序内完成支付，商户服务器接收支付回调通知。
————————————————

 

调用方法及参数说明：

        需要注意的是在调用这个方法的时候需要要配合后端请求相关支付商品的数据，金额 等，以及实现用户登录，让后台知道是哪个用户支付的。

模板：

wx.requestPayment()

wx.requestPayment({
    timeStamp: preData.timeStamp + "",
    nonceStr: preData.nonceStr,
    package: preData.package + "",
    signType: 'MD5',
    paySign: preData.paySign,
    success(res) {
        console.log('支付成功');
    },
    fail(res) {
        console.log('支付失败');
        return;
    },
    'complete': function (res) {
        console.log('支付完成');
        if (res.errMsg == 'requestPayment:ok') {
            wx.showModal({
                title: '提示',
                content: '购买成功'
            });
        }
        return;
    }
})

示例代码：

//index.js
Page({
  data: {
 
  },
  //点击支付按钮进行支付
  payclick: function () {
    var t = this;
    wx.login({
      //获取code换取openID
      success: function (res) {
        //code = res.code //返回code
        console.log("获取code");
        console.log(res.code);
        var opid = t.getOpenId(res.code);
      }
    })
  },
  //获取openID
  getOpenId: function (code) {
    var that = this;
    wx.request({
      url: "https://api.weixin.qq.com/sns/jscode2session?appid=你的appid&secret=AppSecret(小程序密钥)&js_code=" + code + "&grant_type=authorization_code",
      data: {},
      method: 'GET',
      success: function (res) {
        console.log("获取openid")
        console.log(res)
        that.setData({
          openid: res.data.openid,
          session_key: res.data.session_key
        })
        that.generateOrder(res.data.openid)
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },
  //生成商户订单
  generateOrder: function (openid) {
    var that = this
    wx.request({
      url: 'http://localhost:25492/wx/getda',//后台请求地址
      method: 'GET',
      data: {
        gfee: '商品价钱',
        gname: '商品名称',
        openId: openid
        //（商品价钱和商品名称根据自身需要是否传值, openid为必传）
      },
      success: function (res) {
        console.log("后台获取数据成功");
        console.log(res);
        var param = { "timeStamp": res.data.timeStamp, "package": res.data.package, "paySign": res.data.paySign, "signType": "MD5", "nonceStr": res.data.nonceStr };
         //发起支付
        that.pay(param);
      },
      fail: function (res) {
        console.log("向后台发送数据失败")
      }
    })
  },
  //支付
  pay: function (param) {
    var that = this;
    console.log("发起支付")
    console.log(param)
    wx.requestPayment({
      timeStamp: param.timeStamp,
      nonceStr: param.nonceStr,
      package: param.package,
      signType: param.signType,
      paySign: param.paySign,
      success: function (res) {
        console.log("success");
        console.log(res);
      },
      fail: function (res) {
        console.log("fail")
        console.log(res);
      },
      complete: function (res) {
        console.log("complete");
        console.log(res)
      }
    })
  }
})

容易遇到的问题：
一，调用微信预订单接口失败

1. 商户号未与小程序绑定
2. 通知地址不是https类型
3. 交易类型没指定为JSAPI
4. 订单号重复

二，可以正常调用微信预订单接口，能获得微信支付返回的prepay_id，但是小程序调起收银台失败

1. 参数错误，会返回调用支付jsapi缺少参数：total_fee，此时与签名没关系，需要检查方法参数，随机字符串和package对应的参数值，还有就是，下预订单使用的用户openid和拉起支付的用户，必须是同一个，不然会报错，我就是遇到这个错误。
2. 支付验证签名失败，这个与获得签名有关系，返回的签名不正确。自己手动获取签名，要注意参数的顺序以及大小写。使用微信工具类获得签名时，也要注意大小写，并且在要签名的参数中加上签名方式repData.put(“signType”,“MD5”);