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

最新推荐文章于 2024-10-01 01:46:42 发布

网络真危险！！

最新推荐文章于 2024-10-01 01:46:42 发布

阅读量1.6w

点赞数 18

分类专栏： # 移动端、微信小程序项目踩坑总结文章标签：微信小程序 uni-app 微信

本文链接：https://blog.csdn.net/weixin_55846296/article/details/130822408

版权

移动端、微信小程序项目踩坑总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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

一、说明：

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

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

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

1. 注册微信公众平台

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

2. 注册微信商户平台

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

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

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

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

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

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

微信orderinfo格式   
 "{\"appid\":\"xxxxxxxx\",\"partnerid\":\"xxxxxxx\",\"prepayid\":\"xxxxxxxxxxxxxxxx\",\"timestamp\":\"1579779903\",\"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)
      }
     })
 
  }
})