【uni-app微信小程序】实现支付功能

大家好，欢迎来到IT知识分享网。

一、说明：

实现微信支付功能需要在小程序后台配置支付相关信息，并且在前端代码中调用微信支付API进行支付操作。好的，uni-app微信小程序实现支付功能整体流程大致如下：

1. 注册微信公众平台，并完成开发者资质认证；
2. 在微信商户平台注册商户账号，并完成商户资质认证；
3. 在商户后台创建支付订单，得到prepay_id；
4. 在客户端调用微信支付API，进行支付请求；
5. 微信返回支付结果给服务器端，服务器端进行结果验证和订单更新；
6. 将订单状态告知客户端，支付完成。

二、简单介绍一下每个步骤的细节：

1. 注册微信公众平台

• 注册地址：微信公众平台 – 申请开通商户号，并对应绑定好微信小程序。
• 开发文档地址：微信官方文档

2. 注册微信商户平台

• 注册地址：接入微信支付 – 中添加产品并获取到API密钥、商户号等相关信息。
• 开发文档地址：微信支付文档

注意： 此商户号，需要由主管及更上级领导进行注册，会成为公司收款账户（不是由前端程序员注册！！！不是由前端程序员注册！！！不是由前端程序员注册！！！）

注册非常简单，重点是需要提供企业资料，一般程序员没有权限获取这些材料，所以需要由上级注册

企业注册需要材料：营业执照，对公银行账户信息，法人身份证

3. 创建支付订单，请求后端接口，获取orderInfo

这里进行说明 orderInfo完全是后端返回的，前端不做任何处理，
所以orderInfo有问题推给后端，前端不用浪费时间, app的支付不管ios还是android都是string类型

微信orderinfo格式 "{\"appid\":\"xxxxxxxx\",\"partnerid\":\"xxxxxxx\",\"prepayid\":\"xxxxxxxxxxxxxxxx\",\"timestamp\":\"\",\"noncestr\":\"xxxxxxx\",\"package\":\"Sign": "WXPay\",\"sign\":\"xxxxxxxxxxxxxxxxxxxx\"}" 

在这里我们简单举一个例子，以Node.js为例，后端代码可能如下所示（变量不是很全，各位后端自己看着改）：

const wxpay = require('node-weixin-pay'); const config = { 
    appid: 'your appid', mch_id: 'your merchant id', partner_key: 'your partner key', pfx: fs.readFileSync('path to your p12 file'), }; const payment = { 
    body: 'Your order description', out_trade_no: 'Your order number', total_fee: 1, spbill_create_ip: 'Your ip address', notify_url: 'Your notify url', trade_type: 'JSAPI', openid: 'Your openid', }; wxpay.getBrandWCPayRequestParams(payment, config, (err, result) => { 
    if (err) { 
    console.error(err); } else { 
    // 返回给前端的支付参数 const orderinfo = { 
    appId: result.appId, timeStamp: result.timeStamp, nonceStr: result.nonceStr, package: result.package, signType: result.signType, paySign: result.paySign, }; } }); 

其中，node-weixin-pay是用来对微信支付进行封装的第三方库，具体使用方法可以参考其官方文档。
上述代码中，需要使用你的 appid、mch_id、partner_key等参数，这些参数是你自己在注册微信支付时所获得的。我们将 payment 对象传递给 getBrandWCPayRequestParams() 方法，并带上 config 对象，该方法会返回一个 加密后的订单信息（即orderInfo）。
最后，我们将加密后的订单信息返回给前端，前端页面拿到该信息后即可使用微信支付API，向微信服务器发送请求，完成支付流程。

微信支付统一下单接口返回的支付参数包含以下含义（重要！！！）：

• appid：小程序或公众号的AppID
• partnerid：商户号
• prepayid：预支付交易会话标识
• noncestr：随机字符串，不长于32位
• timestamp：时间戳，表示当前时间，格式为yyyyMMddHHmmss
• package：统一下单接口返回的prepay_id参数值，此处将其赋值给package，是客户端调起微信支付时的必要参数
• sign：签名，通过签名算法计算得出，用于验签支付结果是否合法。

在客户端调起微信支付时，需要将以上参数传递给微信支付API发送请求完成支付。

4. 调用微信支付API

在客户端调用微信提供的wx.requestPayment方法，需要传入如下参数：

• timeStamp: 时间戳，自1970年以来的秒数
• nonceStr: 随机字符串，不长于32位
• package: 统一下单接口返回的prepay_id参数值，格式为prepay_id=xxx
• signType: 签名算法，目前支持HMAC-SHA256和MD5，默认使用MD5
• paySign: 签名

第三步、第四步一起的示例代码：

uni.request({ 
    url: '你们公司的后端接口地址,获取支付核心数据', method: 'POST', data: { 
    接口需要什么参数就传给接口,包含扣款金额,订单id等 }, success(obj) { 
    //调用微信官方支付接口弹出付款界面,输入密码扣款 wx.requestPayment({ 
    timeStamp: obj.xxxx.timeStamp, //后端返回的时间戳 nonceStr: obj.xxxx.nonceStr, //后端返回的随机字符串 package: obj.xxxx.packageValue, //后端返回的prepay_id signType: 'MD5', //后端签名算法,根据后端来,后端MD5这里即为MD5 paySign: obj.xxxx.paySign, //后端返回的签名 success (res) { 
    console.log('用户支付扣款成功', res) }, fail (res) { 
    console.log('用户支付扣款失败', res) } }) } }) 

以上就是前端实现微信支付功能的基本步骤，需要注意的是，在实际开发中，还需要考虑支付安全、支付异常情况等问题。同时，建议开发者使用uni-app官方提供的微信支付插件来减少开发成本和难度。

5. 验证支付结果和更新订单状态

在微信回调服务器通知支付结果后，服务器需要进行结果验证和处理订单状态。具体步骤如下：

• 将收到的xml转化为数组，验证签名是否一致；
• 判断支付结果中的return_code和result_code是否都为SUCCESS；
• 根据out_trade_no查询订单信息，判断订单状态；
• 更新订单状态为已支付/支付失败。

6. 支付完成

将支付结果告知客户端，客户端根据支付结果进行相应的页面跳转处理。