小程序微信支付流程（商城余额支付，优惠券支付，积分抵消，微信支付）

客官°小女子只卖身不卖艺 2022-12-13 12:56 548阅读 0赞

### 小程序微信支付的流程图： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]

### 1. 登录微信公众平台, 开通微信支付功能 ###

这是准备工作的第一步, 确保小程序对应的支付功能已经开启

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]

### 2. 登录微信商户平台 ###

该步骤需要获取两个参数, 一个是商户号, 一个是支付秘钥, 如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]  
注意秘钥自己要保护好,相当于支付密码,每次签名都需要该参数, 该参数只能设置的时候看得见,其余的时候是没法看得见.所以要记好了!

### 3. 准备完毕,上代码 ###

> 微信小程序的商户系统一般是以接口的形式开发的，小程序通过调用与后端约定好的接口进行参数的传递以及数据的接收。在小程序支付这块，还需要跟微信服务器进行交互。过程大致是这样的：

**一、小程序调用wx.login() 获取code，传递给商户服务器用来获取用户的openID**

> 我们知道在微信平台中，同一个公众号的openID都是不同的，它是用户身份识别的id，也就是说，我们通过openID来区分不同的用户，这个有微信开发基础的应该都很熟悉。为了知道谁在支付，我们需要先获取当前用户的openid，那么openID应该怎么获取呢？看下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 4]

> 小程序调用wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。  
> 开发者服务器以code换取 用户唯一标识openid 和 会话密钥session\_key。

看不懂吗？不急，听我慢慢解释，这个业务流程大致就是首先你得先在小程序的代码中调用wx.login()来向微信获取到code，拿到了之后把code通过request传给商户服务器，再由商户服务器通过骚操作来跟微信服务器要session\_key和openID。

**代码如下（小程序端）：**

getToken: function () { 
        //调用登录接口
        wx.login({ 
          success: function (res) { 
            var code = res.code;
            wx.request({ 
              url: "商户服务器登陆url", 
              data: { 
                code: code
              },
              method: 'POST', 
              success: function (res) {  
                wx.setStorageSync('token', res.data.token); //存在小程序缓存中
              },
              fail: function (res) { 
                console.log(res.data);
              }
            })
          }
        })
      }

调用这几行代码就可以向跟微信服务器要code，并且将code传到商户服务器中，记住这里最好使用post发送请求，安全性的东西我应该不用讲了，因为避免其他人滥用接口，于是我们使用token来进行验证。并将商户服务器返回的token存在小程序缓存中。

**那么服务器端应该怎么做呢？**

我门通过小程序提交的code，和小程序的APPID以及APPSECRET和拼接下列的url，并用url进行get请求。  
`https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code`  
返回的数据是一个json对象，我门通过使用json\_decode(JSON,true)解析为数组，数据包括用户的openID以及session\_key，获取到了后我们应该将openID存入数据库中，它代表着用户的身份，那么令牌应该怎么生成呢。

**二.token的生成以及缓存**  
我们根据一个用户表将id和openid联系起来，对应openID的id则是用户的uid，我们可以这么封装

//要缓存的数据数组
    $cacheValue = $result;   //包含openID和session_key
    $cacheValue['uid'] =$uid;   //用户id
     
    $cacheValue['scope'] =ScopeEnum::User;   //用户权限级别

缓存的方式我们可以选择redis，memcache， 文件缓存等等，采用键值对（key-value）的方式进行存储,记得设置好过期时间。这里的key我们用token来赋值，token可以通过这样的方式进行生成：

//获取32位随机字符串
    $str = getRandChar(32);   //自定义方法生成32位随机串
    //三组字符串进行md5加密
    $timeStamp =$_SERVER['REQUEST_TIME_FLOAT'];
    //salt
    $salt = config('secure.token_salt'); //随机字符串
    //返回token
     
    return md5($str.$timeStamp.$salt);

这种算法基本保障了token的唯一性。因为值是我们获取到的openID和session\_key所在的数组，所以需要将数组转成json才能存进去。以后的代码当我们需要openID或者uid等时可以直接通过取缓存的方式来取。

### 三，调用统一下单接口，获取prepay\_id,再次签名(后端完成，不详解) ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70]

1.  点击‘提交订单’按钮，创建订单，清空购物车，完成支付

<van-submit-bar price="{ { allGoodsAndYunPrice*100 }}" suffix-label="+{ {totalScoreToPay}} 积分" button-text="提交订单" bind:submit="goCreateOrder" />

1.  创建订单，清空购物车，调用支付函数

### 四，wx.requestPayment（）获取五个参数后，调起支付 ###

const WXAPI = require('apifm-wxapi')
    
    /** * type: order 支付订单 recharge 充值 paybill 优惠买单 * data: 扩展数据对象，用于保存参数 */
    function wxpay(type, money, orderId, redirectUrl, data) { 
    
      WXAPI.wxpay(postData).then(function (res) { 
        if (res.code == 0) { 
          // 发起支付
          wx.requestPayment({ 
            timeStamp: res.data.timeStamp, //时间戳
            nonceStr: res.data.nonceStr,,//随机字符串
            package: res.data.package,//订单详情扩展字符串
            signType: res.data.signType//签名方式
            paySign: res.data.paySign,//签名
            fail: function (aaa) { 
              console.error(aaa)
              wx.showToast({ 
                title: '支付失败:' + aaa
              })
            },
            success: function () { 
              // 提示支付成功
              wx.showToast({ 
                title: '支付成功'
              })
              wx.redirectTo({ 
                url: redirectUrl
              });
            }
          })
        } else { 
          wx.showModal({ 
            title: '出错了',
            content: JSON.stringify(res),
            showCancel: false
          })
        }
      })
    }
    
    module.exports = { 
      wxpay: wxpay
    }

### 五，支付回调 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/b2616f9ba75e42b0a4796335e39c92e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/7da9bd4994984dc1aaf0cfa63ee713f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/7b5ef6e3e5b1402983b3d0db8532ff3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/a5d0fc53b07e48f8a695542b8ac33641.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/eb62c3dff4d94973a72aafe492772493.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70]: /images/20221123/3a00d8be4d3d45f786e8939ca8c34a8d.png